rocksolidjs 0.1.2 → 0.1.3

package/dist/AccordionContext/AccordionContext.js

@@ -1 +1 @@
-import{createContext as e,useContext as t}from"solid-js";var n=e(),r=()=>{let e=t(n);if(!e)throw Error(`Use AccordionSummary and AccordionDetails inside Accordion component.`);return e};export{n as AccordionContext,r as useAccordionContext};
+import{createContext as e,useContext as t}from"solid-js";var n=e(),r=()=>{let e=t(n);if(!e)throw Error(`AccordionSummary and AccordionDetails must be used inside an Accordion component.`);return e};export{n as AccordionContext,r as useAccordionContext};

package/dist/AccordionDetails/AccordionDetails.d.ts

@@ -3,6 +3,7 @@ export type AccordionDetailsProps = {
     children?: JSXElement;
     class?: string;
     onTransitionEnd?: (event: TransitionEvent) => void;
-} & ComponentProps<"div">;
+    ref?: (element: HTMLDivElement) => void;
+} & Omit<ComponentProps<"div">, "ref">;
 declare const AccordionDetails: (props: AccordionDetailsProps) => import("solid-js").JSX.Element;
 export default AccordionDetails;

package/dist/AccordionDetails/AccordionDetails.js

@@ -1 +1 @@
-import e from"../utils/cn.js";import t from"./style.js";import{useThemeContext as n}from"../ThemeProvider/ThemeContext.js";import"../ThemeProvider/index.js";import{useAccordionContext as r}from"../AccordionContext/AccordionContext.js";import"../AccordionContext/index.js";import{className as i,effect as a,insert as o,mergeProps as s,spread as c,template as l,use as u}from"solid-js/web";import{createMemo as d,createRenderEffect as f,onMount as p,splitProps as m}from"solid-js";var h=l(`<div><div>`),g=l=>{let[g,_]=m(l,[`class`,`children`,`onTransitionEnd`]),v=n(),y=r(),b=!1,x,S=()=>y.isExpanded(),C=()=>{if(y.disableTransition()){let e=S()?`auto`:`0px`;x&&(x.style.height=e);return}let e=S()?x?.scrollHeight??0:0;x&&(!S()&&b&&(x.style.height=`${x?.scrollHeight??0}px`),x.offsetHeight,b=!1,x.style.height=`${e}px`)},w=d(()=>{let e={disableTransition:y.disableTransition()};return v?v.componentsTV.accordionDetails(e):t(e)});p(()=>{C()}),f(()=>{C()});let T=e=>{e.propertyName===`height`&&S()&&(b=!0,x.style.height=`auto`),g.onTransitionEnd?.(e)},E=d(()=>{let e=y.accordionId();if(e)return{"aria-labelledby":`accordion-${e}-summary`,id:`accordion-${e}-details`,role:`region`}});return(()=>{var t=h(),n=t.firstChild,r=x;return typeof r==`function`?u(r,t):x=t,c(t,s(E,_,{get class(){return e(w().base(),g.class)},onTransitionEnd:T}),!1,!0),o(n,()=>g.children),a(()=>i(n,w().content())),t})()};export{g as default};
+import e from"../utils/cn.js";import t from"./style.js";import{useThemeContext as n}from"../ThemeProvider/ThemeContext.js";import"../ThemeProvider/index.js";import{useAccordionContext as r}from"../AccordionContext/AccordionContext.js";import"../AccordionContext/index.js";import{className as i,effect as a,insert as o,mergeProps as s,spread as c,template as l,use as u}from"solid-js/web";import{createMemo as d,createRenderEffect as f,onMount as p,splitProps as m}from"solid-js";var h=l(`<div><div>`),g=l=>{let[g,_]=m(l,[`class`,`children`,`onTransitionEnd`,`ref`]),v=!0,y=n(),b=r(),x,S=()=>b.isExpanded(),C=S(),w=C,T=()=>{if(b.disableTransition()||v){let e=S()?`auto`:`0px`;x&&(x.style.height=e);return}let e=S()?x?.scrollHeight??0:0;x&&(!S()&&w&&(x.style.height=`${x?.scrollHeight??0}px`),x.offsetHeight,w=!1,x.style.height=`${e}px`)},E=d(()=>{let e={expanded:C,disableTransition:b.disableTransition()};return y?y.componentsTV.accordionDetails(e):t(e)});p(()=>{T(),v=!1}),f(()=>{T()});let D=e=>{e.target===x&&e.propertyName===`height`&&S()&&(w=!0,x.style.height=`auto`),g.onTransitionEnd?.(e)},O=d(()=>{let e=b.accordionId();if(e)return{"aria-labelledby":`accordion-${e}-summary`,id:`accordion-${e}-details`,role:`region`}});return(()=>{var t=h(),n=t.firstChild;return u(e=>{x=e,g.ref?.(e)},t),c(t,s(O,_,{get class(){return e(E().base(),g.class)},onTransitionEnd:D}),!1,!0),o(n,()=>g.children),a(()=>i(n,E().content())),t})()};export{g as default};

package/dist/AccordionDetails/style.d.ts

@@ -6,6 +6,14 @@ export declare const accordionDetails: (theme?: Theme) => import('tailwind-varia
             base: string;
         };
     };
+    expanded: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
 }, {
     base: string[];
     content: string[];
@@ -16,6 +24,14 @@ export declare const accordionDetails: (theme?: Theme) => import('tailwind-varia
             base: string;
         };
     };
+    expanded: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
 }, {
     base: string[];
     content: string[];
@@ -26,6 +42,14 @@ export declare const accordionDetails: (theme?: Theme) => import('tailwind-varia
             base: string;
         };
     };
+    expanded: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
 }, {
     base: string[];
     content: string[];
@@ -37,6 +61,14 @@ declare const _default: import('tailwind-variants').TVReturnType<{
             base: string;
         };
     };
+    expanded: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
 }, {
     base: string[];
     content: string[];
@@ -47,6 +79,14 @@ declare const _default: import('tailwind-variants').TVReturnType<{
             base: string;
         };
     };
+    expanded: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
 }, {
     base: string[];
     content: string[];
@@ -57,6 +97,14 @@ declare const _default: import('tailwind-variants').TVReturnType<{
             base: string;
         };
     };
+    expanded: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
 }, {
     base: string[];
     content: string[];

package/dist/AccordionDetails/style.js

@@ -1 +1 @@
-import e from"../styles/theme/index.js";import{tv as t}from"tailwind-variants";var n=(n=e)=>t({slots:{base:[`overflow-hidden`,n.typography.colors.textPrimary],content:[`pt-2 pb-3 px-4`,n.typography.variants.body2]},variants:{disableTransition:{true:{},false:{base:`transition-height duration-300`}}}}),r=n();export{n as accordionDetails,r as default};
+import e from"../styles/theme/index.js";import{tv as t}from"tailwind-variants";var n=(n=e)=>t({slots:{base:[`overflow-hidden`,n.typography.colors.textPrimary],content:[`pt-2 pb-3 px-4`,n.typography.variants.body2]},variants:{disableTransition:{true:{},false:{base:`transition-[height] duration-300`}},expanded:{true:{base:`h-auto`},false:{base:`h-0`}}}}),r=n();export{n as accordionDetails,r as default};

package/dist/AccordionSummary/AccordionSummary.d.ts

@@ -1,9 +1,11 @@
 import { ComponentProps, JSXElement } from 'solid-js';
+import { Prettify } from '../types/Prettify';
+import { WithExtendedComponentProps } from '../types/ExtendedComponentProps';
 import { ButtonProps } from '../Button';
-type AccordionSummarySlotProps = {
-    button?: ButtonProps;
-    icon?: NonNullable<ButtonProps["slotProps"]>["endIcon"];
-};
+type AccordionSummarySlotProps = Prettify<{
+    button?: Prettify<ButtonProps<"button"> & WithExtendedComponentProps>;
+    icon?: NonNullable<ButtonProps<"button">["slotProps"]>["endIcon"];
+}>;
 export type AccordionSummaryProps = {
     children?: JSXElement;
     class?: string;

package/dist/AccordionSummary/AccordionSummary.js

@@ -1 +1 @@
-import e from"../utils/cn.js";import t from"./style.js";import{useThemeContext as n}from"../ThemeProvider/ThemeContext.js";import"../ThemeProvider/index.js";import{useAccordionContext as r}from"../AccordionContext/AccordionContext.js";import"../AccordionContext/index.js";import i from"../Button/Button.js";import"../Button/index.js";import a from"../icons/AngleUp.js";import o from"../icons/AngleDown.js";import{createComponent as s,insert as c,mergeProps as l,spread as u,template as d}from"solid-js/web";import{createMemo as f,mergeProps as p,splitProps as m}from"solid-js";var h=d(`<div>`),g=d=>{let g=p({collapsedIcon:s(a,{class:`text-lg`}),expandedIcon:s(o,{class:`text-lg`})},d),[_,v]=m(g,[`class`,`children`,`collapsedIcon`,`expandedIcon`,`slotProps`]),y=n(),b=r(),x=f(()=>b.isExpanded()?_.expandedIcon:_.collapsedIcon),S=f(()=>y?y.componentsTV.accordionSummary():t()),C=f(()=>{let e=b.accordionId(),t={"aria-expanded":b.isExpanded()};return e?{...t,"aria-controls":`accordion-${e}-details`,id:`accordion-${e}-summary`}:t});return(()=>{var t=h();return u(t,v,!1,!0),c(t,s(i,l(C,()=>_.slotProps?.button,{get onClick(){return b.onToggleExpand},get endIcon(){return x()},get disabled(){return b.isDisabled()},variant:`ghost`,get class(){return e([S(),_.slotProps?.button?.class])},get slotProps(){return{startIcon:_.slotProps?.button?.slotProps?.startIcon,endIcon:_.slotProps?.icon}},fullWidth:!0,get children(){return _.children}}))),t})()};export{g as default};
+import e from"../utils/cn.js";import t from"./style.js";import{useThemeContext as n}from"../ThemeProvider/ThemeContext.js";import"../ThemeProvider/index.js";import{useAccordionContext as r}from"../AccordionContext/AccordionContext.js";import"../AccordionContext/index.js";import"../types/Prettify.js";import"../types/ExtendedComponentProps.js";import i from"../Button/Button.js";import"../Button/index.js";import a from"../icons/AngleUp.js";import o from"../icons/AngleDown.js";import{createComponent as s,insert as c,mergeProps as l,spread as u,template as d}from"solid-js/web";import{createMemo as f,mergeProps as p,splitProps as m}from"solid-js";var h=d(`<div>`),g=d=>{let g=p({collapsedIcon:s(a,{get class(){return e(`text-lg`)}}),expandedIcon:s(o,{get class(){return e(`text-lg`)}})},d),[_,v]=m(g,[`children`,`collapsedIcon`,`expandedIcon`,`slotProps`]),y=n(),b=r(),x=f(()=>b.isExpanded()?_.expandedIcon:_.collapsedIcon),S=f(()=>y?y.componentsTV.accordionSummary():t()),C=f(()=>{let e=b.accordionId(),t={"aria-expanded":b.isExpanded()};return e?{...t,"aria-controls":`accordion-${e}-details`,id:`accordion-${e}-summary`}:t});return(()=>{var t=h();return u(t,v,!1,!0),c(t,s(i,l(C,()=>_.slotProps?.button,{get onClick(){return b.onToggleExpand},get endIcon(){return x()},get disabled(){return b.isDisabled()},variant:`ghost`,get class(){return e([S(),_.slotProps?.button?.class])},get slotProps(){return{startIcon:_.slotProps?.button?.slotProps?.startIcon,endIcon:_.slotProps?.icon}},fullWidth:!0,get children(){return _.children}}))),t})()};export{g as default};

package/dist/Alert/Alert.d.ts

@@ -1,16 +1,18 @@
 import { ComponentProps, JSXElement, ValidComponent } from 'solid-js';
+import { Prettify } from '../types/Prettify';
+import { WithExtendedComponentProps } from '../types/ExtendedComponentProps';
 import { VariantProps } from 'tailwind-variants';
 import { TypographyProps } from '../Typography';
 import { IconButtonProps } from '../IconButton';
 import { ThemeColors } from '../styles/theme/colors';
 import { default as alertDefaultStyles } from './style';
 type AlertVariants = VariantProps<typeof alertDefaultStyles>;
-type AlertSlotProps = {
-    icon?: TypographyProps;
-    content?: TypographyProps;
-    action?: ComponentProps<"div">;
-    closeButton?: IconButtonProps;
-};
+type AlertSlotProps = Prettify<{
+    icon?: Prettify<TypographyProps & WithExtendedComponentProps>;
+    content?: Prettify<TypographyProps & WithExtendedComponentProps>;
+    action?: Prettify<ComponentProps<"div"> & WithExtendedComponentProps>;
+    closeButton?: Prettify<Omit<IconButtonProps, "as"> & WithExtendedComponentProps>;
+}>;
 export type AlertProps<T extends ValidComponent = "div"> = {
     action?: JSXElement;
     as?: T;

package/dist/Alert/Alert.js

@@ -1 +1 @@
-import e from"../utils/cn.js";import t from"./style.js";import{useThemeContext as n}from"../ThemeProvider/ThemeContext.js";import"../ThemeProvider/index.js";import r from"../Typography/Typography.js";import"../Typography/index.js";import i from"../IconButton/IconButton.js";import"../IconButton/index.js";import a from"../icons/Alert.js";import o from"../icons/Error.js";import s from"../icons/Checkmark.js";import c from"../icons/Info.js";import l from"../icons/Warning.js";import u from"../icons/Cross.js";import{Dynamic as d,createComponent as f,insert as p,memo as m,mergeProps as h,spread as g,template as _}from"solid-js/web";import{createMemo as v,mergeProps as y,splitProps as b}from"solid-js";import"tailwind-variants";var x=_(`<div>`),S=_=>{let S=y({color:`default`,variant:`filled`},_),[C,w]=b(S,[`as`,`action`,`children`,`class`,`color`,`icon`,`onClose`,`slotProps`,`variant`]),T=n(),E=v(()=>{if(C.icon)return C.icon;switch(C.color){case`success`:return f(s,{});case`info`:return f(c,{});case`warning`:return f(l,{});case`error`:return f(o,{});default:return f(a,{})}}),D=v(()=>{let e={color:C.color,variant:C.variant};return T?T.componentsTV.alert(e):t(e)});return f(d,h({role:`alert`},w,{get component(){return C.as??`div`},get class(){return e(D().base(),C.class)},get children(){return[m(()=>m(()=>!!E())()?f(r,h({as:`span`},()=>C.slotProps?.icon,{get class(){return e(D().icon(),C.slotProps?.icon?.class)},get children(){return E()}})):null),f(r,h({as:`div`,variant:`inherit`},()=>C.slotProps?.content,{get class(){return e(D().content(),C.slotProps?.content?.class)},get children(){return C.children}})),m(()=>m(()=>!!C.action)()?(()=>{var e=x();return g(e,h(()=>C.slotProps?.action),!1,!0),p(e,()=>C.action),e})():null),m(()=>m(()=>typeof C.onClose==`function`)()?f(i,h({"aria-label":`Close`,get color(){return C.color},variant:`text`,size:`small`},()=>C.slotProps?.closeButton,{get onClick(){return C.onClose},get children(){return f(u,{})}})):null)]}}))};export{S as default};
+import e from"../utils/cn.js";import t from"./style.js";import{useThemeContext as n}from"../ThemeProvider/ThemeContext.js";import"../ThemeProvider/index.js";import"../types/Prettify.js";import"../types/ExtendedComponentProps.js";import r from"../Typography/Typography.js";import"../Typography/index.js";import i from"../IconButton/IconButton.js";import"../IconButton/index.js";import a from"../icons/Alert.js";import o from"../icons/Error.js";import s from"../icons/Checkmark.js";import c from"../icons/Info.js";import l from"../icons/Warning.js";import u from"../icons/Cross.js";import{Dynamic as d,createComponent as f,insert as p,memo as m,mergeProps as h,spread as g,template as _}from"solid-js/web";import{createMemo as v,mergeProps as y,splitProps as b}from"solid-js";import"tailwind-variants";var x=_(`<div>`),S=_=>{let S=y({color:`default`,variant:`filled`},_),[C,w]=b(S,[`as`,`action`,`children`,`class`,`color`,`icon`,`onClose`,`slotProps`,`variant`]),T=n(),E=v(()=>{if(C.icon!==null){if(C.icon)return C.icon;switch(C.color){case`success`:return f(s,{});case`info`:return f(c,{});case`warning`:return f(l,{});case`error`:return f(o,{});default:return f(a,{})}}}),D=v(()=>{let e={color:C.color,variant:C.variant};return T?T.componentsTV.alert(e):t(e)}),O=v(()=>C.slotProps);return f(d,h({role:`alert`},w,{get component(){return C.as??`div`},get class(){return e(D().base(),C.class)},get children(){return[m(()=>m(()=>!!E())()?f(r,h({as:`span`},()=>O()?.icon,{get class(){return e(D().icon(),O()?.icon?.class)},get children(){return E()}})):null),f(r,h({as:`div`,variant:`inherit`},()=>O()?.content,{get class(){return e(D().content(),O()?.content?.class)},get children(){return C.children}})),m(()=>m(()=>!!C.action)()?(()=>{var e=x();return g(e,h(()=>O()?.action),!1,!0),p(e,()=>C.action),e})():null),m(()=>m(()=>typeof C.onClose==`function`)()?f(i,h({"aria-label":`Close`,get color(){return C.color},size:`small`},()=>O()?.closeButton,{get onClick(){return C.onClose},get class(){return e(D().closeButton(),O()?.closeButton?.class)},get children(){return f(u,{})}})):null)]}}))};export{S as default};

package/dist/Alert/style.d.ts

@@ -12,6 +12,7 @@ export declare const alert: (theme?: Theme) => import('tailwind-variants').TVRet
     base: string[];
     content: string;
     icon: string;
+    closeButton: string[];
 }, undefined, {
     color: Record<"default" | "success" | "warning" | "info" | "error", {}>;
     variant: {
@@ -25,6 +26,7 @@ export declare const alert: (theme?: Theme) => import('tailwind-variants').TVRet
     base: string[];
     content: string;
     icon: string;
+    closeButton: string[];
 }, import('tailwind-variants').TVReturnTypeLike<{
     color: Record<"default" | "success" | "warning" | "info" | "error", {}>;
     variant: {
@@ -38,6 +40,7 @@ export declare const alert: (theme?: Theme) => import('tailwind-variants').TVRet
     base: string[];
     content: string;
     icon: string;
+    closeButton: string[];
 }>>;
 declare const _default: import('tailwind-variants').TVReturnType<{
     color: Record<"default" | "success" | "warning" | "info" | "error", {}>;
@@ -52,6 +55,7 @@ declare const _default: import('tailwind-variants').TVReturnType<{
     base: string[];
     content: string;
     icon: string;
+    closeButton: string[];
 }, undefined, {
     color: Record<"default" | "success" | "warning" | "info" | "error", {}>;
     variant: {
@@ -65,6 +69,7 @@ declare const _default: import('tailwind-variants').TVReturnType<{
     base: string[];
     content: string;
     icon: string;
+    closeButton: string[];
 }, import('tailwind-variants').TVReturnTypeLike<{
     color: Record<"default" | "success" | "warning" | "info" | "error", {}>;
     variant: {
@@ -78,5 +83,6 @@ declare const _default: import('tailwind-variants').TVReturnType<{
     base: string[];
     content: string;
     icon: string;
+    closeButton: string[];
 }>>;
 export default _default;

package/dist/Alert/style.js

@@ -1 +1 @@
-import e from"../styles/theme/index.js";import t from"../utils/asVariant.js";import n from"../utils/typedKeys.js";import{tv as r}from"tailwind-variants";var i=[`solid`,`filled`,`outlined`],a=(a=e)=>r({slots:{base:[`flex items-center gap-2 w-full py-2 px-3 min-w-0 min-h-10`,a.rounded.small,a.typography.variants.body2],content:`grow-1 min-w-0`,icon:`text-lg shrink-0`},variants:{color:t(a.colors,()=>({})),variant:{solid:{},filled:{},outlined:{base:`border border-1`}}},compoundVariants:[...n(a.colors).flatMap(e=>i.map(t=>{let n=a.colors[e][t];return{color:e,variant:t,class:{base:[n.background,n.text,n.border]}}}))]}),o=a();export{a as alert,o as default};
+import e from"../styles/theme/index.js";import t from"../utils/asVariant.js";import n from"../utils/typedKeys.js";import{tv as r}from"tailwind-variants";var i=[`solid`,`filled`,`outlined`],a=(a=e)=>r({slots:{base:[`flex items-center gap-2 w-full py-2 px-3 min-w-0 min-h-10`,a.rounded.small,a.typography.variants.body2],content:`grow-1 min-w-0`,icon:`text-lg shrink-0`,closeButton:[`hover:bg-black/15 hover:dark:bg-white/15`,`active:bg-black/25 active:dark:bg-white/25`,`text-[inherit] dark:text-[inherit]`]},variants:{color:t(a.colors,()=>({})),variant:{solid:{},filled:{},outlined:{base:`border border-1`}}},compoundVariants:[...n(a.colors).flatMap(e=>i.map(t=>{let n=a.colors[e][t];return{color:e,variant:t,class:{base:[n.background,n.text,n.border]}}}))]}),o=a();export{a as alert,o as default};

package/dist/Avatar/Avatar.d.ts

@@ -1,11 +1,13 @@
 import { ComponentProps, ValidComponent } from 'solid-js';
+import { Prettify } from '../types/Prettify';
+import { WithExtendedComponentProps } from '../types/ExtendedComponentProps';
 import { VariantProps } from 'tailwind-variants';
 import { ThemeColors } from '../styles/theme/colors';
 import { default as avatarDefaultStyles } from './style';
 type AvatarVariants = VariantProps<typeof avatarDefaultStyles>;
-type AvatarSlotProps = {
-    img?: ComponentProps<"img">;
-};
+type AvatarSlotProps = Prettify<{
+    img?: Prettify<ComponentProps<"img"> & WithExtendedComponentProps>;
+}>;
 export type AvatarProps<T extends ValidComponent = "div"> = {
     alt?: string;
     as?: T;

package/dist/Avatar/Avatar.js

@@ -1 +1 @@
-import e from"../utils/cn.js";import t from"./style.js";import{useThemeContext as n}from"../ThemeProvider/ThemeContext.js";import"../ThemeProvider/index.js";import{Dynamic as r,createComponent as i,memo as a,mergeProps as o,spread as s,template as c}from"solid-js/web";import{createMemo as l,createSignal as u,mergeProps as d,splitProps as f}from"solid-js";import"tailwind-variants";var p=c(`<img>`),m=e=>e.trim().split(/\s+/).filter(Boolean).map(e=>e[0]).slice(0,2).join(``).toUpperCase(),h=c=>{let h=d({color:`default`,rounded:`full`,size:`medium`},c),[g,_]=f(h,[`as`,`alt`,`class`,`color`,`children`,`rounded`,`size`,`slotProps`,`src`]),v=n(),[y,b]=u(g.src&&typeof g.src==`string`),x=()=>m(g.alt||``)||g.children,S=e=>{b(!1),g.slotProps?.img?.onError(e)},C=l(()=>{let e={rounded:g.rounded,color:g.color,size:g.size};return v?v.componentsTV.avatar(e):t(e)});return i(r,o(_,{get component(){return g.as??`div`},get class(){return e(C().base(),g.class)},get children(){return a(()=>!!y())()?(()=>{var t=p();return s(t,o(()=>g.slotProps?.img,{get src(){return g.src},get alt(){return g.alt},onError:S,get class(){return e(C().img(),g.slotProps?.img?.class)}}),!1,!1),t})():x()}}))};export{h as default};
+import e from"../utils/cn.js";import t from"./style.js";import{useThemeContext as n}from"../ThemeProvider/ThemeContext.js";import"../ThemeProvider/index.js";import"../types/Prettify.js";import"../types/ExtendedComponentProps.js";import{Dynamic as r,createComponent as i,memo as a,mergeProps as o,spread as s,template as c}from"solid-js/web";import{createMemo as l,createSignal as u,mergeProps as d,splitProps as f}from"solid-js";import"tailwind-variants";var p=c(`<img>`),m=e=>e.trim().split(/\s+/).filter(Boolean).map(e=>e[0]).slice(0,2).join(``).toUpperCase(),h=c=>{let h=d({color:`default`,rounded:`full`,size:`medium`},c),[g,_]=f(h,[`as`,`alt`,`class`,`color`,`children`,`rounded`,`size`,`slotProps`,`src`]),v=n(),[y,b]=u(g.src&&typeof g.src==`string`),x=l(()=>m(g.alt||g.children||``)),S=e=>{b(!1),g.slotProps?.img?.onError(e)},C=l(()=>{let e={rounded:g.rounded,color:g.color,size:g.size};return v?v.componentsTV.avatar(e):t(e)});return i(r,o(_,{get component(){return g.as??`div`},get class(){return e(C().base(),g.class)},get children(){return a(()=>!!y())()?(()=>{var t=p();return s(t,o(()=>g.slotProps?.img,{get src(){return g.src},get alt(){return x()},onError:S,get class(){return e(C().img(),g.slotProps?.img?.class)}}),!1,!1),t})():x()}}))};export{h as default};

package/dist/Avatar/style.js

@@ -1 +1 @@
-import e from"../styles/theme/index.js";import t from"../utils/asVariant.js";import{tv as n}from"tailwind-variants";var r=(r=e)=>n({slots:{base:[`size-8 grid place-items-center shrink-0`,r.typography.variants.body2],img:`w-full h-full rounded-[inherit]`},variants:{color:t(r.colors,e=>({base:[e.solid.background,e.solid.text]})),rounded:t(r.rounded,e=>({base:e})),size:{small:{base:`size-6 text-sm`},medium:{base:`size-8 text-sm`},large:{base:`size-10 text-md`}}}}),i=r();export{r as avatar,i as default};
+import e from"../styles/theme/index.js";import t from"../utils/asVariant.js";import{tv as n}from"tailwind-variants";var r=(r=e)=>n({slots:{base:[`size-8 grid place-items-center shrink-0 select-none`,r.typography.variants.body2],img:`w-full h-full rounded-[inherit]`},variants:{color:t(r.colors,e=>({base:[e.solid.background,e.solid.text]})),rounded:t(r.rounded,e=>({base:e})),size:{small:{base:`size-6 text-sm`},medium:{base:`size-8 text-sm`},large:{base:`size-10 text-md`}}}}),i=r();export{r as avatar,i as default};

package/dist/Badge/Badge.d.ts

@@ -1,11 +1,13 @@
-import { ComponentProps, JSXElement, ParentProps } from 'solid-js';
+import { ComponentProps, JSXElement } from 'solid-js';
+import { Prettify } from '../types/Prettify';
+import { WithExtendedComponentProps } from '../types/ExtendedComponentProps';
 import { VariantProps } from 'tailwind-variants';
 import { ThemeColors } from '../styles/theme/colors';
 import { default as badgeDefaultStyles } from './style';
 type BadgeVariants = VariantProps<typeof badgeDefaultStyles>;
-type BadgeSlotProps = {
-    badge?: ComponentProps<"span">;
-};
+type BadgeSlotProps = Prettify<{
+    badge?: Prettify<ComponentProps<"span"> & WithExtendedComponentProps>;
+}>;
 export type BadgeProps = {
     badgeContent?: JSXElement;
     class?: string;
@@ -17,5 +19,5 @@ export type BadgeProps = {
     };
     slotProps?: BadgeSlotProps;
 } & ComponentProps<"span">;
-declare const Badge: (props: ParentProps<BadgeProps>) => import("solid-js").JSX.Element;
+declare const Badge: (props: BadgeProps) => import("solid-js").JSX.Element;
 export default Badge;

package/dist/Badge/Badge.js

@@ -1 +1 @@
-import e from"../utils/cn.js";import t from"./style.js";import{useThemeContext as n}from"../ThemeProvider/ThemeContext.js";import"../ThemeProvider/index.js";import{insert as r,mergeProps as i,spread as a,template as o}from"solid-js/web";import{createMemo as s,mergeProps as c,splitProps as l}from"solid-js";import"tailwind-variants";var u=o(`<span><span>`),d=o=>{let d=c({color:`default`,overlap:`circle`},o),[f,p]=l(d,[`badgeContent`,`children`,`class`,`color`,`position`,`overlap`,`slotProps`]),m=n(),h=s(()=>f.badgeContent===void 0),g=s(()=>{let e={color:f.color,overlap:f.overlap,xPos:f.position?.x??`right`,yPos:f.position?.y??`top`,empty:h()};return m?m.componentsTV.badge(e):t(e)});return(()=>{var t=u(),n=t.firstChild;return a(t,i(p,{get class(){return e(g().base(),f.class)}}),!1,!0),r(t,()=>f.children,n),a(n,i({get"aria-hidden"(){return h()}},()=>f.slotProps?.badge,{get class(){return e(g().badge(),f.slotProps?.badge?.class)}}),!1,!0),r(n,()=>f.badgeContent),t})()};export{d as default};
+import e from"../utils/cn.js";import t from"./style.js";import{useThemeContext as n}from"../ThemeProvider/ThemeContext.js";import"../ThemeProvider/index.js";import"../types/Prettify.js";import"../types/ExtendedComponentProps.js";import{insert as r,mergeProps as i,spread as a,template as o}from"solid-js/web";import{createMemo as s,mergeProps as c,splitProps as l}from"solid-js";import"tailwind-variants";var u=o(`<span><span>`),d=o=>{let d=c({color:`default`,overlap:`circle`},o),[f,p]=l(d,[`badgeContent`,`children`,`class`,`color`,`position`,`overlap`,`slotProps`]),m=n(),h=s(()=>f.badgeContent===void 0),g=s(()=>{let e={color:f.color,overlap:f.overlap,xPos:f.position?.x??`right`,yPos:f.position?.y??`top`,empty:h()};return m?m.componentsTV.badge(e):t(e)});return(()=>{var t=u(),n=t.firstChild;return a(t,i(p,{get class(){return e(g().base(),f.class)}}),!1,!0),r(t,()=>f.children,n),a(n,i({get"aria-hidden"(){return h()}},()=>f.slotProps?.badge,{get class(){return e(g().badge(),f.slotProps?.badge?.class)}}),!1,!0),r(n,()=>f.badgeContent),t})()};export{d as default};

package/dist/Badge/style.js

@@ -1 +1 @@
-import e from"../styles/theme/index.js";import t from"../utils/asVariant.js";import{tv as n}from"tailwind-variants";var r=(r=e)=>n({slots:{base:`relative`,badge:[`absolute grid place-items-center leading-0`,`text-xs font-semibold`,r.rounded.full]},variants:{color:t(r.colors,e=>({badge:[e.solid.background,e.solid.text]})),yPos:{top:{badge:`top-0 -translate-y-1/2`},bottom:{badge:`bottom-0 translate-y-1/2`}},xPos:{left:{badge:`left-0 -translate-x-1/2`},right:{badge:`right-0 translate-x-1/2`}},overlap:{circle:{},rect:{}},empty:{true:{badge:`min-w-2 min-h-2 w-2 h-2`},false:{badge:[`p-1 min-w-4 min-h-4 w-fit-content h-4`,`leading-0 grid place-items-center`]}}},compoundVariants:[{overlap:`circle`,xPos:`left`,class:{badge:`left-[15%]`}},{overlap:`circle`,xPos:`right`,class:{badge:`right-[15%]`}},{overlap:`circle`,yPos:`top`,class:{badge:`top-[15%]`}},{overlap:`circle`,yPos:`bottom`,class:{badge:`bottom-[15%]`}}]}),i=r();export{r as badge,i as default};
+import e from"../styles/theme/index.js";import t from"../utils/asVariant.js";import{tv as n}from"tailwind-variants";var r=(r=e)=>n({slots:{base:`relative`,badge:[`absolute grid place-items-center leading-0 select-none`,`text-xs font-semibold`,r.rounded.full]},variants:{color:t(r.colors,e=>({badge:[e.solid.background,e.solid.text]})),yPos:{top:{badge:`top-0 -translate-y-1/2`},bottom:{badge:`bottom-0 translate-y-1/2`}},xPos:{left:{badge:`left-0 -translate-x-1/2`},right:{badge:`right-0 translate-x-1/2`}},overlap:{circle:{},rect:{}},empty:{true:{badge:`min-w-2 min-h-2 w-2 h-2`},false:{badge:[`p-1 min-w-4 min-h-4 w-fit-content h-4`,`leading-0 grid place-items-center`]}}},compoundVariants:[{overlap:`circle`,xPos:`left`,class:{badge:`left-[15%]`}},{overlap:`circle`,xPos:`right`,class:{badge:`right-[15%]`}},{overlap:`circle`,yPos:`top`,class:{badge:`top-[15%]`}},{overlap:`circle`,yPos:`bottom`,class:{badge:`bottom-[15%]`}}]}),i=r();export{r as badge,i as default};

package/dist/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,9 +1,11 @@
 import { ComponentProps, JSXElement, ValidComponent } from 'solid-js';
-type BreadcrumbsSlotProps = {
-    ol?: ComponentProps<"ol">;
-    li?: ComponentProps<"li">;
-    seperator?: ComponentProps<"li">;
-};
+import { Prettify } from '../types/Prettify';
+import { WithExtendedComponentProps } from '../types/ExtendedComponentProps';
+type BreadcrumbsSlotProps = Prettify<{
+    ol?: Prettify<ComponentProps<"ol"> & WithExtendedComponentProps>;
+    li?: Prettify<ComponentProps<"li"> & WithExtendedComponentProps>;
+    seperator?: Prettify<ComponentProps<"li"> & WithExtendedComponentProps>;
+}>;
 export type BreadcrumbsProps<T extends ValidComponent = "nav"> = {
     as?: T;
     class?: string;

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -1 +1 @@
-import e from"../utils/cn.js";import t from"./style.js";import{useThemeContext as n}from"../ThemeProvider/ThemeContext.js";import"../ThemeProvider/index.js";import{Dynamic as r,createComponent as i,insert as a,memo as o,mergeProps as s,spread as c,template as l}from"solid-js/web";import{For as u,children as d,createMemo as f,mergeProps as p,splitProps as m}from"solid-js";var h=l(`<ol>`),g=l(`<li>`),_=l(`<li aria-hidden>`),v=l=>{let v=p({seperator:`/`},l),[y,b]=m(v,[`as`,`children`,`class`,`seperator`,`slotProps`]),x=n(),S=d(()=>y.children).toArray(),C=f(()=>x?x.componentsTV.breadcrumbs():t());return i(r,s(b,{get component(){return y.as??`nav`},get class(){return e(C().base(),y.class)},get children(){var t=h();return c(t,s(()=>y.slotProps?.ol,{get class(){return e(C().ol(),y.slotProps?.ol?.class)}}),!1,!0),a(t,i(u,{each:S,children:(e,t)=>[(()=>{var t=g();return c(t,s(()=>y.slotProps?.li),!1,!0),a(t,e),t})(),o(()=>o(()=>t()!==S.length-1)()?(()=>{var e=_();return c(e,s(()=>y.slotProps?.seperator),!1,!0),a(e,()=>y.seperator),e})():null)]})),t}}))};export{v as default};
+import e from"../utils/cn.js";import t from"./style.js";import{useThemeContext as n}from"../ThemeProvider/ThemeContext.js";import"../ThemeProvider/index.js";import"../types/Prettify.js";import"../types/ExtendedComponentProps.js";import{Dynamic as r,createComponent as i,insert as a,memo as o,mergeProps as s,setAttribute as c,spread as l,template as u}from"solid-js/web";import{For as d,children as f,createMemo as p,mergeProps as m,splitProps as h}from"solid-js";var g=u(`<ol>`),_=u(`<li>`),v=u=>{let v=m({seperator:`/`},u),[y,b]=h(v,[`as`,`children`,`class`,`seperator`,`slotProps`]),x=n(),S=f(()=>y.children).toArray(),C=p(()=>x?x.componentsTV.breadcrumbs():t());return i(r,s(b,{get component(){return y.as??`nav`},get class(){return e(C().base(),y.class)},get children(){var t=g();return l(t,s(()=>y.slotProps?.ol,{get class(){return e(C().ol(),y.slotProps?.ol?.class)}}),!1,!0),a(t,i(d,{each:S,children:(e,t)=>[(()=>{var t=_();return l(t,s(()=>y.slotProps?.li),!1,!0),a(t,e),t})(),o(()=>o(()=>t()!==S.length-1)()?(()=>{var e=_();return c(e,`aria-hidden`,!0),l(e,s(()=>y.slotProps?.seperator),!1,!0),a(e,()=>y.seperator),e})():null)]})),t}}))};export{v as default};

package/dist/Button/Button.d.ts

@@ -1,13 +1,15 @@
 import { ComponentProps, JSXElement, ValidComponent } from 'solid-js';
+import { Prettify } from '../types/Prettify';
+import { WithExtendedComponentProps } from '../types/ExtendedComponentProps';
 import { VariantProps } from 'tailwind-variants';
 import { ThemeColors } from '../styles/theme/colors';
 import { default as buttonDefaultStyles } from './style';
 type ButtonVariants = VariantProps<typeof buttonDefaultStyles>;
-type ButtonSlotProps = {
-    startIcon?: ComponentProps<"span">;
-    endIcon?: ComponentProps<"span">;
-};
-export type ButtonProps<T extends ValidComponent = "button" | "span"> = {
+type ButtonSlotProps = Prettify<{
+    startIcon?: Prettify<ComponentProps<"span"> & WithExtendedComponentProps>;
+    endIcon?: Prettify<ComponentProps<"span"> & WithExtendedComponentProps>;
+}>;
+export type ButtonProps<T extends ValidComponent = "button"> = {
     as?: T;
     color?: keyof ThemeColors;
     disabled?: ButtonVariants["disabled"];
@@ -20,5 +22,5 @@ export type ButtonProps<T extends ValidComponent = "button" | "span"> = {
     children?: JSXElement;
     class?: string;
 } & ComponentProps<T>;
-declare const Button: <T extends ValidComponent = "button" | "span">(props: ButtonProps<T>) => import("solid-js").JSX.Element;
+declare const Button: <T extends ValidComponent = "button">(props: ButtonProps<T>) => import("solid-js").JSX.Element;
 export default Button;

package/dist/Button/Button.js

@@ -1 +1 @@
-import e from"../utils/cn.js";import t from"./style.js";import{useThemeContext as n}from"../ThemeProvider/ThemeContext.js";import"../ThemeProvider/index.js";import{Dynamic as r,createComponent as i,insert as a,memo as o,mergeProps as s,spread as c,template as l}from"solid-js/web";import{createMemo as u,mergeProps as d,splitProps as f}from"solid-js";import"tailwind-variants";var p=l(`<span>`),m=l=>{let m=d({as:`button`,color:`default`,variant:`solid`,size:`medium`},l),[h,g]=f(m,[`as`,`children`,`class`,`color`,`disabled`,`endIcon`,`fullWidth`,`size`,`startIcon`,`variant`,`slotProps`]),_=n(),v=u(()=>{let e={color:h.color,disabled:h.disabled,fullWidth:h.fullWidth,size:h.size,variant:h.variant};return _?_.componentsTV.button(e):t(e)});return i(r,s({get component(){return h.as||`button`}},g,{get class(){return e(v().base(),h.class)},get disabled(){return h.disabled},get children(){return[o(()=>o(()=>!!h.startIcon)()?(()=>{var t=p();return c(t,s(()=>h.slotProps?.startIcon,{get class(){return e(v().startIcon(),h.slotProps?.startIcon?.class)}}),!1,!0),a(t,()=>h.startIcon),t})():null),o(()=>h.children),o(()=>o(()=>!!h.endIcon)()?(()=>{var t=p();return c(t,s(()=>h.slotProps?.endIcon,{get class(){return e(v().endIcon(),h.slotProps?.endIcon?.class)}}),!1,!0),a(t,()=>h.endIcon),t})():null)]}}))};export{m as default};
+import e from"../utils/cn.js";import t from"./style.js";import{useThemeContext as n}from"../ThemeProvider/ThemeContext.js";import"../ThemeProvider/index.js";import"../types/Prettify.js";import"../types/ExtendedComponentProps.js";import{Dynamic as r,createComponent as i,insert as a,memo as o,mergeProps as s,spread as c,template as l}from"solid-js/web";import{Show as u,createMemo as d,mergeProps as f,splitProps as p}from"solid-js";import"tailwind-variants";var m=l(`<span>`),h=l=>{let h=f({as:`button`,color:`default`,variant:`solid`,size:`medium`},l),[g,_]=p(h,[`as`,`children`,`class`,`color`,`disabled`,`endIcon`,`fullWidth`,`size`,`startIcon`,`variant`,`slotProps`]),v=n(),y=d(()=>{let e={color:g.color,disabled:g.disabled,fullWidth:g.fullWidth,size:g.size,variant:g.variant};return v?v.componentsTV.button(e):t(e)});return i(r,s({get component(){return g.as||`button`}},_,{get class(){return e(y().base(),g.class)},get disabled(){return g.disabled},get children(){return[i(u,{get when(){return g.startIcon},get children(){var t=m();return c(t,s(()=>g.slotProps?.startIcon,{get class(){return e(y().startIcon(),g.slotProps?.startIcon?.class)}}),!1,!0),a(t,()=>g.startIcon),t}}),o(()=>g.children),i(u,{get when(){return g.endIcon},get children(){var t=m();return c(t,s(()=>g.slotProps?.endIcon,{get class(){return e(y().endIcon(),g.slotProps?.endIcon?.class)}}),!1,!0),a(t,()=>g.endIcon),t}})]}}))};export{h as default};

package/dist/Button/style.js

@@ -1 +1 @@
-import e from"../styles/theme/index.js";import t from"../utils/asVariant.js";import n from"../utils/typedKeys.js";import{tv as r}from"tailwind-variants";var i=Object.keys(e.colors.default),a=(a=e)=>r({slots:{base:[`inline-flex justify-center items-center gap-2 font-normal align-middle`,a.rounded.small,a.focus],startIcon:`leading-[1] shrink-0`,endIcon:`leading-[1] shrink-0`},variants:{color:t(a.colors,()=>({})),variant:{...t(a.colors.default,()=>``),outlined:{base:`border`}},disabled:{true:{base:`user-event-none`},false:{base:`cursor-pointer`}},size:{small:{base:`py-[2px] px-2 text-sm min-h-6`},medium:{base:`py-1 px-3 text-sm min-h-8`},large:{base:`py-2 px-5 text-md gap-3 min-h-10`}},fullWidth:{true:{base:`w-full`},false:``}},compoundVariants:[...n(a.colors).flatMap(e=>i.map(t=>{let n=a.colors[e][t];return[{color:e,variant:t,disabled:!1,class:{base:[n.background,n.hover,n.active,n.text]}},{color:e,variant:t,disabled:!0,class:{base:[a.disabled.text,[`outlined`].includes(t)?a.disabled.border:``,[`solid`,`filled`].includes(t)?a.disabled.background:``]}}]}).flat())]}),o=a();export{a as button,o as default};
+import e from"../styles/theme/index.js";import t from"../utils/asVariant.js";import n from"../utils/typedKeys.js";import{tv as r}from"tailwind-variants";var i=Object.keys(e.colors.default),a=(a=e)=>r({slots:{base:[`inline-flex justify-center items-center gap-2`,`font-normal align-middle`,a.rounded.small,a.focus],startIcon:`leading-[1] shrink-0`,endIcon:`leading-[1] shrink-0`},variants:{color:t(a.colors,()=>({})),variant:{...t(a.colors.default,()=>``),outlined:{base:`border`}},disabled:{true:{base:`pointer-events-none`},false:{base:`cursor-pointer`}},size:{small:{base:`py-[2px] px-2 text-sm min-h-6`},medium:{base:`py-1 px-3 text-sm min-h-8`},large:{base:`py-2 px-5 text-md gap-3 min-h-10`}},fullWidth:{true:{base:`w-full`},false:``}},compoundVariants:[...n(a.colors).flatMap(e=>i.map(t=>{let n=a.colors[e][t];return[{color:e,variant:t,disabled:!1,class:{base:[n.background,n.border,n.hover,n.active,n.text]}},{color:e,variant:t,disabled:!0,class:{base:[a.disabled.text,[`outlined`].includes(t)?a.disabled.border:``,[`solid`,`filled`].includes(t)?a.disabled.background:``]}}]}).flat())]}),o=a();export{a as button,o as default};

package/dist/CardFooter/style.d.ts

@@ -1,4 +1,4 @@
 import { Theme } from '../styles/theme';
-export declare const cardFooter: (_theme?: Theme) => import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex items-center gap-2 px-4 py-2", {} | {}, undefined, import('tailwind-variants').TVReturnTypeLike<unknown, undefined>>;
-declare const _default: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex items-center gap-2 px-4 py-2", {} | {}, undefined, import('tailwind-variants').TVReturnTypeLike<unknown, undefined>>;
+export declare const cardFooter: (_theme?: Theme) => import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex items-center gap-2 px-4 pt-3 pb-4", {} | {}, undefined, import('tailwind-variants').TVReturnTypeLike<unknown, undefined>>;
+declare const _default: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex items-center gap-2 px-4 pt-3 pb-4", {} | {}, undefined, import('tailwind-variants').TVReturnTypeLike<unknown, undefined>>;
 export default _default;

package/dist/CardFooter/style.js

@@ -1 +1 @@
-import e from"../styles/theme/index.js";import{tv as t}from"tailwind-variants";var n=(n=e)=>t({base:`flex items-center gap-2 px-4 py-2`}),r=n();export{n as cardFooter,r as default};
+import e from"../styles/theme/index.js";import{tv as t}from"tailwind-variants";var n=(n=e)=>t({base:`flex items-center gap-2 px-4 pt-3 pb-4`}),r=n();export{n as cardFooter,r as default};

package/dist/CardTitle/CardTitle.d.ts

@@ -1,8 +1,8 @@
-import { JSXElement } from 'solid-js';
+import { JSXElement, ValidComponent } from 'solid-js';
 import { TypographyProps } from '../Typography/Typography';
-export type CardTitleProps = {
+export type CardTitleProps<T extends ValidComponent = "h2"> = {
     class?: string;
     children?: JSXElement;
-} & TypographyProps;
-declare const CardTitle: (props: CardTitleProps) => import("solid-js").JSX.Element;
+} & TypographyProps<T>;
+declare const CardTitle: <T extends ValidComponent = "h2">(props: CardTitleProps<T>) => import("solid-js").JSX.Element;
 export default CardTitle;

package/dist/Checkbox/Checkbox.d.ts

@@ -1,8 +1,10 @@
 import { ComponentProps } from 'solid-js';
+import { Prettify } from '../types/Prettify';
+import { WithExtendedComponentProps } from '../types/ExtendedComponentProps';
 import { IconButtonProps } from '../IconButton';
-type CheckboxSlotProps = {
-    base?: ComponentProps<"span">;
-};
+type CheckboxSlotProps = Prettify<{
+    base?: Prettify<ComponentProps<"span"> & WithExtendedComponentProps>;
+}>;
 export type CheckboxProps = {
     checked?: boolean;
     class?: string;

package/dist/Checkbox/Checkbox.js

@@ -1 +1 @@
-import e from"../utils/cn.js";import t from"./style.js";import{useThemeContext as n}from"../ThemeProvider/ThemeContext.js";import"../ThemeProvider/index.js";import r from"../IconButton/IconButton.js";import"../IconButton/index.js";import i from"../icons/CheckboxChecked.js";import a from"../icons/CheckboxUnchecked.js";import{createComponent as o,memo as s,mergeProps as c,spread as l,template as u}from"solid-js/web";import{createMemo as d,createSignal as f,splitProps as p}from"solid-js";var m=u(`<input>`),h=u=>{let[h,g]=p(u,[`checked`,`class`,`color`,`defaultChecked`,`disabled`,`id`,`onChange`,`size`,`slotProps`,`children`]),_=n(),v=typeof h.checked==`boolean`,[y,b]=f(!!h.defaultChecked),x=d(()=>v?h.checked:y()),S=e=>{let t=e.currentTarget.checked;v||b(t),h.onChange?.(e,t)},C=d(()=>{let e={checked:x(),disabled:h.disabled};return _?_.componentsTV.checkbox(e):t(e)});return o(r,c(()=>h.slotProps?.base,{as:`span`,get class(){return e(C().base(),h.slotProps?.base?.class)},get color(){return h.color},get size(){return h.size},get disabled(){return h.disabled},get children(){return[s(()=>s(()=>!!x())()?o(i,{}):o(a,{})),(()=>{var t=m();return l(t,c(g,{get id(){return h.id},type:`checkbox`,get checked(){return x()},onChange:S,get disabled(){return h.disabled},get class(){return e(C().input(),h.class)}}),!1,!1),t})()]}}))};export{h as default};
+import e from"../utils/cn.js";import t from"./style.js";import{useThemeContext as n}from"../ThemeProvider/ThemeContext.js";import"../ThemeProvider/index.js";import"../types/Prettify.js";import"../types/ExtendedComponentProps.js";import r from"../IconButton/IconButton.js";import"../IconButton/index.js";import i from"../icons/CheckboxChecked.js";import a from"../icons/CheckboxUnchecked.js";import{createComponent as o,memo as s,mergeProps as c,spread as l,template as u}from"solid-js/web";import{createMemo as d,createSignal as f,splitProps as p}from"solid-js";var m=u(`<input>`),h=u=>{let[h,g]=p(u,[`checked`,`class`,`color`,`defaultChecked`,`disabled`,`id`,`onChange`,`size`,`slotProps`,`children`]),_=n(),v=typeof h.checked==`boolean`,[y,b]=f(!!h.defaultChecked),x=d(()=>v?h.checked:y()),S=e=>{let t=e.currentTarget.checked;v||b(t),h.onChange?.(e,t)},C=d(()=>{let e={checked:x(),disabled:h.disabled};return _?_.componentsTV.checkbox(e):t(e)});return o(r,c(()=>h.slotProps?.base,{as:`span`,get class(){return e(C().base(),h.slotProps?.base?.class)},get color(){return h.color},get size(){return h.size},get disabled(){return h.disabled},get children(){return[s(()=>s(()=>!!x())()?o(i,{}):o(a,{})),(()=>{var t=m();return l(t,c(g,{get id(){return h.id},type:`checkbox`,get checked(){return x()},onChange:S,get disabled(){return h.disabled},get class(){return e(C().input(),h.class)}}),!1,!1),t})()]}}))};export{h as default};

package/dist/Chip/Chip.d.ts

@@ -1,13 +1,15 @@
 import { ComponentProps, JSXElement } from 'solid-js';
+import { Prettify } from '../types/Prettify';
+import { WithExtendedComponentProps } from '../types/ExtendedComponentProps';
 import { VariantProps } from 'tailwind-variants';
 import { TypographyProps } from '../Typography/Typography';
 import { ThemeColors } from '../styles/theme/colors';
 import { default as chipDefaultStyles } from './style';
 type ChipVariants = VariantProps<typeof chipDefaultStyles>;
-type ChipSlotProps = {
-    deleteIcon?: ComponentProps<"span">;
-    label?: TypographyProps;
-};
+type ChipSlotProps = Prettify<{
+    deleteIcon?: Prettify<ComponentProps<"span"> & WithExtendedComponentProps>;
+    label?: Prettify<TypographyProps<"span"> & WithExtendedComponentProps>;
+}>;
 export type ChipProps = {
     avatar?: JSXElement;
     color?: keyof ThemeColors;

package/dist/Chip/Chip.js

@@ -1 +1 @@
-import e from"../utils/cn.js";import t from"./style.js";import{useThemeContext as n}from"../ThemeProvider/ThemeContext.js";import"../ThemeProvider/index.js";import r from"../Typography/Typography.js";import i from"../icons/Cross.js";import{Dynamic as a,createComponent as o,insert as s,memo as c,mergeProps as l,spread as u,template as d}from"solid-js/web";import{createMemo as f,mergeProps as p,splitProps as m}from"solid-js";import"tailwind-variants";var h=d(`<span>`),g=d=>{let g=p({color:`default`,variant:`filled`,size:`medium`,disabled:!1},d),[_,v]=m(g,[`avatar`,`class`,`color`,`deleteIcon`,`disabled`,`icon`,`label`,`onClick`,`onDelete`,`slotProps`,`variant`,`size`,`children`]),y=n(),b=f(()=>_.avatar?_.avatar:_.icon?_.icon:null),x=f(()=>!!_.avatar),S=f(()=>typeof _.onDelete==`function`),C=f(()=>typeof _.onClick==`function`),w=e=>{_.disabled||(e.stopPropagation(),_.onDelete?.(e))},T=f(()=>{let e={color:_.color,disabled:_.disabled,variant:_.variant,size:_.size,hasAvatarElement:x(),hasDeleteIcon:S(),clickable:C()};return y?y.componentsTV.chip(e):t(e)}),E=f(()=>S()?_.deleteIcon?_.deleteIcon:o(i,{}):null);return o(a,l(v,{get component(){return C()?`button`:`div`},get"aria-disabled"(){return _.disabled},get onClick(){return c(()=>!_.disabled)()?_.onClick:void 0},get tabIndex(){return C()&&!_.disabled?0:void 0},get class(){return e(T().base(),_.class)},get children(){return[c(()=>b()),o(r,l(()=>_.slotProps?.label,{as:`span`,variant:`inherit`,truncate:!0,get class(){return e(T().label(),_.slotProps?.label?.class)},get children(){return _.label}})),(()=>{var t=h();return u(t,l(()=>_.slotProps?.deleteIcon,{get class(){return e(T().deleteIcon(),_.slotProps?.deleteIcon?.class)},onClick:w}),!1,!0),s(t,E),t})()]}}))};export{g as default};
+import e from"../utils/cn.js";import t from"./style.js";import{useThemeContext as n}from"../ThemeProvider/ThemeContext.js";import"../ThemeProvider/index.js";import"../types/Prettify.js";import"../types/ExtendedComponentProps.js";import r from"../Typography/Typography.js";import i from"../icons/Cross.js";import{Dynamic as a,createComponent as o,insert as s,memo as c,mergeProps as l,spread as u,template as d}from"solid-js/web";import{createMemo as f,mergeProps as p,splitProps as m}from"solid-js";import"tailwind-variants";var h=d(`<span>`),g=d=>{let g=p({color:`default`,variant:`filled`,size:`medium`,disabled:!1},d),[_,v]=m(g,[`avatar`,`class`,`color`,`deleteIcon`,`disabled`,`icon`,`label`,`onClick`,`onDelete`,`slotProps`,`variant`,`size`,`children`]),y=n(),b=f(()=>_.avatar?_.avatar:_.icon?_.icon:null),x=f(()=>!!_.avatar),S=f(()=>typeof _.onDelete==`function`),C=f(()=>typeof _.onClick==`function`),w=e=>{_.disabled||(e.stopPropagation(),_.onDelete?.(e))},T=f(()=>{let e={color:_.color,disabled:_.disabled,variant:_.variant,size:_.size,hasAvatarElement:x(),hasDeleteIcon:S(),clickable:C()};return y?y.componentsTV.chip(e):t(e)}),E=f(()=>S()?_.deleteIcon?_.deleteIcon:o(i,{}):null);return o(a,l(v,{get component(){return C()?`button`:`div`},get"aria-disabled"(){return _.disabled},get onClick(){return c(()=>!_.disabled)()?_.onClick:void 0},get tabIndex(){return C()&&!_.disabled?0:-1},get class(){return e(T().base(),_.class)},get children(){return[c(()=>b()),o(r,l(()=>_.slotProps?.label,{as:`span`,variant:`inherit`,truncate:!0,get class(){return e(T().label(),_.slotProps?.label?.class)},get children(){return _.label}})),(()=>{var t=h();return u(t,l(()=>_.slotProps?.deleteIcon,{get class(){return e(T().deleteIcon(),_.slotProps?.deleteIcon?.class)},onClick:w}),!1,!0),s(t,E),t})()]}}))};export{g as default};

package/dist/Chip/style.d.ts

@@ -31,9 +31,7 @@ export declare const chip: (theme?: Theme) => import('tailwind-variants').TVRetu
         };
     };
     clickable: {
-        true: {
-            base: string[];
-        };
+        true: {};
         false: {};
     };
     hasDeleteIcon: {
@@ -80,9 +78,7 @@ export declare const chip: (theme?: Theme) => import('tailwind-variants').TVRetu
         };
     };
     clickable: {
-        true: {
-            base: string[];
-        };
+        true: {};
         false: {};
     };
     hasDeleteIcon: {
@@ -129,9 +125,7 @@ export declare const chip: (theme?: Theme) => import('tailwind-variants').TVRetu
         };
     };
     clickable: {
-        true: {
-            base: string[];
-        };
+        true: {};
         false: {};
     };
     hasDeleteIcon: {
@@ -179,9 +173,7 @@ declare const _default: import('tailwind-variants').TVReturnType<{
         };
     };
     clickable: {
-        true: {
-            base: string[];
-        };
+        true: {};
         false: {};
     };
     hasDeleteIcon: {
@@ -228,9 +220,7 @@ declare const _default: import('tailwind-variants').TVReturnType<{
         };
     };
     clickable: {
-        true: {
-            base: string[];
-        };
+        true: {};
         false: {};
     };
     hasDeleteIcon: {
@@ -277,9 +267,7 @@ declare const _default: import('tailwind-variants').TVReturnType<{
         };
     };
     clickable: {
-        true: {
-            base: string[];
-        };
+        true: {};
         false: {};
     };
     hasDeleteIcon: {

package/dist/Chip/style.js

@@ -1 +1 @@
-import e from"../styles/theme/index.js";import t from"../utils/asVariant.js";import n from"../utils/typedKeys.js";import{tv as r}from"tailwind-variants";var i=[`solid`,`filled`,`outlined`],a=(a=e)=>r({slots:{base:[`inline-flex items-center gap-1 max-w-full`,`font-normal align-middle`,a.typography.colors.textPrimary,a.rounded.full],label:``,deleteIcon:`shrink-0`},variants:{color:t(a.colors,()=>({})),variant:{solid:{},filled:{},outlined:{base:`border`}},disabled:{true:{base:`user-event-none`},false:{deleteIcon:`cursor-pointer`}},size:{small:{base:`h-6 px-1.5 py-[2px] gap-[2px] text-xs`,deleteIcon:`text-md`},medium:{base:`h-7 px-2.5 py-1 gap-[3px] text-sm`,deleteIcon:`text-lg`},large:{base:`h-8 px-3 py-1.5 gap-1 text-normal`,deleteIcon:`text-xl`}},clickable:{true:{base:[a.focus]},false:{}},hasDeleteIcon:{true:{},false:{}},hasAvatarElement:{true:{},false:{}}},compoundVariants:[...n(a.colors).flatMap(e=>i.map(t=>{let n=a.colors[e][t];return[{color:e,variant:t,clickable:!1,disabled:!1,class:{base:[n.background,n.border,n.text]}},{color:e,variant:t,clickable:!0,disabled:!1,class:{base:[`cursor-pointer`,n.background,n.border,n.text,n.hover,n.active]}},{color:e,variant:t,disabled:!0,class:{base:[a.disabled.text,[`outlined`].includes(t)?a.disabled.border:``,[`solid`,`filled`].includes(t)?a.disabled.background:``]}}]}).flat()),{hasDeleteIcon:!0,size:`small`,class:{base:`ps-1.5 pe-1`}},{hasDeleteIcon:!0,size:`medium`,class:{base:`ps-2.5 pe-1.5`}},{hasDeleteIcon:!0,size:`large`,class:{base:`ps-3 pe-2`}},{hasAvatarElement:!0,size:`small`,class:{base:`ps-[2px]`,label:`ps-[1px]`}},{hasAvatarElement:!0,size:`medium`,class:{base:`ps-[3px]`,label:`ps-[2px]`}},{hasAvatarElement:!0,size:`large`,class:{base:`ps-1`,label:`ps-[3px]`}}]}),o=a();export{a as chip,o as default};
+import e from"../styles/theme/index.js";import t from"../utils/asVariant.js";import n from"../utils/typedKeys.js";import{tv as r}from"tailwind-variants";var i=[`solid`,`filled`,`outlined`],a=(a=e)=>r({slots:{base:[`inline-flex items-center gap-1 max-w-full`,`font-normal align-middle`,a.typography.colors.textPrimary,a.rounded.full],label:``,deleteIcon:`shrink-0`},variants:{color:t(a.colors,()=>({})),variant:{solid:{},filled:{},outlined:{base:`border`}},disabled:{true:{base:`pointer-events-none`},false:{deleteIcon:`cursor-pointer`}},size:{small:{base:`h-6 px-1.5 py-[2px] gap-[2px] text-xs`,deleteIcon:`text-md`},medium:{base:`h-7 px-2.5 py-1 gap-[3px] text-sm`,deleteIcon:`text-lg`},large:{base:`h-8 px-3 py-1.5 gap-1 text-md`,deleteIcon:`text-xl`}},clickable:{true:{},false:{}},hasDeleteIcon:{true:{},false:{}},hasAvatarElement:{true:{},false:{}}},compoundVariants:[...n(a.colors).flatMap(e=>i.map(t=>{let n=a.colors[e][t];return[{color:e,variant:t,clickable:!1,disabled:!1,class:{base:[n.background,n.border,n.text]}},{color:e,variant:t,clickable:!0,disabled:!1,class:{base:[`cursor-pointer`,n.background,n.border,n.text,n.hover,n.active]}},{color:e,variant:t,disabled:!0,class:{base:[a.disabled.text,[`outlined`].includes(t)?a.disabled.border:``,[`solid`,`filled`].includes(t)?a.disabled.background:``]}}]}).flat()),{hasDeleteIcon:!0,size:`small`,class:{base:`ps-1.5 pe-1`}},{hasDeleteIcon:!0,size:`medium`,class:{base:`ps-2.5 pe-1.5`}},{hasDeleteIcon:!0,size:`large`,class:{base:`ps-3 pe-2`}},{hasAvatarElement:!0,size:`small`,class:{base:`ps-[2px]`,label:`ps-[1px]`}},{hasAvatarElement:!0,size:`medium`,class:{base:`ps-[3px]`,label:`ps-[2px]`}},{hasAvatarElement:!0,size:`large`,class:{base:`ps-1`,label:`ps-[3px]`}},{clickable:!0,disabled:!1,class:{base:[a.focus]}}]}),o=a();export{a as chip,o as default};

package/dist/Dialog/Dialog.d.ts

@@ -1,11 +1,13 @@
 import { ComponentProps, JSXElement } from 'solid-js';
+import { Prettify } from '../types/Prettify';
+import { WithExtendedComponentProps } from '../types/ExtendedComponentProps';
 import { VariantProps } from 'tailwind-variants';
 import { BackdropProps } from '../Backdrop';
 import { default as dialogDefaultStyles } from './style';
 type DialogVariants = VariantProps<typeof dialogDefaultStyles>;
-type DialogSlotProps = {
-    backdrop?: BackdropProps;
-};
+type DialogSlotProps = Prettify<{
+    backdrop?: Prettify<BackdropProps & WithExtendedComponentProps>;
+}>;
 export type DialogCloseReason = "escape" | "backdrop";
 export type DialogProps = {
     children?: JSXElement;
@@ -13,8 +15,9 @@ export type DialogProps = {
     fullscreen?: DialogVariants["fullscreen"];
     onClose?: (event: Event, reason: DialogCloseReason) => void;
     open?: boolean;
+    ref?: (element: HTMLDivElement) => void;
     role?: "alertdialog" | "dialog";
     slotProps?: DialogSlotProps;
-} & Omit<ComponentProps<"div">, "onClose">;
+} & Omit<ComponentProps<"div">, "onClose" | "ref">;
 declare const Dialog: (props: DialogProps) => import("solid-js").JSX.Element;
 export default Dialog;

package/dist/Dialog/Dialog.js

@@ -1 +1 @@
-import e from"../utils/cn.js";import t from"./style.js";import{useThemeContext as n}from"../ThemeProvider/ThemeContext.js";import"../ThemeProvider/index.js";import r from"../Backdrop/Backdrop.js";import"../Backdrop/index.js";import{Portal as i,createComponent as a,insert as o,mergeProps as s,spread as c,template as l,use as u}from"solid-js/web";import{Show as d,createEffect as f,createMemo as p,mergeProps as m,onCleanup as h,splitProps as g}from"solid-js";import"tailwind-variants";var _=l(`<div role=dialog aria-modal=true>`),v=[`a[href]`,`button:not([disabled])`,`input:not([disabled])`,`select:not([disabled])`,`textarea:not([disabled])`,`[tabindex]:not([tabindex='-1'])`].join(`,`),y=l=>{let y=m({fullscreen:!1},l),[b,x]=g(y,[`class`,`children`,`fullscreen`,`open`,`onClose`,`slotProps`]),S=n(),C,w=()=>C?Array.from(C.querySelectorAll(v)).filter(e=>{let t=getComputedStyle(e);return!e.hasAttribute(`disabled`)&&t.display!==`none`&&t.visibility!==`hidden`}):[],T=()=>{let e=w()[0];e?e.focus():C.focus()},E=()=>{let e=w(),t=e[e.length-1];t?t.focus():C.focus()},D=e=>{if(!b.open||!C)return;if(e.key===`Escape`){e.preventDefault(),b.onClose?.(e,`escape`);return}if(e.key!==`Tab`)return;let t=w();if(t.length===0){e.preventDefault(),C.focus();return}let n=t[0],r=t[t.length-1],i=document.activeElement;if(!C.contains(i)){e.preventDefault(),e.shiftKey?E():T();return}if(e.shiftKey&&i===n){e.preventDefault(),r.focus();return}!e.shiftKey&&i===r&&(e.preventDefault(),n.focus())},O=e=>{if(!b.open||!C)return;let t=e.target;t instanceof Node&&(C.contains(t)||T())};f(()=>{if(!b.open){document.body.classList.remove(`overflow-hidden`);return}document.body.classList.add(`overflow-hidden`),document.addEventListener(`keydown`,D),document.addEventListener(`focusin`,O),h(()=>{document.removeEventListener(`keydown`,D),document.removeEventListener(`focusin`,O)})});let k=e=>{e.target===C||C.contains(e.target)||(b.onClose?.(e,`backdrop`),b.slotProps?.backdrop?.onClick?.(e))},A=p(()=>{let e={fullscreen:b.fullscreen};return S?S.componentsTV.dialog(e):t(e)});return a(d,{get when(){return b.open},get children(){return a(i,{get children(){return a(r,s(()=>b.slotProps?.backdrop,{onClick:k,get children(){var t=_(),n=C;return typeof n==`function`?u(n,t):C=t,c(t,s(x,{get class(){return e(A(),b.class)}}),!1,!0),o(t,()=>b.children),t}}))}})}})};export{y as default};
+import e from"../utils/cn.js";import t from"./style.js";import{useThemeContext as n}from"../ThemeProvider/ThemeContext.js";import"../ThemeProvider/index.js";import"../types/Prettify.js";import"../types/ExtendedComponentProps.js";import r from"../Backdrop/Backdrop.js";import"../Backdrop/index.js";import{Portal as i,createComponent as a,insert as o,mergeProps as s,spread as c,template as l,use as u}from"solid-js/web";import{Show as d,createEffect as f,createMemo as p,mergeProps as m,onCleanup as h,splitProps as g}from"solid-js";import"tailwind-variants";var _=l(`<div role=dialog aria-modal=true>`),v=[`a[href]`,`button:not([disabled])`,`input:not([disabled])`,`select:not([disabled])`,`textarea:not([disabled])`,`[tabindex]:not([tabindex='-1'])`].join(`,`),y=l=>{let y=m({fullscreen:!1},l),[b,x]=g(y,[`class`,`children`,`fullscreen`,`open`,`onClose`,`ref`,`slotProps`]),S=n(),C,w=()=>C?Array.from(C.querySelectorAll(v)).filter(e=>{let t=getComputedStyle(e);return!e.hasAttribute(`disabled`)&&t.display!==`none`&&t.visibility!==`hidden`}):[],T=()=>{let e=w()[0];e?e.focus():C.focus()},E=()=>{let e=w(),t=e[e.length-1];t?t.focus():C.focus()},D=e=>{if(!b.open||!C)return;if(e.key===`Escape`){e.preventDefault(),b.onClose?.(e,`escape`);return}if(e.key!==`Tab`)return;let t=w();if(t.length===0){e.preventDefault(),C.focus();return}let n=t[0],r=t[t.length-1],i=document.activeElement;if(!C.contains(i)){e.preventDefault(),e.shiftKey?E():T();return}if(e.shiftKey&&i===n){e.preventDefault(),r.focus();return}!e.shiftKey&&i===r&&(e.preventDefault(),n.focus())},O=e=>{if(!b.open||!C)return;let t=e.target;t instanceof Node&&(C.contains(t)||T())};f(()=>{if(!b.open){document.body.classList.remove(`overflow-hidden`);return}document.body.classList.add(`overflow-hidden`),document.addEventListener(`keydown`,D),document.addEventListener(`focusin`,O),h(()=>{document.removeEventListener(`keydown`,D),document.removeEventListener(`focusin`,O)})});let k=e=>{e.target===C||C.contains(e.target)||(b.onClose?.(e,`backdrop`),b.slotProps?.backdrop?.onClick?.(e))},A=p(()=>{let e={fullscreen:b.fullscreen};return S?S.componentsTV.dialog(e):t(e)});return a(d,{get when(){return b.open},get children(){return a(i,{get children(){return a(r,s(()=>b.slotProps?.backdrop,{onClick:k,get children(){var t=_();return u(e=>{C=e,b.ref?.(e)},t),c(t,s(x,{get class(){return e(A(),b.class)}}),!1,!0),o(t,()=>b.children),t}}))}})}})};export{y as default};

package/dist/Dialog/style.js

@@ -1 +1 @@
-import e from"../styles/theme/index.js";import{tv as t}from"tailwind-variants";var n=(n=e)=>t({base:[`fixed min-w-xs shadow-sm z-2`,`bg-white dark:bg-neutral-900`,`dark:border`,n.divider],variants:{fullscreen:{true:`w-full h-full`,false:[`top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2`,`[max-width:calc(100%_-_2rem)] [max-height:calc(100%_-_2rem)]`,n.rounded.small]}}}),r=n();export{r as default,n as dialog};
+import e from"../styles/theme/index.js";import{tv as t}from"tailwind-variants";var n=(n=e)=>t({base:[`fixed min-w-xs shadow-sm z-2`,`bg-white dark:bg-neutral-900`,`dark:border`,n.divider],variants:{fullscreen:{true:`w-full h-full`,false:[`top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2`,`max-w-[calc(100vw_-_2rem)] max-h-[calc(100vh_-_2rem)]`,n.rounded.small]}}}),r=n();export{r as default,n as dialog};