diff --git a/src/plugins/components/button-group.ts b/src/plugins/components/button-group.ts new file mode 100644 index 0000000..0b1d1ab --- /dev/null +++ b/src/plugins/components/button-group.ts @@ -0,0 +1,46 @@ +import plugin from 'tailwindcss/plugin' +import { defu } from 'defu' +import { type PluginOption, defaultPluginOptions } from '../options' + +const defaultButtonGroupConfig = {} + +export default plugin.withOptions( + function (options: PluginOption) { + const { prefix } = defu(options, defaultPluginOptions) + + return function ({ addComponents, theme }) { + const config = theme( + 'shurikenUi.buttonGroup' + ) satisfies typeof defaultButtonGroupConfig + + addComponents({ + [`.${prefix}-button-group`]: { + [`@apply flex`]: {}, + + [`.${prefix}-button, .${prefix}-button-action, .${prefix}-button-icon`]: + { + [`@apply !border-e-0`]: {}, + [`&:not(:first-child):not(:last-child)`]: { + [`@apply !rounded-none`]: {}, + }, + [`&:first-child`]: { + [`@apply !rounded-e-none`]: {}, + }, + [`&:last-child`]: { + [`@apply !border-e !rounded-s-none`]: {}, + }, + }, + }, + }) + } + }, + function () { + return { + theme: { + shurikenUi: { + buttonGroup: defaultButtonGroupConfig, + }, + }, + } + } +) diff --git a/src/plugins/components/index.ts b/src/plugins/components/index.ts index 6ef2b32..14687f1 100644 --- a/src/plugins/components/index.ts +++ b/src/plugins/components/index.ts @@ -1,6 +1,7 @@ import plugin from 'tailwindcss/plugin' import { defu } from 'defu' import { type PluginOption } from '../options' +import buttonGroup from './button-group' import dropdown from './dropdown' import focus from './focus' import label from './label' @@ -11,6 +12,7 @@ import slimscroll from './slimscroll' import tooltip from './tooltip' const components = [ + buttonGroup, dropdown, focus, label,