@edo-w/flatline-solid 0.2.0

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

@@ -0,0 +1,155 @@
+@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-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(1px);
+	}
+
+	/* 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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1 @@
+{"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

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

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

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,15 @@
+@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

@@ -0,0 +1,13 @@
+@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

@@ -0,0 +1,39 @@
+@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

@@ -0,0 +1,13 @@
+@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

@@ -0,0 +1,31 @@
+@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

@@ -0,0 +1,12 @@
+@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

@@ -0,0 +1,33 @@
+@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

@@ -0,0 +1,42 @@
+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

@@ -0,0 +1,86 @@
+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

@@ -0,0 +1 @@
+{"version":3,"file":"card.jsx","sourceRoot":"","sources":["../../../../src/components/card/card.tsx"],"names":[],"mappings":"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","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

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

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

@@ -0,0 +1,27 @@
+export const cardClass = {
+    root: 'fl-card',
+    rootGapVar: '--fl-card-gap',
+    header: 'fl-card_header',
+    title: 'fl-card_title',
+    titleColor: {
+        primary: '--color-primary',
+        secondary: '--color-secondary',
+        success: '--color-success',
+        danger: '--color-danger',
+    },
+    subtitle: 'fl-card_subtitle',
+    action: 'fl-card_action',
+    content: 'fl-card_content',
+    contentGapVar: '--fl-card-content-gap',
+    footer: 'fl-card_footer',
+    footerGapVar: '--fl-card-footer-gap',
+    footerJustify: {
+        left: '--justify-left',
+        center: '--justify-center',
+        right: '--justify-right',
+        'space-between': '--justify-space-between',
+        'space-around': '--justify-space-around',
+        'space-evenly': '--justify-space-evenly',
+    },
+};
+//# sourceMappingURL=class.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"class.js","sourceRoot":"","sources":["../../../../src/components/card/class.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG;IACxB,IAAI,EAAE,SAAS;IACf,UAAU,EAAE,eAAe;IAC3B,MAAM,EAAE,gBAAgB;IACxB,KAAK,EAAE,eAAe;IACtB,UAAU,EAAE;QACX,OAAO,EAAE,iBAAiB;QAC1B,SAAS,EAAE,mBAAmB;QAC9B,OAAO,EAAE,iBAAiB;QAC1B,MAAM,EAAE,gBAAgB;KACxB;IACD,QAAQ,EAAE,kBAAkB;IAC5B,MAAM,EAAE,gBAAgB;IACxB,OAAO,EAAE,iBAAiB;IAC1B,aAAa,EAAE,uBAAuB;IACtC,MAAM,EAAE,gBAAgB;IACxB,YAAY,EAAE,sBAAsB;IACpC,aAAa,EAAE;QACd,IAAI,EAAE,gBAAgB;QACtB,MAAM,EAAE,kBAAkB;QAC1B,KAAK,EAAE,iBAAiB;QACxB,eAAe,EAAE,yBAAyB;QAC1C,cAAc,EAAE,wBAAwB;QACxC,cAAc,EAAE,wBAAwB;KACxC;CACQ,CAAC","sourcesContent":["export const cardClass = {\n\troot: 'fl-card',\n\trootGapVar: '--fl-card-gap',\n\theader: 'fl-card_header',\n\ttitle: 'fl-card_title',\n\ttitleColor: {\n\t\tprimary: '--color-primary',\n\t\tsecondary: '--color-secondary',\n\t\tsuccess: '--color-success',\n\t\tdanger: '--color-danger',\n\t},\n\tsubtitle: 'fl-card_subtitle',\n\taction: 'fl-card_action',\n\tcontent: 'fl-card_content',\n\tcontentGapVar: '--fl-card-content-gap',\n\tfooter: 'fl-card_footer',\n\tfooterGapVar: '--fl-card-footer-gap',\n\tfooterJustify: {\n\t\tleft: '--justify-left',\n\t\tcenter: '--justify-center',\n\t\tright: '--justify-right',\n\t\t'space-between': '--justify-space-between',\n\t\t'space-around': '--justify-space-around',\n\t\t'space-evenly': '--justify-space-evenly',\n\t},\n} as const;\n\nexport type CardTitleColor = keyof typeof cardClass.titleColor;\nexport type CardFooterJustify = keyof typeof cardClass.footerJustify;\n"]}

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

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

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

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

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

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

package/dist/src/components/checkbox/checkbox-group.css

@@ -0,0 +1,9 @@
+@layer components {
+	.fl-checkbox-group {
+		/* layout */
+		display: grid;
+
+		/* spacing */
+		gap: var(--fl-size-2);
+	}
+}

package/dist/src/components/checkbox/checkbox-group.d.ts

@@ -0,0 +1,3 @@
+import type { CheckboxGroupProps } from './types';
+import './checkbox-group.css';
+export declare function CheckboxGroup(props: CheckboxGroupProps): import("solid-js").JSX.Element;