@soybeanjs/ui 0.17.0 → 0.19.0

package/dist/components/textarea/variants.d.ts

@@ -8,37 +8,37 @@ declare const textareaVariants: _$tailwind_variants0.TVReturnType<{
       root: string;
       control: string;
       counter: string;
-      clearable: string;
+      clear: string;
     };
     sm: {
       root: string;
       control: string;
       counter: string;
-      clearable: string;
+      clear: string;
     };
     md: {
       root: string;
       control: string;
       counter: string;
-      clearable: string;
+      clear: string;
     };
     lg: {
       root: string;
       control: string;
       counter: string;
-      clearable: string;
+      clear: string;
     };
     xl: {
       root: string;
       control: string;
       counter: string;
-      clearable: string;
+      clear: string;
     };
     '2xl': {
       root: string;
       control: string;
       counter: string;
-      clearable: string;
+      clear: string;
     };
   };
   resize: {
@@ -59,44 +59,44 @@ declare const textareaVariants: _$tailwind_variants0.TVReturnType<{
   root: string[];
   control: string[];
   counter: string;
-  clearable: string;
+  clear: string;
 }, undefined, {
   size: {
     xs: {
       root: string;
       control: string;
       counter: string;
-      clearable: string;
+      clear: string;
     };
     sm: {
       root: string;
       control: string;
       counter: string;
-      clearable: string;
+      clear: string;
     };
     md: {
       root: string;
       control: string;
       counter: string;
-      clearable: string;
+      clear: string;
     };
     lg: {
       root: string;
       control: string;
       counter: string;
-      clearable: string;
+      clear: string;
     };
     xl: {
       root: string;
       control: string;
       counter: string;
-      clearable: string;
+      clear: string;
     };
     '2xl': {
       root: string;
       control: string;
       counter: string;
-      clearable: string;
+      clear: string;
     };
   };
   resize: {
@@ -117,44 +117,44 @@ declare const textareaVariants: _$tailwind_variants0.TVReturnType<{
   root: string[];
   control: string[];
   counter: string;
-  clearable: string;
+  clear: string;
 }, _$tailwind_variants0.TVReturnType<{
   size: {
     xs: {
       root: string;
       control: string;
       counter: string;
-      clearable: string;
+      clear: string;
     };
     sm: {
       root: string;
       control: string;
       counter: string;
-      clearable: string;
+      clear: string;
     };
     md: {
       root: string;
       control: string;
       counter: string;
-      clearable: string;
+      clear: string;
     };
     lg: {
       root: string;
       control: string;
       counter: string;
-      clearable: string;
+      clear: string;
     };
     xl: {
       root: string;
       control: string;
       counter: string;
-      clearable: string;
+      clear: string;
     };
     '2xl': {
       root: string;
       control: string;
       counter: string;
-      clearable: string;
+      clear: string;
     };
   };
   resize: {
@@ -175,7 +175,7 @@ declare const textareaVariants: _$tailwind_variants0.TVReturnType<{
   root: string[];
   control: string[];
   counter: string;
-  clearable: string;
+  clear: string;
 }, undefined, unknown, unknown, undefined>>;
 type TextareaVariants = VariantProps<typeof textareaVariants>;
 type TextareaResize = NonNullable<TextareaVariants['resize']>;

package/dist/components/textarea/variants.js

@@ -1 +1 @@
-import{tv as e}from"tailwind-variants";const t=e({slots:{root:[`group relative flex flex-col`,`rounded-md border border-solid border-input bg-background transition-all-150`,`outline-none focus-within:ring-3  focus-within:ring-offset-background focus-within:ring-primary/30`],control:[`w-full bg-transparent outline-none`,`placeholder:text-muted-foreground`,`disabled:cursor-not-allowed disabled:opacity-50`],counter:`absolute z-2 leading-none text-muted-foreground`,clearable:`absolute hidden group-hover:block size-1em cursor-pointer opacity-50 hover:opacity-100`},variants:{size:{xs:{root:`text-2xs`,control:`min-h-6 px-1.5 py-1`,counter:`text-2xs right-1.75 bottom-1.5`,clearable:`right-1.5 top-1.5`},sm:{root:`text-xs`,control:`min-h-7 px-1.75 py-1`,counter:`text-xs right-2 bottom-1.75`,clearable:`right-1.75 top-1.75`},md:{root:`text-sm`,control:`min-h-8 px-2 py-1`,counter:`text-sm right-2.5 bottom-2`,clearable:`right-2 top-2`},lg:{root:`text-base`,control:`min-h-9 px-2.5 py-1`,counter:`text-base right-3 bottom-2.5`,clearable:`right-2.5 top-2.5`},xl:{root:`text-lg`,control:`min-h-10 px-3 py-1`,counter:`text-lg right-3.5 bottom-3`,clearable:`right-3 top-3`},"2xl":{root:`text-xl`,control:`min-h-12 px-4 py-2`,counter:`text-xl right-4 bottom-3.5`,clearable:`right-3.5 top-3.5`}},resize:{true:{control:`resize`},false:{control:`resize-none`},vertical:{control:`resize-y`},horizontal:{control:`resize-x`}}},defaultVariants:{size:`md`,resize:`vertical`}});export{t as textareaVariants};
+import{tv as e}from"tailwind-variants";const t=e({slots:{root:[`group relative flex flex-col`,`rounded-md border border-solid border-input bg-background transition-all-150`,`outline-none focus-within:ring-3  focus-within:ring-offset-background focus-within:ring-primary/30`],control:[`w-full bg-transparent outline-none`,`placeholder:text-muted-foreground`,`disabled:cursor-not-allowed disabled:opacity-50`],counter:`absolute z-2 leading-none text-muted-foreground`,clear:`absolute hidden opacity-50 group-hover:inline-flex group-focus-within:inline-flex hover:opacity-100`},variants:{size:{xs:{root:`text-2xs`,control:`min-h-6 px-1.5 py-1`,counter:`text-2xs end-1.75 bottom-1.5`,clear:`end-1.5 top-1.5`},sm:{root:`text-xs`,control:`min-h-7 px-1.75 py-1`,counter:`text-xs end-2 bottom-1.75`,clear:`end-1.75 top-1.75`},md:{root:`text-sm`,control:`min-h-8 px-2 py-1`,counter:`text-sm end-2.5 bottom-2`,clear:`end-2 top-2`},lg:{root:`text-base`,control:`min-h-9 px-2.5 py-1`,counter:`text-base end-3 bottom-2.5`,clear:`end-2.5 top-2.5`},xl:{root:`text-lg`,control:`min-h-10 px-3 py-1`,counter:`text-lg end-3.5 bottom-3`,clear:`end-3 top-3`},"2xl":{root:`text-xl`,control:`min-h-12 px-4 py-2`,counter:`text-xl end-4 bottom-3.5`,clear:`end-3.5 top-3.5`}},resize:{true:{control:`resize`},false:{control:`resize-none`},vertical:{control:`resize-y`},horizontal:{control:`resize-x`}}},defaultVariants:{size:`md`,resize:`vertical`}});export{t as textareaVariants};

package/dist/components/time-field/index.d.ts

@@ -1,3 +1,3 @@
-import { TimeFieldEmits, TimeFieldProps, TimeFieldSlotProps, TimeFieldSlots } from "./types.js";
+import { TimeFieldEmits, TimeFieldProps } from "./types.js";
 import { _default } from "./time-field.vue.js";
 export * from "@soybeanjs/headless/time-field";

package/dist/components/time-field/time-field.js

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{timeFieldVariants as t}from"./variants.js";import{Fragment as n,computed as r,createBlock as i,createElementBlock as a,createTextVNode as o,defineComponent as s,mergeProps as c,normalizeProps as l,openBlock as u,renderList as d,renderSlot as f,toDisplayString as p,toHandlers as m,unref as h,withCtx as g}from"vue";import{useForwardListeners as _,useOmitProps as v}from"@soybeanjs/headless/composables";import{TimeFieldInput as y,TimeFieldRoot as b,provideTimeFieldUi as x}from"@soybeanjs/headless/time-field";const S=s({name:`STimeField`,__name:`time-field`,props:{class:{},size:{},ui:{},inputProps:{}},emits:[`update:modelValue`,`update:placeholder`],setup(s,{emit:S}){let C=s,w=_(S),T=v(C,[`class`,`size`,`ui`,`inputProps`]);return x(r(()=>e(t({size:C.size}),C.ui,{root:C.class}))),(e,t)=>(u(),i(h(b),c(h(T),m(h(w))),{default:g(t=>[e.$slots.default?f(e.$slots,`default`,l(c({key:0},t))):(u(!0),a(n,{key:1},d(t.segments,(e,t)=>(u(),i(h(y),c({key:`${e.part}-${t}`,part:e.part},{ref_for:!0},s.inputProps),{default:g(()=>[o(p(e.value),1)]),_:2},1040,[`part`]))),128))]),_:3},16))}});export{S as default};
+import{mergeVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{dateFieldVariants as t}from"../date-field/variants.js";import{computed as n,createBlock as r,defineComponent as i,mergeProps as a,openBlock as o,toHandlers as s,unref as c}from"vue";import{useForwardListeners as l,useOmitProps as u}from"@soybeanjs/headless/composables";import{TimeFieldCompact as d,provideTimeFieldUi as f}from"@soybeanjs/headless/time-field";const p=i({name:`STimeField`,__name:`time-field`,props:{class:{type:[Boolean,null,String,Object,Array]},size:{},ui:{},inputProps:{},defaultValue:{},modelValue:{},defaultPlaceholder:{},placeholder:{},granularity:{},maxValue:{},minValue:{},isTimeUnavailable:{type:Function},id:{},hourCycle:{},step:{},hideTimeZone:{type:Boolean},name:{},required:{type:Boolean},dir:{},locale:{},disabled:{type:Boolean},readonly:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`update:modelValue`,`update:placeholder`],setup(i,{emit:p}){let m=i,h=l(p),g=u(m,[`class`,`size`,`ui`]);return f(n(()=>e(t({size:m.size}),m.ui,{root:m.class}))),(e,t)=>(o(),r(c(d),a(c(g),s(c(h))),null,16))}});export{p as default};

package/dist/components/time-field/time-field.vue.d.ts

@@ -1,22 +1,15 @@
-import { TimeFieldProps, TimeFieldSlots } from "./types.js";
+import { TimeFieldProps } from "./types.js";
 import * as _$vue from "vue";
 import * as _$_soybeanjs_headless_date0 from "@soybeanjs/headless/date";
 
 //#region src/components/time-field/time-field.vue.d.ts
-type __VLS_Slots = TimeFieldSlots;
-declare const __VLS_base: _$vue.DefineComponent<TimeFieldProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
+declare const __VLS_export: _$vue.DefineComponent<TimeFieldProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
   "update:modelValue": (time: _$_soybeanjs_headless_date0.TimeValue | undefined) => any;
   "update:placeholder": (time: _$_soybeanjs_headless_date0.TimeValue) => any;
 }, string, _$vue.PublicProps, Readonly<TimeFieldProps> & Readonly<{
   "onUpdate:modelValue"?: ((time: _$_soybeanjs_headless_date0.TimeValue | undefined) => any) | undefined;
   "onUpdate:placeholder"?: ((time: _$_soybeanjs_headless_date0.TimeValue) => any) | undefined;
 }>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
-type __VLS_WithSlots<T, S> = T & {
-  new (): {
-    $slots: S;
-  };
-};
 //#endregion
 export { _default };

package/dist/components/time-field/types.d.ts

@@ -1,32 +1,12 @@
 import { ThemeSize } from "../../theme/types.js";
-import { TimeFieldInputProps, TimeFieldRootEmits, TimeFieldRootProps, TimeFieldUi } from "@soybeanjs/headless/time-field";
+import { TimeFieldCompactEmits, TimeFieldCompactProps, TimeFieldUi } from "@soybeanjs/headless/time-field";
 import { ClassValue } from "@soybeanjs/headless/types";
 
 //#region src/components/time-field/types.d.ts
 /**
- * Slot props for the time field component.
+ * Properties for the TimeField component.
  */
-interface TimeFieldSlotProps {
-  /**
-   * Current model value.
-   */
-  modelValue: TimeFieldRootProps['modelValue'];
-  /**
-   * Segments exposed in the slot scope.
-   */
-  segments: {
-    part: TimeFieldInputProps['part'];
-    value: string;
-  }[];
-  /**
-   * Whether the current value is invalid.
-   */
-  isInvalid: boolean;
-}
-/**
- * Props for the time field component.
- */
-interface TimeFieldProps extends /** @vue-ignore */TimeFieldRootProps {
+interface TimeFieldProps extends TimeFieldCompactProps {
   /**
    * Additional class names applied to the root element.
    */
@@ -39,23 +19,10 @@ interface TimeFieldProps extends /** @vue-ignore */TimeFieldRootProps {
    * Per-slot class overrides for the component.
    */
   ui?: Partial<TimeFieldUi>;
-  /**
-   * Props forwarded to the input element.
-   */
-  inputProps?: Omit<TimeFieldInputProps, 'part'>;
 }
 /**
- * Emits for the time field component.
- */
-type TimeFieldEmits = TimeFieldRootEmits;
-/**
- * Slots for the time field component.
+ * Events for the TimeField component.
  */
-interface TimeFieldSlots {
-  /**
-   * Custom content for the default slot.
-   */
-  default?: (props: TimeFieldSlotProps) => any;
-}
+type TimeFieldEmits = TimeFieldCompactEmits;
 //#endregion
-export { TimeFieldEmits, TimeFieldProps, TimeFieldSlotProps, TimeFieldSlots };
+export { TimeFieldEmits, TimeFieldProps };

package/dist/components/time-range-field/index.d.ts

@@ -1,3 +1,3 @@
-import { TimeRangeFieldEmits, TimeRangeFieldProps, TimeRangeFieldSlotProps, TimeRangeFieldSlots } from "./types.js";
+import { TimeRangeFieldEmits, TimeRangeFieldProps, TimeRangeFieldSlots } from "./types.js";
 import { _default } from "./time-range-field.vue.js";
 export * from "@soybeanjs/headless/time-range-field";

package/dist/components/time-range-field/time-range-field.js

@@ -1 +1 @@
-import{mergeSlotVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{timeRangeFieldVariants as t}from"./variants.js";import{computed as n,createBlock as r,createSlots as i,defineComponent as a,guardReactiveProps as o,mergeProps as s,normalizeProps as c,openBlock as l,renderSlot as u,toHandlers as d,unref as f,withCtx as p}from"vue";import{useForwardListeners as m,useOmitProps as h}from"@soybeanjs/headless/composables";import{TimeRangeFieldCompact as g,provideTimeRangeFieldUi as _}from"@soybeanjs/headless/time-range-field";const v=a({name:`STimeRangeField`,__name:`time-range-field`,props:{class:{},size:{},ui:{},inputProps:{},separator:{default:`–`}},emits:[`update:modelValue`,`update:placeholder`,`update:startValue`,`update:endValue`],setup(a,{emit:v}){let y=a,b=m(v),x=h(y,[`class`,`size`,`ui`,`inputProps`,`separator`]);return _(n(()=>e(t({size:y.size}),y.ui,{root:y.class}))),(e,t)=>(l(),r(f(g),s({...f(x),inputProps:a.inputProps,separator:a.separator},d(f(b))),i({_:2},[e.$slots.default?{name:`default`,fn:p(t=>[u(e.$slots,`default`,c(o(t)))]),key:`0`}:void 0,e.$slots.separator?{name:`separator`,fn:p(()=>[u(e.$slots,`separator`)]),key:`1`}:void 0]),1040))}});export{v as default};
+import{mergeVariants as e}from"../../theme/shared.js";import"../../theme/index.js";import{dateFieldVariants as t}from"../date-field/variants.js";import{dateRangeFieldVariants as n}from"../date-range-field/variants.js";import{computed as r,createBlock as i,createSlots as a,defineComponent as o,mergeProps as s,openBlock as c,renderList as l,renderSlot as u,toHandlers as d,unref as f,useSlots as p,withCtx as m}from"vue";import{useForwardListeners as h,useOmitProps as g}from"@soybeanjs/headless/composables";import{keysOf as _}from"@soybeanjs/utils";import{TimeRangeFieldCompact as v,provideTimeRangeFieldUi as y}from"@soybeanjs/headless/time-range-field";const b=o({name:`STimeRangeField`,__name:`time-range-field`,props:{class:{type:[Boolean,null,String,Object,Array]},size:{},ui:{},inputProps:{},separator:{},defaultValue:{},modelValue:{},startName:{},endName:{},defaultPlaceholder:{},placeholder:{},granularity:{},maxValue:{},minValue:{},isTimeUnavailable:{type:Function},id:{},hourCycle:{},step:{},hideTimeZone:{type:Boolean},name:{},required:{type:Boolean},dir:{},locale:{},disabled:{type:Boolean},readonly:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`update:modelValue`,`update:placeholder`,`update:startValue`,`update:endValue`],setup(o,{emit:b}){let x=o,S=b,C=p(),w=h(S),T=g(x,[`class`,`size`,`ui`]),E=r(()=>_(C));return y(r(()=>{let r=n({size:x.size}),i=t({size:x.size});return e(Object.assign(r,i),x.ui,{root:x.class})})),(e,t)=>(c(),i(f(v),s(f(T),d(f(w))),a({_:2},[l(E.value,t=>({name:t,fn:m(()=>[u(e.$slots,t)])}))]),1040))}});export{b as default};

package/dist/components/time-range-field/time-range-field.vue.d.ts

@@ -14,9 +14,7 @@ declare const __VLS_base: _$vue.DefineComponent<TimeRangeFieldProps, {}, {}, {},
   "onUpdate:placeholder"?: ((time: _$_soybeanjs_headless_date0.TimeValue) => any) | undefined;
   "onUpdate:startValue"?: ((time: _$_soybeanjs_headless_date0.TimeValue | undefined) => any) | undefined;
   "onUpdate:endValue"?: ((time: _$_soybeanjs_headless_date0.TimeValue | undefined) => any) | undefined;
-}>, {
-  separator: string;
-}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 type __VLS_WithSlots<T, S> = T & {

package/dist/components/time-range-field/types.d.ts

@@ -1,39 +1,12 @@
 import { ThemeSize } from "../../theme/types.js";
-import { TimeRangeFieldInputProps, TimeRangeFieldRootEmits, TimeRangeFieldRootProps, TimeRangeFieldUi } from "@soybeanjs/headless/time-range-field";
+import { TimeRangeFieldCompactEmits, TimeRangeFieldCompactProps, TimeRangeFieldCompactSlots, TimeRangeFieldUi } from "@soybeanjs/headless/time-range-field";
 import { ClassValue } from "@soybeanjs/headless/types";
 
 //#region src/components/time-range-field/types.d.ts
 /**
- * Slot props for the time range field component.
+ * Properties for the TimeRangeField component.
  */
-interface TimeRangeFieldSlotProps {
-  /**
-   * Current model value.
-   */
-  modelValue: TimeRangeFieldRootProps['modelValue'];
-  /**
-   * Start segments exposed in the slot scope.
-   */
-  startSegments: {
-    part: TimeRangeFieldInputProps['part'];
-    value: string;
-  }[];
-  /**
-   * End segments exposed in the slot scope.
-   */
-  endSegments: {
-    part: TimeRangeFieldInputProps['part'];
-    value: string;
-  }[];
-  /**
-   * Whether the current value is invalid.
-   */
-  isInvalid: boolean;
-}
-/**
- * Props for the time range field component.
- */
-interface TimeRangeFieldProps extends /** @vue-ignore */TimeRangeFieldRootProps {
+interface TimeRangeFieldProps extends TimeRangeFieldCompactProps {
   /**
    * Additional class names applied to the root element.
    */
@@ -46,31 +19,14 @@ interface TimeRangeFieldProps extends /** @vue-ignore */TimeRangeFieldRootProps
    * Per-slot class overrides for the component.
    */
   ui?: Partial<TimeRangeFieldUi>;
-  /**
-   * Props forwarded to the input element.
-   */
-  inputProps?: Omit<TimeRangeFieldInputProps, 'part' | 'type'>;
-  /**
-   * Separator.
-   */
-  separator?: string;
 }
 /**
- * Emits for the time range field component.
+ * Events for the TimeRangeField component.
  */
-type TimeRangeFieldEmits = TimeRangeFieldRootEmits;
+type TimeRangeFieldEmits = TimeRangeFieldCompactEmits;
 /**
- * Slots for the time range field component.
+ * Slots for the TimeRangeField component.
  */
-interface TimeRangeFieldSlots {
-  /**
-   * Custom content for the default slot.
-   */
-  default?: (props: TimeRangeFieldSlotProps) => any;
-  /**
-   * Custom content for the separator slot.
-   */
-  separator?: () => any;
-}
+type TimeRangeFieldSlots = TimeRangeFieldCompactSlots;
 //#endregion
-export { TimeRangeFieldEmits, TimeRangeFieldProps, TimeRangeFieldSlotProps, TimeRangeFieldSlots };
+export { TimeRangeFieldEmits, TimeRangeFieldProps, TimeRangeFieldSlots };

package/dist/components/toast/styles.js

@@ -1,4 +1,4 @@
-var e=`[data-slot='toast'] {
+var e=`[data-soybean-toast] {
   --y: translateY(100%);
   --lift: 1;
   --lift-amount: calc(var(--lift) * var(--gap));
@@ -15,18 +15,18 @@ var e=`[data-slot='toast'] {
   box-shadow: 0 4px 12px hsl(var(--foreground) / 0.1);
 }
 
-[data-slot='toast']:focus-visible {
+[data-soybean-toast]:focus-visible {
   box-shadow:
     0 4px 12px hsl(var(--foreground) / 0.1),
     0 0 0 2px hsl(var(--foreground) / 0.2);
 }
 
-[data-slot='toast'][data-swiping='true'] {
+[data-soybean-toast][data-swiping='true'] {
   transform: var(--y) translateY(var(--swipe-amount-y, 0px)) translateX(var(--swipe-amount-x, 0px));
   transition: none;
 }
 
-[data-slot='toast'][data-swiping='true']::before {
+[data-soybean-toast][data-swiping='true']::before {
   content: '';
   position: absolute;
   inset-inline: -100%;
@@ -34,24 +34,24 @@ var e=`[data-slot='toast'] {
   z-index: -1;
 }
 
-[data-slot='toast'][data-y-position='top'][data-swiping='true']::before {
+[data-soybean-toast][data-y-position='top'][data-swiping='true']::before {
   bottom: 50%;
   transform: scaleY(3) translateY(50%);
 }
 
-[data-slot='toast'][data-y-position='bottom'][data-swiping='true']::before {
+[data-soybean-toast][data-y-position='bottom'][data-swiping='true']::before {
   top: 50%;
   transform: scaleY(3) translateY(-50%);
 }
 
-[data-slot='toast'][data-swiping='false'][data-removed='true']::before {
+[data-soybean-toast][data-swiping='false'][data-removed='true']::before {
   content: '';
   position: absolute;
   inset: 0;
   transform: scaleY(2);
 }
 
-[data-slot='toast'][data-expanded='true']::after {
+[data-soybean-toast][data-expanded='true']::after {
   content: '';
   position: absolute;
   inset-inline-start: 0;
@@ -60,42 +60,42 @@ var e=`[data-slot='toast'] {
   width: 100%;
 }
 
-[data-slot='toast'][data-mounted='true'] {
+[data-soybean-toast][data-mounted='true'] {
   --y: translateY(0);
   opacity: 1;
 }
 
-[data-slot='toast'][data-expanded='false'][data-front='false'] {
+[data-soybean-toast][data-expanded='false'][data-front='false'] {
   --scale: var(--toasts-before) * 0.05 + 1;
   --y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));
   height: var(--front-toast-height);
 }
 
-[data-slot='toast'][data-expanded='false'][data-front='false'] > * {
+[data-soybean-toast][data-expanded='false'][data-front='false'] > * {
   opacity: 0;
 }
 
-[data-slot='toast'][data-visible='false'] {
+[data-soybean-toast][data-visible='false'] {
   opacity: 0;
   pointer-events: none;
 }
 
-[data-slot='toast'][data-mounted='true'][data-expanded='true'] {
+[data-soybean-toast][data-mounted='true'][data-expanded='true'] {
   --y: translateY(calc(var(--lift) * var(--offset)));
   height: var(--initial-height);
 }
 
-[data-slot='toast'][data-removed='true'][data-front='true'][data-swipe-out='false'] {
+[data-soybean-toast][data-removed='true'][data-front='true'][data-swipe-out='false'] {
   --y: translateY(calc(var(--lift) * -100%));
   opacity: 0;
 }
 
-[data-slot='toast'][data-removed='true'][data-front='false'][data-swipe-out='false'][data-expanded='true'] {
+[data-soybean-toast][data-removed='true'][data-front='false'][data-swipe-out='false'][data-expanded='true'] {
   --y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));
   opacity: 0;
 }
 
-[data-slot='toast'][data-removed='true'][data-front='false'][data-swipe-out='false'][data-expanded='false'] {
+[data-soybean-toast][data-removed='true'][data-front='false'][data-swipe-out='false'][data-expanded='false'] {
   --y: translateY(40%);
   opacity: 0;
   transition:
@@ -103,65 +103,65 @@ var e=`[data-slot='toast'] {
     opacity 200ms;
 }
 
-[data-slot='toast'][data-removed='true'][data-front='false']::before {
+[data-soybean-toast][data-removed='true'][data-front='false']::before {
   height: calc(var(--initial-height) + 20%);
 }
 
-[data-slot='toast'][data-swiped='true'] {
+[data-soybean-toast][data-swiped='true'] {
   -webkit-user-select: none;
   user-select: none;
 }
 
-[data-slot='toast'][data-swipe-out='true'][data-y-position='bottom'],
-[data-slot='toast'][data-swipe-out='true'][data-y-position='top'] {
+[data-soybean-toast][data-swipe-out='true'][data-y-position='bottom'],
+[data-soybean-toast][data-swipe-out='true'][data-y-position='top'] {
   animation-duration: 200ms;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
 }
 
-[data-slot='toast'][data-swipe-out='true'][data-swipe-direction='left'] {
+[data-soybean-toast][data-swipe-out='true'][data-swipe-direction='left'] {
   animation-name: swipe-out-left;
 }
 
-[data-slot='toast'][data-swipe-out='true'][data-swipe-direction='right'] {
+[data-soybean-toast][data-swipe-out='true'][data-swipe-direction='right'] {
   animation-name: swipe-out-right;
 }
 
-[data-slot='toast'][data-swipe-out='true'][data-swipe-direction='up'] {
+[data-soybean-toast][data-swipe-out='true'][data-swipe-direction='up'] {
   animation-name: swipe-out-up;
 }
 
-[data-slot='toast'][data-swipe-out='true'][data-swipe-direction='down'] {
+[data-soybean-toast][data-swipe-out='true'][data-swipe-direction='down'] {
   animation-name: swipe-out-down;
 }
 
-[data-slot='toast'][data-rich-color='true'][data-type='success'] {
+[data-soybean-toast][data-rich-color='true'][data-type='success'] {
   background-color: hsl(var(--success-100));
   border-color: hsl(var(--success));
 }
 
-[data-slot='toast'][data-rich-color='true'][data-type='info'] {
+[data-soybean-toast][data-rich-color='true'][data-type='info'] {
   background-color: hsl(var(--info-100));
   border-color: hsl(var(--info));
 }
 
-[data-slot='toast'][data-rich-color='true'][data-type='warning'] {
+[data-soybean-toast][data-rich-color='true'][data-type='warning'] {
   background-color: hsl(var(--warning-100));
   border-color: hsl(var(--warning));
 }
 
-[data-slot='toast'][data-rich-color='true'][data-type='error'] {
+[data-soybean-toast][data-rich-color='true'][data-type='error'] {
   background-color: hsl(var(--destructive-100));
   border-color: hsl(var(--destructive));
 }
 
-[data-slot='toast'][data-inverted='true'] {
+[data-soybean-toast][data-inverted='true'] {
   background-color: hsl(var(--carbon));
   border-color: hsl(var(--carbon));
   color: hsl(var(--carbon-foreground));
 }
 
-[data-slot='toast'] > * {
+[data-soybean-toast] > * {
   transition: opacity 400ms;
 }
 
@@ -238,30 +238,30 @@ var e=`[data-slot='toast'] {
 }
 
 @media (max-width: 600px) {
-  [data-slot='toaster'] {
+  [data-soybean-toaster] {
     width: 100%;
     inset-inline-start: var(--mobile-offset-left);
     inset-inline-end: var(--mobile-offset-right);
   }
 
-  [data-slot='toaster'] [data-slot='toast'] {
+  [data-soybean-toaster][data-soybean-toast] {
     inset-inline: 0;
     width: calc(100% - var(--mobile-offset-left) * 2);
   }
 
-  [data-slot='toaster'][data-x-position='left'] {
+  [data-soybean-toaster][data-x-position='left'] {
     inset-inline-start: var(--mobile-offset-left);
   }
 
-  [data-slot='toaster'][data-y-position='bottom'] {
+  [data-soybean-toaster][data-y-position='bottom'] {
     bottom: var(--mobile-offset-bottom);
   }
 
-  [data-slot='toaster'][data-y-position='top'] {
+  [data-soybean-toaster][data-y-position='top'] {
     top: var(--mobile-offset-top);
   }
 
-  [data-slot='toaster'][data-x-position='center'] {
+  [data-soybean-toaster][data-x-position='center'] {
     inset-inline-start: var(--mobile-offset-left);
     inset-inline-end: var(--mobile-offset-right);
     transform: none;

package/dist/components/toast/toast-provider.js

@@ -1 +1 @@
-import{mergeBaseVariants as e,mergeSlotVariants as t}from"../../theme/shared.js";import{miniSizeMap as n}from"../../theme/config.js";import"../../theme/index.js";import{buttonVariants as r}from"../button/variants.js";import{toastVariants as i}from"./variants.js";import a from"./styles.js";import{computed as o,createBlock as s,defineComponent as c,guardReactiveProps as l,normalizeProps as u,openBlock as d,renderSlot as f,unref as p,withCtx as m}from"vue";import{useOmitProps as h}from"@soybeanjs/headless/composables";import{useStyleTag as g}from"@vueuse/core";import{ToastProvider as _,provideToastUi as v}from"@soybeanjs/headless/toast";const y=c({name:`SToastProvider`,__name:`toast-provider`,props:{size:{},ui:{},id:{},dir:{},hotkey:{},customAriaLabel:{},containerAriaLabel:{},position:{},defaultExpanded:{type:Boolean},duration:{},gap:{},offset:{},visibleCounts:{},swipeDirections:{},showIcon:{type:Boolean,default:!0},showClose:{type:Boolean,default:!0},icons:{},toastProps:{},wrapperProps:{},contentProps:{},titleProps:{},descriptionProps:{},iconProps:{},footerProps:{},actionProps:{},cancelProps:{},closeProps:{}},setup(c){let y=c,b=h(y,[`size`,`ui`]),x=o(()=>{let a=y.size??`md`;return t(e(i({size:y.size}),{action:r({variant:`solid`,size:n[a]}),cancel:r({variant:`pure`,size:n[a]}),close:r({variant:`ghost`,color:`accent`,size:n[a],shape:`square`,fitContent:!0})}),y.ui)});return g(a,{id:`__SoybeanUI_toastStyle`}),v(x),(e,t)=>(d(),s(p(_),u(l(p(b))),{default:m(()=>[f(e.$slots,`default`)]),_:3},16))}});export{y as default};
+import{mergeVariants as e}from"../../theme/shared.js";import{miniSizeMap as t}from"../../theme/config.js";import"../../theme/index.js";import{buttonIconVariants as n,buttonVariants as r}from"../button/variants.js";import{toastVariants as i}from"./variants.js";import a from"./styles.js";import{computed as o,createBlock as s,defineComponent as c,guardReactiveProps as l,normalizeProps as u,openBlock as d,renderSlot as f,unref as p,withCtx as m}from"vue";import{useOmitProps as h}from"@soybeanjs/headless/composables";import{useStyleTag as g}from"@vueuse/core";import{ToastProvider as _,provideToastUi as v}from"@soybeanjs/headless/toast";const y=c({name:`SToastProvider`,__name:`toast-provider`,props:{size:{},ui:{},id:{},dir:{},hotkey:{},customAriaLabel:{},containerAriaLabel:{},position:{},defaultExpanded:{type:Boolean},duration:{},gap:{},offset:{},visibleCounts:{},swipeDirections:{},showIcon:{type:Boolean,default:!0},showClose:{type:Boolean,default:!0},icons:{},toastProps:{},wrapperProps:{},contentProps:{},titleProps:{},descriptionProps:{},iconProps:{},footerProps:{},actionProps:{},cancelProps:{},closeProps:{}},setup(c){let y=c,b=h(y,[`size`,`ui`]),x=o(()=>{let a=t[y.size??`md`];return e(Object.assign(i({size:y.size}),{$base:{action:r({variant:`solid`,size:a}),cancel:r({variant:`pure`,size:a}),close:n({size:a})}}),y.ui)});return g(a,{id:`__SoybeanUI_toastStyle`}),v(x),(e,t)=>(d(),s(p(_),u(l(p(b))),{default:m(()=>[f(e.$slots,`default`)]),_:3},16))}});export{y as default};

package/dist/components/toast/types.d.ts

@@ -3,7 +3,7 @@ import { ToastProviderProps, ToastUi } from "@soybeanjs/headless/toast";
 
 //#region src/components/toast/types.d.ts
 /**
- * Props for the toast provider component.
+ * Properties for the ToastProvider component.
  */
 interface ToastProviderProps$1 extends ToastProviderProps {
   /**

package/dist/components/toggle/toggle.js

@@ -1 +1 @@
-import{cn as e}from"../../theme/merge.js";import"../../theme/index.js";import{toggleVariants as t}from"./variants.js";import{computed as n,createBlock as r,defineComponent as i,guardReactiveProps as a,mergeProps as o,normalizeProps as s,openBlock as c,renderSlot as l,unref as u,withCtx as d}from"vue";import{useOmitProps as f}from"@soybeanjs/headless/composables";import{Toggle as p}from"@soybeanjs/headless/toggle";const m=i({name:`SToggle`,__name:`toggle`,props:{class:{},color:{},size:{},variant:{},shape:{},defaultValue:{type:Boolean},modelValue:{type:Boolean,default:void 0},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`update:modelValue`],setup(i,{emit:m}){let h=i,g=m,_=f(h,[`class`,`color`,`variant`,`size`,`shape`]),v=n(()=>e(t({color:h.color,variant:h.variant,size:h.size,shape:h.shape}),h.class));return(e,t)=>(c(),r(u(p),o(u(_),{class:v.value,"onUpdate:modelValue":t[0]||=e=>g(`update:modelValue`,e)}),{default:d(t=>[l(e.$slots,`default`,s(a(t)))]),_:3},16,[`class`]))}});export{m as default};
+import{cn as e}from"../../theme/merge.js";import"../../theme/index.js";import{toggleVariants as t}from"./variants.js";import{computed as n,createBlock as r,defineComponent as i,guardReactiveProps as a,mergeProps as o,normalizeProps as s,openBlock as c,renderSlot as l,unref as u,withCtx as d}from"vue";import{useOmitProps as f}from"@soybeanjs/headless/composables";import{Toggle as p}from"@soybeanjs/headless/toggle";const m=i({name:`SToggle`,__name:`toggle`,props:{class:{type:[Boolean,null,String,Object,Array]},color:{},size:{},variant:{},shape:{},defaultValue:{type:Boolean},modelValue:{type:Boolean,default:void 0},type:{},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`update:modelValue`],setup(i,{emit:m}){let h=i,g=m,_=f(h,[`class`,`color`,`variant`,`size`,`shape`]),v=n(()=>e(t({color:h.color,variant:h.variant,size:h.size,shape:h.shape}),h.class));return(e,t)=>(c(),r(u(p),o(u(_),{class:v.value,"onUpdate:modelValue":t[0]||=e=>g(`update:modelValue`,e)}),{default:d(t=>[l(e.$slots,`default`,s(a(t)))]),_:3},16,[`class`]))}});export{m as default};

package/dist/components/toggle/types.d.ts

@@ -5,7 +5,7 @@ import { ClassValue } from "@soybeanjs/headless/types";
 
 //#region src/components/toggle/types.d.ts
 /**
- * Props for the toggle component.
+ * Properties for the Toggle component.
  */
 interface ToggleProps$1 extends ToggleProps {
   /**

package/dist/components/toggle-group/index.d.ts

@@ -1,5 +1,6 @@
 import { ToggleGroupVariant } from "./variants.js";
 import { ToggleGroupEmits, ToggleGroupProps } from "./types.js";
 import { _default } from "./toggle-group.vue.js";
-import { _default as _default$1 } from "./toggle-group-item.vue.js";
-export * from "@soybeanjs/headless/toggle-group";
+import { ToggleGroupItem as SToggleGroupItem } from "@soybeanjs/headless/toggle-group";
+export * from "@soybeanjs/headless/toggle-group";
+export { SToggleGroupItem };