@edo-w/flatline-solid 0.2.1 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edo-w/flatline-solid",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/edo-w/flatline.git"
@@ -8,23 +8,46 @@
   "author": "https://github.com/juanka881",
   "type": "module",
   "exports": {
-    ".": "./dist/src/index.js",
-    "./*": "./dist/src/*.js"
+    ".": "./dist/index.js",
+    "./button": "./dist/button/index.js",
+    "./card": "./dist/card/index.js",
+    "./checkbox": "./dist/checkbox/index.js",
+    "./combobox": "./dist/combobox/index.js",
+    "./dialog": "./dist/dialog/index.js",
+    "./dropdown-menu": "./dist/dropdown-menu/index.js",
+    "./input": "./dist/input/index.js",
+    "./label": "./dist/label/index.js",
+    "./progress-bar": "./dist/progress-bar/index.js",
+    "./radio": "./dist/radio/index.js",
+    "./select": "./dist/select/index.js",
+    "./slider": "./dist/slider/index.js",
+    "./spinner": "./dist/spinner/index.js",
+    "./switch": "./dist/switch/index.js",
+    "./table": "./dist/table/index.js",
+    "./tabs": "./dist/tabs/index.js",
+    "./textarea": "./dist/textarea/index.js",
+    "./xstack": "./dist/xstack/index.js",
+    "./ystack": "./dist/ystack/index.js",
+    "./package.json": "./package.json"
   },
   "imports": {
     "#src/*": "./dist/src/*"
   },
   "files": [
-    "./dist/src/*"
+    "./dist/*"
   ],
   "devDependencies": {
     "@biomejs/biome": "^2.4.11",
+    "@tsdown/css": "^0.21.8",
     "@types/bun": "latest",
     "@typescript/native-preview": "^7.0.0-dev.20260409.1",
     "cpx2": "^8.0.0",
     "rimraf": "^6.1.2",
+    "rollup-plugin-postcss": "^4.0.2",
     "storybook": "^10.3.5",
     "storybook-solidjs-vite": "^10.0.12",
+    "tsdown": "^0.21.8",
+    "unplugin-solid": "^1.0.0",
     "vite": "^7.2.6",
     "vite-plugin-solid": "^2.11.12"
   },
@@ -33,6 +56,9 @@
     "clsx": "^2.1.1",
     "solid-js": "^1.9.12"
   },
+  "inlinedDependencies": {
+    "clsx": "2.1.1"
+  },
   "scripts": {
     "clean": "rimraf --glob dist storybook-static edo-w-flatline-solid-*.tgz",
     "fmt": "biome format --write",
@@ -42,7 +68,7 @@
     "dev": "storybook dev -p 6006",
     "build": "pnpm run build:lib && pnpm run build:storybook",
     "build:storybook": "storybook build",
-    "build:lib": "tsgo --build tsconfig.build.json && cpx \"src/**/*.css\" \"dist/src\"",
+    "build:lib": "tsdown && cpx \"src/style/*.css\" dist/style",
     "pack": "npm pack"
   }
 }

package/dist/src/components/button/button.css

@@ -1,156 +0,0 @@
-@layer components {
-	.fl-button {
-		--fl-button-inner-gap: var(--fl-size-2);
-		--fl-button-pad-x: var(--fl-size-2);
-		--fl-button-pad-y: var(--fl-size-1-5);
-		--fl-button-active-translate-y: 1px;
-		--fl-button-bg-color: var(--fl-color-gray-100);
-		--fl-button-bg-hover-color: color-mix(in oklab, var(--fl-button-bg-color), black 5%);
-		--fl-button-bg-active-color: color-mix(in oklab, var(--fl-button-bg-color), white 10%);
-		--fl-button-border-color: color-mix(in oklab, var(--fl-button-bg-color), black 20%);
-		--fl-button-border-size: var(--fl-border-size, 1px);
-		--fl-button-border-radius: var(--fl-border-radius);
-		--fl-button-text-color: var(--fl-text-color);
-		--fl-button-shadow: var(--fl-shadow-md);
-
-		/* reset */
-		appearance: none;
-
-		/* layout */
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-
-		/* spacing */
-		gap: var(--fl-button-inner-gap);
-		padding-inline: var(--fl-button-pad-x);
-		padding-block: var(--fl-button-pad-y);
-
-		/* background */
-		background: var(--fl-button-bg-color);
-		border: var(--fl-button-border-size) solid var(--fl-button-border-color);
-		border-radius: var(--fl-button-border-radius);
-
-		/* text */
-		color: var(--fl-button-text-color);
-		white-space: nowrap;
-		font-weight: var(--fl-font-weight-medium);
-
-		/* pointer */
-		cursor: pointer;
-
-		/* effects */
-		box-shadow: var(--fl-button-shadow);
-	}
-
-	/* focus-visible state */
-	.fl-button:focus-visible {
-		outline: var(--fl-focus-ring-size) solid var(--fl-focus-ring-color);
-		outline-offset: var(--fl-focus-ring-offset);
-	}
-
-	/* hover state */
-	.fl-button:hover:not(:disabled) {
-		background: var(--fl-button-bg-hover-color);
-	}
-
-	/* active state */
-	.fl-button:active:not(:disabled) {
-		background: var(--fl-button-bg-active-color);
-		transform: translateY(var(--fl-button-active-translate-y));
-	}
-
-	/* disabled state */
-	.fl-button:disabled {
-		opacity: var(--fl-disabled-opacity);
-		cursor: var(--fl-disabled-cursor);
-	}
-
-	/* solid primary variant */
-	.fl-button.--variant-solid.--color-primary {
-		--fl-button-bg-color: var(--fl-primary-color);
-		--fl-button-text-color: var(--fl-primary-text-color);
-	}
-
-	/* solid secondary variant */
-	.fl-button.--variant-solid.--color-secondary {
-		--fl-button-bg-color: var(--fl-secondary-color);
-		--fl-button-text-color: var(--fl-secondary-text-color);
-	}
-
-	/* solid success variant */
-	.fl-button.--variant-solid.--color-success {
-		--fl-button-bg-color: var(--fl-success-color);
-		--fl-button-text-color: var(--fl-success-text-color);
-	}
-
-	/* solid danger variant */
-	.fl-button.--variant-solid.--color-danger {
-		--fl-button-bg-color: var(--fl-danger-color);
-		--fl-button-text-color: var(--fl-danger-text-color);
-	}
-
-	/* light variant */
-	.fl-button.--variant-light {
-		box-shadow: unset;
-	}
-
-	/* light primary variant */
-	.fl-button.--variant-light.--color-primary {
-		--fl-button-bg-color: color-mix(in oklab, var(--fl-body-bg-color), black 8%);
-		--fl-button-text-color: var(--fl-primary-color);
-		--fl-button-border-color: color-mix(in oklab, var(--fl-body-bg-color), black 8%);
-	}
-
-	/* light secondary variant */
-	.fl-button.--variant-light.--color-secondary {
-		--fl-button-bg-color: color-mix(in oklab, var(--fl-body-bg-color), black 8%);
-		--fl-button-text-color: var(--fl-secondary-text-color);
-		--fl-button-border-color: color-mix(in oklab, var(--fl-body-bg-color), black 8%);
-	}
-
-	/* light success variant */
-	.fl-button.--variant-light.--color-success {
-		--fl-button-bg-color: color-mix(in oklab, var(--fl-body-bg-color), black 8%);
-		--fl-button-text-color: var(--fl-success-color);
-		--fl-button-border-color: color-mix(in oklab, var(--fl-body-bg-color), black 8%);
-	}
-
-	/* light danger variant */
-	.fl-button.--variant-light.--color-danger {
-		--fl-button-bg-color: color-mix(in oklab, var(--fl-body-bg-color), black 8%);
-		--fl-button-text-color: var(--fl-danger-color);
-		--fl-button-border-color: color-mix(in oklab, var(--fl-body-bg-color), black 8%);
-	}
-
-	/* ghost variant */
-	.fl-button.--variant-ghost {
-		background: transparent;
-		border-color: transparent;
-		box-shadow: unset;
-	}
-
-	/* ghost primary variant */
-	.fl-button.--variant-ghost.--color-primary {
-		--fl-button-text-color: var(--fl-primary-color);
-		--fl-button-bg-hover-color: color-mix(in oklab, var(--fl-primary-color), var(--fl-body-bg-color) 85%);
-	}
-
-	/* ghost secondary variant */
-	.fl-button.--variant-ghost.--color-secondary {
-		--fl-button-text-color: var(--fl-secondary-text-color);
-		--fl-button-bg-hover-color: color-mix(in oklab, var(--fl-secondary-text-color), var(--fl-body-bg-color) 90%);
-	}
-
-	/* ghost success variant */
-	.fl-button.--variant-ghost.--color-success {
-		--fl-button-text-color: var(--fl-success-color);
-		--fl-button-bg-hover-color: color-mix(in oklab, var(--fl-success-color), var(--fl-body-bg-color) 85%);
-	}
-
-	/* ghost danger variant */
-	.fl-button.--variant-ghost.--color-danger {
-		--fl-button-text-color: var(--fl-danger-color);
-		--fl-button-bg-hover-color: color-mix(in oklab, var(--fl-danger-color), var(--fl-body-bg-color) 85%);
-	}
-}

package/dist/src/components/button/button.d.ts

@@ -1,9 +0,0 @@
-import { type JSX } from 'solid-js';
-import { type ButtonColor, type ButtonVariant } from './class';
-import './button.css';
-export type ButtonBaseProps = JSX.ButtonHTMLAttributes<HTMLButtonElement>;
-export interface ButtonProps extends ButtonBaseProps {
-    variant?: ButtonVariant;
-    color?: ButtonColor;
-}
-export declare function Button(props: ButtonProps): JSX.Element;

package/dist/src/components/button/button.jsx

@@ -1,21 +0,0 @@
-import clsx from 'clsx/lite';
-import { mergeProps, splitProps } from 'solid-js';
-import { buttonClass } from './class';
-import './button.css';
-export function Button(props) {
-    const merged = mergeProps({
-        type: 'button',
-        variant: 'solid',
-        color: 'primary',
-    }, props);
-    const [local, rest] = splitProps(merged, ['class', 'children', 'variant', 'color']);
-    const rootClass = () => {
-        const variantClass = buttonClass.variant[local.variant];
-        const colorClass = buttonClass.color[local.color];
-        return clsx(buttonClass.root, variantClass, colorClass, local.class);
-    };
-    return (<button class={rootClass()} {...rest}>
-			{local.children}
-		</button>);
-}
-//# sourceMappingURL=button.jsx.map

package/dist/src/components/button/button.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.jsx","sourceRoot":"","sources":["../../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAY,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC5D,OAAO,EAAwC,WAAW,EAAE,MAAM,SAAS,CAAC;AAC5E,OAAO,cAAc,CAAC;AAStB,MAAM,UAAU,MAAM,CAAC,KAAkB;IACxC,MAAM,MAAM,GAAG,UAAU,CACxB;QACC,IAAI,EAAE,QAAQ;QACd,OAAO,EAAE,OAAO;QAChB,KAAK,EAAE,SAAS;KACP,EACV,KAAK,CACL,CAAC;IACF,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAEpF,MAAM,SAAS,GAAG,GAAG,EAAE;QACtB,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACxD,MAAM,UAAU,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QAElD,OAAO,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACtE,CAAC,CAAC;IAEF,OAAO,CACN,CAAC,MAAM,CACN,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC,CACnB,IAAI,IAAI,CAAC,CAET;GAAA,CAAC,KAAK,CAAC,QAAQ,CAChB;EAAA,EAAE,MAAM,CAAC,CACT,CAAC;AACH,CAAC","sourcesContent":["import clsx from 'clsx/lite';\nimport { type JSX, mergeProps, splitProps } from 'solid-js';\nimport { type ButtonColor, type ButtonVariant, buttonClass } from './class';\nimport './button.css';\n\nexport type ButtonBaseProps = JSX.ButtonHTMLAttributes<HTMLButtonElement>;\n\nexport interface ButtonProps extends ButtonBaseProps {\n\tvariant?: ButtonVariant;\n\tcolor?: ButtonColor;\n}\n\nexport function Button(props: ButtonProps) {\n\tconst merged = mergeProps(\n\t\t{\n\t\t\ttype: 'button',\n\t\t\tvariant: 'solid',\n\t\t\tcolor: 'primary',\n\t\t} as const,\n\t\tprops,\n\t);\n\tconst [local, rest] = splitProps(merged, ['class', 'children', 'variant', 'color']);\n\n\tconst rootClass = () => {\n\t\tconst variantClass = buttonClass.variant[local.variant];\n\t\tconst colorClass = buttonClass.color[local.color];\n\n\t\treturn clsx(buttonClass.root, variantClass, colorClass, local.class);\n\t};\n\n\treturn (\n\t\t<button\n\t\t\tclass={rootClass()}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{local.children}\n\t\t</button>\n\t);\n}\n"]}

package/dist/src/components/button/class.d.ts

@@ -1,16 +0,0 @@
-export declare const buttonClass: {
-    readonly root: 'fl-button';
-    readonly variant: {
-        readonly solid: '--variant-solid';
-        readonly light: '--variant-light';
-        readonly ghost: '--variant-ghost';
-    };
-    readonly color: {
-        readonly primary: '--color-primary';
-        readonly secondary: '--color-secondary';
-        readonly success: '--color-success';
-        readonly danger: '--color-danger';
-    };
-};
-export type ButtonVariant = keyof typeof buttonClass.variant;
-export type ButtonColor = keyof typeof buttonClass.color;

package/dist/src/components/button/class.js

@@ -1,15 +0,0 @@
-export const buttonClass = {
-    root: 'fl-button',
-    variant: {
-        solid: '--variant-solid',
-        light: '--variant-light',
-        ghost: '--variant-ghost',
-    },
-    color: {
-        primary: '--color-primary',
-        secondary: '--color-secondary',
-        success: '--color-success',
-        danger: '--color-danger',
-    },
-};
-//# sourceMappingURL=class.js.map

package/dist/src/components/button/class.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"class.js","sourceRoot":"","sources":["../../../../src/components/button/class.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG;IAC1B,IAAI,EAAE,WAAW;IACjB,OAAO,EAAE;QACR,KAAK,EAAE,iBAAiB;QACxB,KAAK,EAAE,iBAAiB;QACxB,KAAK,EAAE,iBAAiB;KACxB;IACD,KAAK,EAAE;QACN,OAAO,EAAE,iBAAiB;QAC1B,SAAS,EAAE,mBAAmB;QAC9B,OAAO,EAAE,iBAAiB;QAC1B,MAAM,EAAE,gBAAgB;KACxB;CACQ,CAAC","sourcesContent":["export const buttonClass = {\n\troot: 'fl-button',\n\tvariant: {\n\t\tsolid: '--variant-solid',\n\t\tlight: '--variant-light',\n\t\tghost: '--variant-ghost',\n\t},\n\tcolor: {\n\t\tprimary: '--color-primary',\n\t\tsecondary: '--color-secondary',\n\t\tsuccess: '--color-success',\n\t\tdanger: '--color-danger',\n\t},\n} as const;\n\nexport type ButtonVariant = keyof typeof buttonClass.variant;\nexport type ButtonColor = keyof typeof buttonClass.color;\n"]}

package/dist/src/components/button/index.d.ts

@@ -1,2 +0,0 @@
-export * from './button';
-export * from './class';

package/dist/src/components/button/index.js

@@ -1,3 +0,0 @@
-export * from './button';
-export * from './class';
-//# sourceMappingURL=index.js.map

package/dist/src/components/button/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC","sourcesContent":["export * from './button';\nexport * from './class';\n"]}

package/dist/src/components/card/card-action.css

@@ -1,15 +0,0 @@
-@layer components {
-	.fl-card_action {
-		/* layout */
-		grid-column: 2;
-		grid-row: 1 / 3;
-		display: inline-flex;
-		align-self: start;
-		justify-self: end;
-		align-items: center;
-		justify-content: center;
-
-		/* text */
-		font-size: var(--fl-text-size-sm);
-	}
-}

package/dist/src/components/card/card-content.css

@@ -1,13 +0,0 @@
-@layer components {
-	.fl-card_content {
-		--fl-card-content-gap: 0;
-
-		/* layout */
-		display: flex;
-		flex-direction: column;
-		align-items: stretch;
-
-		/* spacing */
-		gap: calc(var(--fl-card-content-gap) * var(--fl-size-unit));
-	}
-}

package/dist/src/components/card/card-footer.css

@@ -1,39 +0,0 @@
-@layer components {
-	.fl-card_footer {
-		--fl-card-footer-gap: var(--fl-size-2);
-
-		/* layout */
-		display: flex;
-		flex-direction: row;
-		align-items: center;
-		justify-content: flex-start;
-
-		/* spacing */
-		gap: calc(var(--fl-card-footer-gap) * var(--fl-size-unit));
-	}
-
-	/* justify center */
-	.fl-card_footer.--justify-center {
-		justify-content: center;
-	}
-
-	/* justify right */
-	.fl-card_footer.--justify-right {
-		justify-content: flex-end;
-	}
-
-	/* justify space-between */
-	.fl-card_footer.--justify-space-between {
-		justify-content: space-between;
-	}
-
-	/* justify space-around */
-	.fl-card_footer.--justify-space-around {
-		justify-content: space-around;
-	}
-
-	/* justify space-evenly */
-	.fl-card_footer.--justify-space-evenly {
-		justify-content: space-evenly;
-	}
-}

package/dist/src/components/card/card-header.css

@@ -1,13 +0,0 @@
-@layer components {
-	.fl-card_header {
-		/* layout */
-		display: grid;
-		grid-template-columns: minmax(0, 1fr) auto;
-		grid-template-rows: auto auto;
-		align-items: start;
-
-		/* spacing */
-		column-gap: var(--fl-size-3);
-		row-gap: var(--fl-size-1);
-	}
-}

package/dist/src/components/card/card-root.css

@@ -1,31 +0,0 @@
-@layer components {
-	.fl-card {
-		--fl-card-pad: var(--fl-size-4);
-		--fl-card-bg-color: var(--fl-body-bg-color);
-		--fl-card-border-color: var(--fl-input-border-color);
-		--fl-card-border-size: var(--fl-input-border-size);
-		--fl-card-border-radius: var(--fl-input-border-radius);
-		--fl-card-text-color: var(--fl-body-text-color);
-		--fl-card-shadow: var(--fl-shadow-sm);
-		--fl-card-gap: 6;
-
-		/* layout */
-		display: flex;
-		flex-direction: column;
-
-		/* spacing */
-		gap: calc(var(--fl-card-gap) * var(--fl-size-unit));
-		padding: var(--fl-card-pad);
-
-		/* background */
-		background: var(--fl-card-bg-color);
-		border: var(--fl-card-border-size) solid var(--fl-card-border-color);
-		border-radius: var(--fl-card-border-radius);
-
-		/* text */
-		color: var(--fl-card-text-color);
-
-		/* effects */
-		box-shadow: var(--fl-card-shadow);
-	}
-}

package/dist/src/components/card/card-subtitle.css

@@ -1,12 +0,0 @@
-@layer components {
-	.fl-card_subtitle {
-		/* layout */
-		grid-column: 1;
-		grid-row: 2;
-
-		/* text */
-		font: var(--fl-font-subtitle);
-		font-size: var(--fl-text-size-sm);
-		color: var(--fl-body-muted-text-color);
-	}
-}

package/dist/src/components/card/card-title.css

@@ -1,33 +0,0 @@
-@layer components {
-	.fl-card_title {
-		--fl-card-title-color: var(--fl-body-text-color);
-
-		/* layout */
-		grid-column: 1;
-		grid-row: 1;
-
-		/* text */
-		font: var(--fl-font-title);
-		color: var(--fl-card-title-color);
-	}
-
-	/* primary color */
-	.fl-card_title.--color-primary {
-		--fl-card-title-color: var(--fl-primary-color);
-	}
-
-	/* secondary color */
-	.fl-card_title.--color-secondary {
-		--fl-card-title-color: var(--fl-secondary-text-color);
-	}
-
-	/* success color */
-	.fl-card_title.--color-success {
-		--fl-card-title-color: var(--fl-success-color);
-	}
-
-	/* danger color */
-	.fl-card_title.--color-danger {
-		--fl-card-title-color: var(--fl-danger-color);
-	}
-}

package/dist/src/components/card/card.d.ts

@@ -1,42 +0,0 @@
-import { type JSX } from 'solid-js';
-import { type CardFooterJustify, type CardTitleColor } from './class';
-import './card-root.css';
-import './card-header.css';
-import './card-title.css';
-import './card-subtitle.css';
-import './card-action.css';
-import './card-content.css';
-import './card-footer.css';
-export type CardBaseProps = JSX.HTMLAttributes<HTMLDivElement>;
-export type CardHeaderProps = JSX.HTMLAttributes<HTMLDivElement>;
-export type CardSubtitleProps = JSX.HTMLAttributes<HTMLParagraphElement>;
-export type CardActionProps = JSX.HTMLAttributes<HTMLDivElement>;
-export interface CardProps extends CardBaseProps {
-    gap?: number | string;
-}
-export interface CardTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {
-    color?: CardTitleColor;
-}
-export interface CardContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
-    gap?: number | string;
-}
-export interface CardFooterProps extends JSX.HTMLAttributes<HTMLDivElement> {
-    gap?: number | string;
-    justify?: CardFooterJustify;
-}
-declare function CardRoot(props: CardProps): JSX.Element;
-export declare function CardHeader(props: CardHeaderProps): JSX.Element;
-export declare function CardTitle(props: CardTitleProps): JSX.Element;
-export declare function CardSubtitle(props: CardSubtitleProps): JSX.Element;
-export declare function CardAction(props: CardActionProps): JSX.Element;
-export declare function CardContent(props: CardContentProps): JSX.Element;
-export declare function CardFooter(props: CardFooterProps): JSX.Element;
-export declare const Card: typeof CardRoot & {
-    Header: typeof CardHeader;
-    Title: typeof CardTitle;
-    Subtitle: typeof CardSubtitle;
-    Action: typeof CardAction;
-    Content: typeof CardContent;
-    Footer: typeof CardFooter;
-};
-export {};

package/dist/src/components/card/card.jsx

@@ -1,86 +0,0 @@
-import clsx from 'clsx/lite';
-import { splitProps } from 'solid-js';
-import { cardClass } from './class';
-import './card-root.css';
-import './card-header.css';
-import './card-title.css';
-import './card-subtitle.css';
-import './card-action.css';
-import './card-content.css';
-import './card-footer.css';
-function mergeStyleVar(style, variable, value) {
-    if (typeof style === 'string') {
-        if (value === undefined) {
-            return style;
-        }
-        return `${variable}: ${value}; ${style}`;
-    }
-    return {
-        [variable]: value,
-        ...style,
-    };
-}
-function CardRoot(props) {
-    const [local, rest] = splitProps(props, ['class', 'children', 'gap', 'style']);
-    const rootClass = () => clsx(cardClass.root, local.class);
-    return (<div class={rootClass()} style={mergeStyleVar(local.style, cardClass.rootGapVar, local.gap)} {...rest}>
-			{local.children}
-		</div>);
-}
-export function CardHeader(props) {
-    const [local, rest] = splitProps(props, ['class', 'children']);
-    const rootClass = () => clsx(cardClass.header, local.class);
-    return (<div class={rootClass()} {...rest}>
-			{local.children}
-		</div>);
-}
-export function CardTitle(props) {
-    const [local, rest] = splitProps(props, ['class', 'children', 'color']);
-    const rootClass = () => {
-        const colorClass = local.color ? cardClass.titleColor[local.color] : undefined;
-        return clsx(cardClass.title, colorClass, local.class);
-    };
-    return (<h3 class={rootClass()} {...rest}>
-			{local.children}
-		</h3>);
-}
-export function CardSubtitle(props) {
-    const [local, rest] = splitProps(props, ['class', 'children']);
-    const rootClass = () => clsx(cardClass.subtitle, local.class);
-    return (<p class={rootClass()} {...rest}>
-			{local.children}
-		</p>);
-}
-export function CardAction(props) {
-    const [local, rest] = splitProps(props, ['class', 'children']);
-    const rootClass = () => clsx(cardClass.action, local.class);
-    return (<div class={rootClass()} {...rest}>
-			{local.children}
-		</div>);
-}
-export function CardContent(props) {
-    const [local, rest] = splitProps(props, ['class', 'children', 'gap', 'style']);
-    const rootClass = () => clsx(cardClass.content, local.class);
-    return (<div class={rootClass()} style={mergeStyleVar(local.style, cardClass.contentGapVar, local.gap)} {...rest}>
-			{local.children}
-		</div>);
-}
-export function CardFooter(props) {
-    const [local, rest] = splitProps(props, ['class', 'children', 'gap', 'justify', 'style']);
-    const rootClass = () => {
-        const justifyClass = local.justify ? cardClass.footerJustify[local.justify] : undefined;
-        return clsx(cardClass.footer, justifyClass, local.class);
-    };
-    return (<div class={rootClass()} style={mergeStyleVar(local.style, cardClass.footerGapVar, local.gap)} {...rest}>
-			{local.children}
-		</div>);
-}
-export const Card = Object.assign(CardRoot, {
-    Header: CardHeader,
-    Title: CardTitle,
-    Subtitle: CardSubtitle,
-    Action: CardAction,
-    Content: CardContent,
-    Footer: CardFooter,
-});
-//# sourceMappingURL=card.jsx.map

package/dist/src/components/card/card.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"card.jsx","sourceRoot":"","sources":["../../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAY,UAAU,EAAE,MAAM,UAAU,CAAC;AAChD,OAAO,EAA+C,SAAS,EAAE,MAAM,SAAS,CAAC;AACjF,OAAO,iBAAiB,CAAC;AACzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,mBAAmB,CAAC;AAE3B,SAAS,aAAa,CACrB,KAA6C,EAC7C,QAAgB,EAChB,KAAkC;IAElC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC/B,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACzB,OAAO,KAAK,CAAC;QACd,CAAC;QAED,OAAO,GAAG,QAAQ,KAAK,KAAK,KAAK,KAAK,EAAE,CAAC;IAC1C,CAAC;IAED,OAAO;QACN,CAAC,QAAQ,CAAC,EAAE,KAAK;QACjB,GAAG,KAAK;KACR,CAAC;AACH,CAAC;AAwBD,SAAS,QAAQ,CAAC,KAAgB;IACjC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IAE/E,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IAE1D,OAAO,CACN,CAAC,GAAG,CACH,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC,CACnB,KAAK,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CACnE,IAAI,IAAI,CAAC,CAET;GAAA,CAAC,KAAK,CAAC,QAAQ,CAChB;EAAA,EAAE,GAAG,CAAC,CACN,CAAC;AACH,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,KAAsB;IAChD,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAE/D,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IAE5D,OAAO,CACN,CAAC,GAAG,CACH,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC,CACnB,IAAI,IAAI,CAAC,CAET;GAAA,CAAC,KAAK,CAAC,QAAQ,CAChB;EAAA,EAAE,GAAG,CAAC,CACN,CAAC;AACH,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC9C,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAExE,MAAM,SAAS,GAAG,GAAG,EAAE;QACtB,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAE/E,OAAO,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACvD,CAAC,CAAC;IAEF,OAAO,CACN,CAAC,EAAE,CACF,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC,CACnB,IAAI,IAAI,CAAC,CAET;GAAA,CAAC,KAAK,CAAC,QAAQ,CAChB;EAAA,EAAE,EAAE,CAAC,CACL,CAAC;AACH,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,KAAwB;IACpD,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAE/D,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IAE9D,OAAO,CACN,CAAC,CAAC,CACD,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC,CACnB,IAAI,IAAI,CAAC,CAET;GAAA,CAAC,KAAK,CAAC,QAAQ,CAChB;EAAA,EAAE,CAAC,CAAC,CACJ,CAAC;AACH,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,KAAsB;IAChD,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAE/D,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IAE5D,OAAO,CACN,CAAC,GAAG,CACH,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC,CACnB,IAAI,IAAI,CAAC,CAET;GAAA,CAAC,KAAK,CAAC,QAAQ,CAChB;EAAA,EAAE,GAAG,CAAC,CACN,CAAC;AACH,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAuB;IAClD,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IAE/E,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IAE7D,OAAO,CACN,CAAC,GAAG,CACH,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC,CACnB,KAAK,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,aAAa,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CACtE,IAAI,IAAI,CAAC,CAET;GAAA,CAAC,KAAK,CAAC,QAAQ,CAChB;EAAA,EAAE,GAAG,CAAC,CACN,CAAC;AACH,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,KAAsB;IAChD,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IAE1F,MAAM,SAAS,GAAG,GAAG,EAAE;QACtB,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAExF,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IAC1D,CAAC,CAAC;IAEF,OAAO,CACN,CAAC,GAAG,CACH,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC,CACnB,KAAK,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,YAAY,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CACrE,IAAI,IAAI,CAAC,CAET;GAAA,CAAC,KAAK,CAAC,QAAQ,CAChB;EAAA,EAAE,GAAG,CAAC,CACN,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE;IAC3C,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,SAAS;IAChB,QAAQ,EAAE,YAAY;IACtB,MAAM,EAAE,UAAU;IAClB,OAAO,EAAE,WAAW;IACpB,MAAM,EAAE,UAAU;CAClB,CAAC,CAAC","sourcesContent":["import clsx from 'clsx/lite';\nimport { type JSX, splitProps } from 'solid-js';\nimport { type CardFooterJustify, type CardTitleColor, cardClass } from './class';\nimport './card-root.css';\nimport './card-header.css';\nimport './card-title.css';\nimport './card-subtitle.css';\nimport './card-action.css';\nimport './card-content.css';\nimport './card-footer.css';\n\nfunction mergeStyleVar(\n\tstyle: JSX.CSSProperties | string | undefined,\n\tvariable: string,\n\tvalue: number | string | undefined,\n) {\n\tif (typeof style === 'string') {\n\t\tif (value === undefined) {\n\t\t\treturn style;\n\t\t}\n\n\t\treturn `${variable}: ${value}; ${style}`;\n\t}\n\n\treturn {\n\t\t[variable]: value,\n\t\t...style,\n\t};\n}\n\nexport type CardBaseProps = JSX.HTMLAttributes<HTMLDivElement>;\nexport type CardHeaderProps = JSX.HTMLAttributes<HTMLDivElement>;\nexport type CardSubtitleProps = JSX.HTMLAttributes<HTMLParagraphElement>;\nexport type CardActionProps = JSX.HTMLAttributes<HTMLDivElement>;\n\nexport interface CardProps extends CardBaseProps {\n\tgap?: number | string;\n}\n\nexport interface CardTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {\n\tcolor?: CardTitleColor;\n}\n\nexport interface CardContentProps extends JSX.HTMLAttributes<HTMLDivElement> {\n\tgap?: number | string;\n}\n\nexport interface CardFooterProps extends JSX.HTMLAttributes<HTMLDivElement> {\n\tgap?: number | string;\n\tjustify?: CardFooterJustify;\n}\n\nfunction CardRoot(props: CardProps) {\n\tconst [local, rest] = splitProps(props, ['class', 'children', 'gap', 'style']);\n\n\tconst rootClass = () => clsx(cardClass.root, local.class);\n\n\treturn (\n\t\t<div\n\t\t\tclass={rootClass()}\n\t\t\tstyle={mergeStyleVar(local.style, cardClass.rootGapVar, local.gap)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{local.children}\n\t\t</div>\n\t);\n}\n\nexport function CardHeader(props: CardHeaderProps) {\n\tconst [local, rest] = splitProps(props, ['class', 'children']);\n\n\tconst rootClass = () => clsx(cardClass.header, local.class);\n\n\treturn (\n\t\t<div\n\t\t\tclass={rootClass()}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{local.children}\n\t\t</div>\n\t);\n}\n\nexport function CardTitle(props: CardTitleProps) {\n\tconst [local, rest] = splitProps(props, ['class', 'children', 'color']);\n\n\tconst rootClass = () => {\n\t\tconst colorClass = local.color ? cardClass.titleColor[local.color] : undefined;\n\n\t\treturn clsx(cardClass.title, colorClass, local.class);\n\t};\n\n\treturn (\n\t\t<h3\n\t\t\tclass={rootClass()}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{local.children}\n\t\t</h3>\n\t);\n}\n\nexport function CardSubtitle(props: CardSubtitleProps) {\n\tconst [local, rest] = splitProps(props, ['class', 'children']);\n\n\tconst rootClass = () => clsx(cardClass.subtitle, local.class);\n\n\treturn (\n\t\t<p\n\t\t\tclass={rootClass()}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{local.children}\n\t\t</p>\n\t);\n}\n\nexport function CardAction(props: CardActionProps) {\n\tconst [local, rest] = splitProps(props, ['class', 'children']);\n\n\tconst rootClass = () => clsx(cardClass.action, local.class);\n\n\treturn (\n\t\t<div\n\t\t\tclass={rootClass()}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{local.children}\n\t\t</div>\n\t);\n}\n\nexport function CardContent(props: CardContentProps) {\n\tconst [local, rest] = splitProps(props, ['class', 'children', 'gap', 'style']);\n\n\tconst rootClass = () => clsx(cardClass.content, local.class);\n\n\treturn (\n\t\t<div\n\t\t\tclass={rootClass()}\n\t\t\tstyle={mergeStyleVar(local.style, cardClass.contentGapVar, local.gap)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{local.children}\n\t\t</div>\n\t);\n}\n\nexport function CardFooter(props: CardFooterProps) {\n\tconst [local, rest] = splitProps(props, ['class', 'children', 'gap', 'justify', 'style']);\n\n\tconst rootClass = () => {\n\t\tconst justifyClass = local.justify ? cardClass.footerJustify[local.justify] : undefined;\n\n\t\treturn clsx(cardClass.footer, justifyClass, local.class);\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclass={rootClass()}\n\t\t\tstyle={mergeStyleVar(local.style, cardClass.footerGapVar, local.gap)}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{local.children}\n\t\t</div>\n\t);\n}\n\nexport const Card = Object.assign(CardRoot, {\n\tHeader: CardHeader,\n\tTitle: CardTitle,\n\tSubtitle: CardSubtitle,\n\tAction: CardAction,\n\tContent: CardContent,\n\tFooter: CardFooter,\n});\n"]}

package/dist/src/components/card/class.d.ts

@@ -1,28 +0,0 @@
-export declare const cardClass: {
-    readonly root: 'fl-card';
-    readonly rootGapVar: '--fl-card-gap';
-    readonly header: 'fl-card_header';
-    readonly title: 'fl-card_title';
-    readonly titleColor: {
-        readonly primary: '--color-primary';
-        readonly secondary: '--color-secondary';
-        readonly success: '--color-success';
-        readonly danger: '--color-danger';
-    };
-    readonly subtitle: 'fl-card_subtitle';
-    readonly action: 'fl-card_action';
-    readonly content: 'fl-card_content';
-    readonly contentGapVar: '--fl-card-content-gap';
-    readonly footer: 'fl-card_footer';
-    readonly footerGapVar: '--fl-card-footer-gap';
-    readonly footerJustify: {
-        readonly left: '--justify-left';
-        readonly center: '--justify-center';
-        readonly right: '--justify-right';
-        readonly 'space-between': '--justify-space-between';
-        readonly 'space-around': '--justify-space-around';
-        readonly 'space-evenly': '--justify-space-evenly';
-    };
-};
-export type CardTitleColor = keyof typeof cardClass.titleColor;
-export type CardFooterJustify = keyof typeof cardClass.footerJustify;