rocksolidjs 0.1.0

package/dist/Badge/style.d.ts

@@ -0,0 +1,214 @@
+import { Theme } from '../styles/theme';
+export declare const badge: (theme?: Theme) => import('tailwind-variants').TVReturnType<{
+    color: Record<"default" | "success" | "warning" | "info" | "error", {
+        badge: string[];
+    }>;
+    yPos: {
+        top: {
+            badge: string;
+        };
+        bottom: {
+            badge: string;
+        };
+    };
+    xPos: {
+        left: {
+            badge: string;
+        };
+        right: {
+            badge: string;
+        };
+    };
+    overlap: {
+        circle: {};
+        rect: {};
+    };
+    empty: {
+        true: {
+            badge: string;
+        };
+        false: {
+            badge: string[];
+        };
+    };
+}, {
+    base: string;
+    badge: string[];
+}, undefined, {
+    color: Record<"default" | "success" | "warning" | "info" | "error", {
+        badge: string[];
+    }>;
+    yPos: {
+        top: {
+            badge: string;
+        };
+        bottom: {
+            badge: string;
+        };
+    };
+    xPos: {
+        left: {
+            badge: string;
+        };
+        right: {
+            badge: string;
+        };
+    };
+    overlap: {
+        circle: {};
+        rect: {};
+    };
+    empty: {
+        true: {
+            badge: string;
+        };
+        false: {
+            badge: string[];
+        };
+    };
+}, {
+    base: string;
+    badge: string[];
+}, import('tailwind-variants').TVReturnTypeLike<{
+    color: Record<"default" | "success" | "warning" | "info" | "error", {
+        badge: string[];
+    }>;
+    yPos: {
+        top: {
+            badge: string;
+        };
+        bottom: {
+            badge: string;
+        };
+    };
+    xPos: {
+        left: {
+            badge: string;
+        };
+        right: {
+            badge: string;
+        };
+    };
+    overlap: {
+        circle: {};
+        rect: {};
+    };
+    empty: {
+        true: {
+            badge: string;
+        };
+        false: {
+            badge: string[];
+        };
+    };
+}, {
+    base: string;
+    badge: string[];
+}>>;
+declare const _default: import('tailwind-variants').TVReturnType<{
+    color: Record<"default" | "success" | "warning" | "info" | "error", {
+        badge: string[];
+    }>;
+    yPos: {
+        top: {
+            badge: string;
+        };
+        bottom: {
+            badge: string;
+        };
+    };
+    xPos: {
+        left: {
+            badge: string;
+        };
+        right: {
+            badge: string;
+        };
+    };
+    overlap: {
+        circle: {};
+        rect: {};
+    };
+    empty: {
+        true: {
+            badge: string;
+        };
+        false: {
+            badge: string[];
+        };
+    };
+}, {
+    base: string;
+    badge: string[];
+}, undefined, {
+    color: Record<"default" | "success" | "warning" | "info" | "error", {
+        badge: string[];
+    }>;
+    yPos: {
+        top: {
+            badge: string;
+        };
+        bottom: {
+            badge: string;
+        };
+    };
+    xPos: {
+        left: {
+            badge: string;
+        };
+        right: {
+            badge: string;
+        };
+    };
+    overlap: {
+        circle: {};
+        rect: {};
+    };
+    empty: {
+        true: {
+            badge: string;
+        };
+        false: {
+            badge: string[];
+        };
+    };
+}, {
+    base: string;
+    badge: string[];
+}, import('tailwind-variants').TVReturnTypeLike<{
+    color: Record<"default" | "success" | "warning" | "info" | "error", {
+        badge: string[];
+    }>;
+    yPos: {
+        top: {
+            badge: string;
+        };
+        bottom: {
+            badge: string;
+        };
+    };
+    xPos: {
+        left: {
+            badge: string;
+        };
+        right: {
+            badge: string;
+        };
+    };
+    overlap: {
+        circle: {};
+        rect: {};
+    };
+    empty: {
+        true: {
+            badge: string;
+        };
+        false: {
+            badge: string[];
+        };
+    };
+}, {
+    base: string;
+    badge: string[];
+}>>;
+export default _default;

package/dist/Badge/style.js

@@ -0,0 +1 @@
+import{n as e}from"../_chunks/dist-C-sN40SQ.js";import t from"../styles/theme/index.js";import n from"../utils/asVariant.js";var r=(r=t)=>e({slots:{base:`relative`,badge:[`absolute grid place-items-center leading-0`,`text-xs font-semibold`,r.rounded.full]},variants:{color:n(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

@@ -0,0 +1,14 @@
+import { ComponentProps, JSXElement, ValidComponent } from 'solid-js';
+type BreadcrumbsSlotProps = {
+    ol?: ComponentProps<"ol">;
+    li?: ComponentProps<"li">;
+    seperator?: ComponentProps<"li">;
+};
+export type BreadcrumbsProps<T extends ValidComponent = "nav"> = {
+    as?: T;
+    class?: string;
+    seperator?: JSXElement;
+    slotProps?: BreadcrumbsSlotProps;
+} & ComponentProps<T>;
+declare const Breadcrumbs: <T extends ValidComponent = "nav">(props: BreadcrumbsProps<T>) => import("solid-js").JSX.Element;
+export default Breadcrumbs;

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +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};

package/dist/Breadcrumbs/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Breadcrumbs';
+export * from './Breadcrumbs';

package/dist/Breadcrumbs/index.js

@@ -0,0 +1 @@
+import"./Breadcrumbs.js";

package/dist/Breadcrumbs/style.d.ts

@@ -0,0 +1,64 @@
+import { Theme } from '../styles/theme';
+export declare const breadcrumbs: (theme?: Theme) => import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
+            ol?: import('tailwind-variants').ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
+            ol?: import('tailwind-variants').ClassValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    ol: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
+            ol?: import('tailwind-variants').ClassValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    ol: string;
+}, import('tailwind-variants').TVReturnTypeLike<unknown, {
+    base: string[];
+    ol: string;
+}>>;
+declare const _default: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
+            ol?: import('tailwind-variants').ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
+            ol?: import('tailwind-variants').ClassValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    ol: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-variants').ClassValue | {
+            base?: import('tailwind-variants').ClassValue;
+            ol?: import('tailwind-variants').ClassValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    ol: string;
+}, import('tailwind-variants').TVReturnTypeLike<unknown, {
+    base: string[];
+    ol: string;
+}>>;
+export default _default;

package/dist/Breadcrumbs/style.js

@@ -0,0 +1 @@
+import{n as e}from"../_chunks/dist-C-sN40SQ.js";import t from"../styles/theme/index.js";var n=(n=t)=>e({slots:{base:[n.typography.variants.body2,n.typography.colors.textTertiary],ol:`flex items-center flex-wrap gap-2`}}),r=n();export{n as breadcrumbs,r as default};

package/dist/Button/Button.d.ts

@@ -0,0 +1,24 @@
+import { ComponentProps, JSXElement, ValidComponent } from 'solid-js';
+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"> = {
+    as?: T;
+    color?: keyof ThemeColors;
+    disabled?: ButtonVariants["disabled"];
+    endIcon?: JSXElement;
+    fullWidth?: boolean;
+    size?: ButtonVariants["size"];
+    slotProps?: ButtonSlotProps;
+    startIcon?: JSXElement;
+    variant?: ButtonVariants["variant"];
+    children?: JSXElement;
+    class?: string;
+} & ComponentProps<T>;
+declare const Button: <T extends ValidComponent = "button" | "span">(props: ButtonProps<T>) => import("solid-js").JSX.Element;
+export default Button;

package/dist/Button/Button.js

@@ -0,0 +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";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};

package/dist/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Button';
+export * from './Button';

package/dist/Button/index.js

@@ -0,0 +1 @@
+import"./Button.js";

package/dist/Button/style.d.ts

@@ -0,0 +1,238 @@
+import { Theme } from '../styles/theme';
+export declare const button: (theme?: Theme) => import('tailwind-variants').TVReturnType<{
+    color: Record<"default" | "success" | "warning" | "info" | "error", {}>;
+    variant: {
+        outlined: {
+            base: string;
+        };
+        solid: string;
+        filled: string;
+        ghost: string;
+    };
+    disabled: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    size: {
+        small: {
+            base: string;
+        };
+        medium: {
+            base: string;
+        };
+        large: {
+            base: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+        };
+        false: "";
+    };
+}, {
+    base: string[];
+    startIcon: string;
+    endIcon: string;
+}, undefined, {
+    color: Record<"default" | "success" | "warning" | "info" | "error", {}>;
+    variant: {
+        outlined: {
+            base: string;
+        };
+        solid: string;
+        filled: string;
+        ghost: string;
+    };
+    disabled: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    size: {
+        small: {
+            base: string;
+        };
+        medium: {
+            base: string;
+        };
+        large: {
+            base: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+        };
+        false: "";
+    };
+}, {
+    base: string[];
+    startIcon: string;
+    endIcon: string;
+}, import('tailwind-variants').TVReturnTypeLike<{
+    color: Record<"default" | "success" | "warning" | "info" | "error", {}>;
+    variant: {
+        outlined: {
+            base: string;
+        };
+        solid: string;
+        filled: string;
+        ghost: string;
+    };
+    disabled: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    size: {
+        small: {
+            base: string;
+        };
+        medium: {
+            base: string;
+        };
+        large: {
+            base: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+        };
+        false: "";
+    };
+}, {
+    base: string[];
+    startIcon: string;
+    endIcon: string;
+}>>;
+declare const _default: import('tailwind-variants').TVReturnType<{
+    color: Record<"default" | "success" | "warning" | "info" | "error", {}>;
+    variant: {
+        outlined: {
+            base: string;
+        };
+        solid: string;
+        filled: string;
+        ghost: string;
+    };
+    disabled: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    size: {
+        small: {
+            base: string;
+        };
+        medium: {
+            base: string;
+        };
+        large: {
+            base: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+        };
+        false: "";
+    };
+}, {
+    base: string[];
+    startIcon: string;
+    endIcon: string;
+}, undefined, {
+    color: Record<"default" | "success" | "warning" | "info" | "error", {}>;
+    variant: {
+        outlined: {
+            base: string;
+        };
+        solid: string;
+        filled: string;
+        ghost: string;
+    };
+    disabled: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    size: {
+        small: {
+            base: string;
+        };
+        medium: {
+            base: string;
+        };
+        large: {
+            base: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+        };
+        false: "";
+    };
+}, {
+    base: string[];
+    startIcon: string;
+    endIcon: string;
+}, import('tailwind-variants').TVReturnTypeLike<{
+    color: Record<"default" | "success" | "warning" | "info" | "error", {}>;
+    variant: {
+        outlined: {
+            base: string;
+        };
+        solid: string;
+        filled: string;
+        ghost: string;
+    };
+    disabled: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+    size: {
+        small: {
+            base: string;
+        };
+        medium: {
+            base: string;
+        };
+        large: {
+            base: string;
+        };
+    };
+    fullWidth: {
+        true: {
+            base: string;
+        };
+        false: "";
+    };
+}, {
+    base: string[];
+    startIcon: string;
+    endIcon: string;
+}>>;
+export default _default;

package/dist/Button/style.js

@@ -0,0 +1 @@
+import{n as e}from"../_chunks/dist-C-sN40SQ.js";import t from"../styles/theme/index.js";import n from"../utils/asVariant.js";import r from"../utils/typedKeys.js";var i=Object.keys(t.colors.default),a=(a=t)=>e({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:n(a.colors,()=>({})),variant:{...n(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:[...r(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};

package/dist/Card/Card.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps } from 'solid-js';
+import { VariantProps } from 'tailwind-variants';
+import { default as cardDefaultStyles } from './style';
+type CardVariants = VariantProps<typeof cardDefaultStyles>;
+export type CardProps = {
+    variant?: CardVariants["variant"];
+    class?: string;
+} & ComponentProps<"div">;
+declare const Card: (props: CardProps) => import("solid-js").JSX.Element;
+export default Card;

package/dist/Card/Card.js

@@ -0,0 +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";var u=o(`<div>`),d=o=>{let d=c({variant:`outlined`},o),[f,p]=l(d,[`children`,`class`,`variant`]),m=n(),h=s(()=>{let e={variant:f.variant};return m?m.componentsTV.card(e):t(e)});return(()=>{var t=u();return a(t,i(p,{get class(){return e(h(),f.class)}}),!1,!0),r(t,()=>f.children),t})()};export{d as default};

package/dist/Card/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Card';
+export * from './Card';

package/dist/Card/index.js

@@ -0,0 +1 @@
+import"./Card.js";

package/dist/Card/style.d.ts

@@ -0,0 +1,46 @@
+import { Theme } from '../styles/theme';
+export declare const card: (theme?: Theme) => import('tailwind-variants').TVReturnType<{
+    variant: {
+        filled: string[];
+        elevated: string[];
+        outlined: string[];
+        ghost: string[];
+    };
+}, undefined, string[], {
+    variant: {
+        filled: string[];
+        elevated: string[];
+        outlined: string[];
+        ghost: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnTypeLike<{
+    variant: {
+        filled: string[];
+        elevated: string[];
+        outlined: string[];
+        ghost: string[];
+    };
+}, undefined>>;
+declare const _default: import('tailwind-variants').TVReturnType<{
+    variant: {
+        filled: string[];
+        elevated: string[];
+        outlined: string[];
+        ghost: string[];
+    };
+}, undefined, string[], {
+    variant: {
+        filled: string[];
+        elevated: string[];
+        outlined: string[];
+        ghost: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnTypeLike<{
+    variant: {
+        filled: string[];
+        elevated: string[];
+        outlined: string[];
+        ghost: string[];
+    };
+}, undefined>>;
+export default _default;

package/dist/Card/style.js

@@ -0,0 +1 @@
+import{n as e}from"../_chunks/dist-C-sN40SQ.js";import t from"../styles/theme/index.js";var n=(n=t)=>e({base:[n.rounded.small],variants:{variant:{filled:[`bg-neutral-100 dark:bg-neutral-900`,n.typography.colors.textSecondary,n.shadow.small],elevated:[`bg-white dark:bg-neutral-800`,`dark:border dark:border-white/10`,n.shadow.medium],outlined:[`bg-transparent border overflow-hidden`,n.divider],ghost:[`bg-transparent`]}}}),r=n();export{n as card,r as default};

package/dist/CardContent/CardContent.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps } from 'solid-js';
+export type CardContentProps = {
+    class?: string;
+} & ComponentProps<"div">;
+declare const CardContent: (props: CardContentProps) => import("solid-js").JSX.Element;
+export default CardContent;

package/dist/CardContent/CardContent.js

@@ -0,0 +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,splitProps as c}from"solid-js";var l=o(`<div>`),u=o=>{let[u,d]=c(o,[`children`,`class`]),f=n(),p=s(()=>f?f.componentsTV.cardContent():t());return(()=>{var t=l();return a(t,i(d,{get class(){return e(p(),u.class)}}),!1,!0),r(t,()=>u.children),t})()};export{u as default};

package/dist/CardContent/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './CardContent';
+export * from './CardContent';

package/dist/CardContent/index.js

@@ -0,0 +1 @@
+import"./CardContent.js";

package/dist/CardContent/style.d.ts

@@ -0,0 +1,4 @@
+import { Theme } from '../styles/theme';
+export declare const cardContent: (theme?: Theme) => import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnTypeLike<unknown, undefined>>;
+declare const _default: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnTypeLike<unknown, undefined>>;
+export default _default;