@edo-w/flatline-solid 0.2.1 → 0.3.0

package/dist/button/index.css

@@ -0,0 +1,124 @@
+@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);
+    appearance: none;
+    justify-content: center;
+    align-items: center;
+    gap: var(--fl-button-inner-gap);
+    padding-inline: var(--fl-button-pad-x);
+    padding-block: var(--fl-button-pad-y);
+    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);
+    color: var(--fl-button-text-color);
+    white-space: nowrap;
+    font-weight: var(--fl-font-weight-medium);
+    cursor: pointer;
+    box-shadow: var(--fl-button-shadow);
+    display: inline-flex;
+  }
+
+  .fl-button:focus-visible {
+    outline: var(--fl-focus-ring-size) solid var(--fl-focus-ring-color);
+    outline-offset: var(--fl-focus-ring-offset);
+  }
+
+  .fl-button:hover:not(:disabled) {
+    background: var(--fl-button-bg-hover-color);
+  }
+
+  .fl-button:active:not(:disabled) {
+    background: var(--fl-button-bg-active-color);
+    transform: translateY(var(--fl-button-active-translate-y));
+  }
+
+  .fl-button:disabled {
+    opacity: var(--fl-disabled-opacity);
+    cursor: var(--fl-disabled-cursor);
+  }
+
+  .fl-button.--variant-solid.--color-primary {
+    --fl-button-bg-color: var(--fl-primary-color);
+    --fl-button-text-color: var(--fl-primary-text-color);
+  }
+
+  .fl-button.--variant-solid.--color-secondary {
+    --fl-button-bg-color: var(--fl-secondary-color);
+    --fl-button-text-color: var(--fl-secondary-text-color);
+  }
+
+  .fl-button.--variant-solid.--color-success {
+    --fl-button-bg-color: var(--fl-success-color);
+    --fl-button-text-color: var(--fl-success-text-color);
+  }
+
+  .fl-button.--variant-solid.--color-danger {
+    --fl-button-bg-color: var(--fl-danger-color);
+    --fl-button-text-color: var(--fl-danger-text-color);
+  }
+
+  .fl-button.--variant-light {
+    box-shadow: unset;
+  }
+
+  .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%);
+  }
+
+  .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%);
+  }
+
+  .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%);
+  }
+
+  .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%);
+  }
+
+  .fl-button.--variant-ghost {
+    box-shadow: unset;
+    background: none;
+    border-color: #0000;
+  }
+
+  .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%);
+  }
+
+  .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%);
+  }
+
+  .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%);
+  }
+
+  .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/button/index.d.ts

@@ -0,0 +1,2 @@
+import { a as ButtonVariant, i as ButtonColor, n as ButtonBaseProps, o as buttonClass, r as ButtonProps, t as Button } from "../index-D-CV7Jz5.js";
+export { Button, ButtonBaseProps, ButtonColor, ButtonProps, ButtonVariant, buttonClass };

package/dist/button/index.js

@@ -0,0 +1,51 @@
+import './index.css';
+import { t as clsx } from "../lite-CiFvU804.js";
+import { insert, mergeProps, spread, template } from "solid-js/web";
+import { mergeProps as mergeProps$1, splitProps } from "solid-js";
+//#region src/components/button/class.ts
+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"
+	}
+};
+//#endregion
+//#region src/components/button/button.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<button>`);
+function Button(props) {
+	const [local, rest] = splitProps(mergeProps$1({
+		type: "button",
+		variant: "solid",
+		color: "primary"
+	}, props), [
+		"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 (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({ get ["class"]() {
+			return rootClass();
+		} }, rest), false, true);
+		insert(_el$, () => local.children);
+		return _el$;
+	})();
+}
+//#endregion
+export { Button, buttonClass };
+
+//# sourceMappingURL=index.js.map

package/dist/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["clsx","JSX","mergeProps","splitProps","ButtonColor","ButtonVariant","buttonClass","ButtonBaseProps","ButtonHTMLAttributes","HTMLButtonElement","ButtonProps","variant","color","Button","props","merged","type","const","local","rest","rootClass","variantClass","colorClass","root","class","_el$","_tmpl$","_$spread","_$mergeProps","_$insert","children"],"sources":["../../src/components/button/class.ts","../../src/components/button/button.tsx"],"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","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"],"mappings":";;;;AAAA,MAAa,cAAc;CAC1B,MAAM;CACN,SAAS;EACR,OAAO;EACP,OAAO;EACP,OAAO;EACP;CACD,OAAO;EACN,SAAS;EACT,WAAW;EACX,SAAS;EACT,QAAQ;EACR;CACD;;;;ACDD,SAAgBa,OAAOC,OAAoB;CAS1C,MAAM,CAACI,OAAOC,QAAQhB,WARPD,aACd;EACCc,MAAM;EACNL,SAAS;EACTC,OAAO;EACP,EACDE,MACA,EACwC;EAAC;EAAS;EAAY;EAAW;EAAQ,CAAC;CAEnF,MAAMM,kBAAkB;EACvB,MAAMC,eAAef,YAAYK,QAAQO,MAAMP;EAC/C,MAAMW,aAAahB,YAAYM,MAAMM,MAAMN;AAE3C,SAAOZ,KAAKM,YAAYiB,MAAMF,cAAcC,YAAYJ,MAAMM,MAAM;;AAGrE,eAAA;EAAA,IAAAC,OAAAC,QAAA;AAAAC,SAAAF,MAAAG,WAAA,EAAA,KAAA,WAAA;AAAA,UAESR,WAAW;KAAA,EACdD,KAAI,EAAA,OAAA,KAAA;AAAAU,SAAAJ,YAEPP,MAAMY,SAAQ;AAAA,SAAAL;KAAA"}

package/dist/card/index.css

@@ -0,0 +1,112 @@
+@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;
+    gap: calc(var(--fl-card-gap) * var(--fl-size-unit));
+    padding: var(--fl-card-pad);
+    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);
+    color: var(--fl-card-text-color);
+    box-shadow: var(--fl-card-shadow);
+    flex-direction: column;
+    display: flex;
+  }
+}
+@layer components {
+  .fl-card_header {
+    align-items: start;
+    column-gap: var(--fl-size-3);
+    row-gap: var(--fl-size-1);
+    grid-template-rows: auto auto;
+    grid-template-columns: minmax(0, 1fr) auto;
+    display: grid;
+  }
+}
+@layer components {
+  .fl-card_title {
+    --fl-card-title-color: var(--fl-body-text-color);
+    font: var(--fl-font-title);
+    color: var(--fl-card-title-color);
+    grid-area: 1 / 1;
+  }
+
+  .fl-card_title.--color-primary {
+    --fl-card-title-color: var(--fl-primary-color);
+  }
+
+  .fl-card_title.--color-secondary {
+    --fl-card-title-color: var(--fl-secondary-text-color);
+  }
+
+  .fl-card_title.--color-success {
+    --fl-card-title-color: var(--fl-success-color);
+  }
+
+  .fl-card_title.--color-danger {
+    --fl-card-title-color: var(--fl-danger-color);
+  }
+}
+@layer components {
+  .fl-card_subtitle {
+    font: var(--fl-font-subtitle);
+    font-size: var(--fl-text-size-sm);
+    color: var(--fl-body-muted-text-color);
+    grid-area: 2 / 1;
+  }
+}
+@layer components {
+  .fl-card_action {
+    font-size: var(--fl-text-size-sm);
+    grid-area: 1 / 2 / 3;
+    justify-content: center;
+    place-self: start end;
+    align-items: center;
+    display: inline-flex;
+  }
+}
+@layer components {
+  .fl-card_content {
+    --fl-card-content-gap: 0;
+    align-items: stretch;
+    gap: calc(var(--fl-card-content-gap) * var(--fl-size-unit));
+    flex-direction: column;
+    display: flex;
+  }
+}
+@layer components {
+  .fl-card_footer {
+    --fl-card-footer-gap: var(--fl-size-2);
+    justify-content: flex-start;
+    align-items: center;
+    gap: calc(var(--fl-card-footer-gap) * var(--fl-size-unit));
+    flex-direction: row;
+    display: flex;
+  }
+
+  .fl-card_footer.--justify-center {
+    justify-content: center;
+  }
+
+  .fl-card_footer.--justify-right {
+    justify-content: flex-end;
+  }
+
+  .fl-card_footer.--justify-space-between {
+    justify-content: space-between;
+  }
+
+  .fl-card_footer.--justify-space-around {
+    justify-content: space-around;
+  }
+
+  .fl-card_footer.--justify-space-evenly {
+    justify-content: space-evenly;
+  }
+}

package/dist/card/index.d.ts

@@ -0,0 +1,68 @@
+import { JSX } from "solid-js";
+
+//#region src/components/card/class.d.ts
+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";
+  };
+};
+type CardTitleColor = keyof typeof cardClass.titleColor;
+type CardFooterJustify = keyof typeof cardClass.footerJustify;
+//#endregion
+//#region src/components/card/card.d.ts
+type CardBaseProps = JSX.HTMLAttributes<HTMLDivElement>;
+type CardHeaderProps = JSX.HTMLAttributes<HTMLDivElement>;
+type CardSubtitleProps = JSX.HTMLAttributes<HTMLParagraphElement>;
+type CardActionProps = JSX.HTMLAttributes<HTMLDivElement>;
+interface CardProps extends CardBaseProps {
+  gap?: number | string;
+}
+interface CardTitleProps extends JSX.HTMLAttributes<HTMLHeadingElement> {
+  color?: CardTitleColor;
+}
+interface CardContentProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  gap?: number | string;
+}
+interface CardFooterProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  gap?: number | string;
+  justify?: CardFooterJustify;
+}
+declare function CardRoot(props: CardProps): JSX.Element;
+declare function CardHeader(props: CardHeaderProps): JSX.Element;
+declare function CardTitle(props: CardTitleProps): JSX.Element;
+declare function CardSubtitle(props: CardSubtitleProps): JSX.Element;
+declare function CardAction(props: CardActionProps): JSX.Element;
+declare function CardContent(props: CardContentProps): JSX.Element;
+declare function CardFooter(props: CardFooterProps): JSX.Element;
+declare const Card: typeof CardRoot & {
+  Header: typeof CardHeader;
+  Title: typeof CardTitle;
+  Subtitle: typeof CardSubtitle;
+  Action: typeof CardAction;
+  Content: typeof CardContent;
+  Footer: typeof CardFooter;
+};
+//#endregion
+export { Card, CardAction, CardActionProps, CardBaseProps, CardContent, CardContentProps, CardFooter, CardFooterJustify, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardSubtitle, CardSubtitleProps, CardTitle, CardTitleColor, CardTitleProps, cardClass };
+//# sourceMappingURL=index.d.ts.map

package/dist/card/index.js

@@ -0,0 +1,181 @@
+import './index.css';
+import { t as clsx } from "../lite-CiFvU804.js";
+import { insert, mergeProps, spread, template } from "solid-js/web";
+import { splitProps } from "solid-js";
+//#region src/components/card/class.ts
+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"
+	}
+};
+//#endregion
+//#region src/components/card/card.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`), _tmpl$2 = /* @__PURE__ */ template(`<h3>`), _tmpl$3 = /* @__PURE__ */ template(`<p>`);
+function mergeStyleVar(style, variable, value) {
+	if (typeof style === "string") {
+		if (value === void 0) 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 (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({
+			get ["class"]() {
+				return rootClass();
+			},
+			get style() {
+				return mergeStyleVar(local.style, cardClass.rootGapVar, local.gap);
+			}
+		}, rest), false, true);
+		insert(_el$, () => local.children);
+		return _el$;
+	})();
+}
+function CardHeader(props) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	const rootClass = () => clsx(cardClass.header, local.class);
+	return (() => {
+		var _el$2 = _tmpl$();
+		spread(_el$2, mergeProps({ get ["class"]() {
+			return rootClass();
+		} }, rest), false, true);
+		insert(_el$2, () => local.children);
+		return _el$2;
+	})();
+}
+function CardTitle(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"children",
+		"color"
+	]);
+	const rootClass = () => {
+		const colorClass = local.color ? cardClass.titleColor[local.color] : void 0;
+		return clsx(cardClass.title, colorClass, local.class);
+	};
+	return (() => {
+		var _el$3 = _tmpl$2();
+		spread(_el$3, mergeProps({ get ["class"]() {
+			return rootClass();
+		} }, rest), false, true);
+		insert(_el$3, () => local.children);
+		return _el$3;
+	})();
+}
+function CardSubtitle(props) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	const rootClass = () => clsx(cardClass.subtitle, local.class);
+	return (() => {
+		var _el$4 = _tmpl$3();
+		spread(_el$4, mergeProps({ get ["class"]() {
+			return rootClass();
+		} }, rest), false, true);
+		insert(_el$4, () => local.children);
+		return _el$4;
+	})();
+}
+function CardAction(props) {
+	const [local, rest] = splitProps(props, ["class", "children"]);
+	const rootClass = () => clsx(cardClass.action, local.class);
+	return (() => {
+		var _el$5 = _tmpl$();
+		spread(_el$5, mergeProps({ get ["class"]() {
+			return rootClass();
+		} }, rest), false, true);
+		insert(_el$5, () => local.children);
+		return _el$5;
+	})();
+}
+function CardContent(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"children",
+		"gap",
+		"style"
+	]);
+	const rootClass = () => clsx(cardClass.content, local.class);
+	return (() => {
+		var _el$6 = _tmpl$();
+		spread(_el$6, mergeProps({
+			get ["class"]() {
+				return rootClass();
+			},
+			get style() {
+				return mergeStyleVar(local.style, cardClass.contentGapVar, local.gap);
+			}
+		}, rest), false, true);
+		insert(_el$6, () => local.children);
+		return _el$6;
+	})();
+}
+function CardFooter(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"children",
+		"gap",
+		"justify",
+		"style"
+	]);
+	const rootClass = () => {
+		const justifyClass = local.justify ? cardClass.footerJustify[local.justify] : void 0;
+		return clsx(cardClass.footer, justifyClass, local.class);
+	};
+	return (() => {
+		var _el$7 = _tmpl$();
+		spread(_el$7, mergeProps({
+			get ["class"]() {
+				return rootClass();
+			},
+			get style() {
+				return mergeStyleVar(local.style, cardClass.footerGapVar, local.gap);
+			}
+		}, rest), false, true);
+		insert(_el$7, () => local.children);
+		return _el$7;
+	})();
+}
+const Card = Object.assign(CardRoot, {
+	Header: CardHeader,
+	Title: CardTitle,
+	Subtitle: CardSubtitle,
+	Action: CardAction,
+	Content: CardContent,
+	Footer: CardFooter
+});
+//#endregion
+export { Card, CardAction, CardContent, CardFooter, CardHeader, CardSubtitle, CardTitle, cardClass };
+
+//# sourceMappingURL=index.js.map

package/dist/card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["clsx","JSX","splitProps","CardFooterJustify","CardTitleColor","cardClass","mergeStyleVar","style","CSSProperties","variable","value","undefined","CardBaseProps","HTMLAttributes","HTMLDivElement","CardHeaderProps","CardSubtitleProps","HTMLParagraphElement","CardActionProps","CardProps","gap","CardTitleProps","HTMLHeadingElement","color","CardContentProps","CardFooterProps","justify","CardRoot","props","local","rest","rootClass","root","class","_el$","_tmpl$","_$spread","_$mergeProps","rootGapVar","_$insert","children","CardHeader","header","_el$2","CardTitle","colorClass","titleColor","title","_el$3","_tmpl$2","CardSubtitle","subtitle","_el$4","_tmpl$3","CardAction","action","_el$5","CardContent","content","_el$6","contentGapVar","CardFooter","justifyClass","footerJustify","footer","_el$7","footerGapVar","Card","Object","assign","Header","Title","Subtitle","Action","Content","Footer"],"sources":["../../src/components/card/class.ts","../../src/components/card/card.tsx"],"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","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"],"mappings":";;;;AAAA,MAAa,YAAY;CACxB,MAAM;CACN,YAAY;CACZ,QAAQ;CACR,OAAO;CACP,YAAY;EACX,SAAS;EACT,WAAW;EACX,SAAS;EACT,QAAQ;EACR;CACD,UAAU;CACV,QAAQ;CACR,SAAS;CACT,eAAe;CACf,QAAQ;CACR,cAAc;CACd,eAAe;EACd,MAAM;EACN,QAAQ;EACR,OAAO;EACP,iBAAiB;EACjB,gBAAgB;EAChB,gBAAgB;EAChB;CACD;;;;ACdD,SAASM,cACRC,OACAE,UACAC,OACC;AACD,KAAI,OAAOH,UAAU,UAAU;AAC9B,MAAIG,UAAUC,KAAAA,EACb,QAAOJ;AAGR,SAAO,GAAGE,SAAQ,IAAKC,MAAK,IAAKH;;AAGlC,QAAO;GACLE,WAAWC;EACZ,GAAGH;EACH;;AAyBF,SAASoB,SAASC,OAAkB;CACnC,MAAM,CAACC,OAAOC,QAAQ5B,WAAW0B,OAAO;EAAC;EAAS;EAAY;EAAO;EAAQ,CAAC;CAE9E,MAAMG,kBAAkB/B,KAAKK,UAAU2B,MAAMH,MAAMI,MAAM;AAEzD,eAAA;EAAA,IAAAC,OAAAC,QAAA;AAAAC,SAAAF,MAAAG,WAAA;GAAA,KAAA,WAAA;AAAA,WAESN,WAAW;;GAAA,IAClBxB,QAAK;AAAA,WAAED,cAAcuB,MAAMtB,OAAOF,UAAUiC,YAAYT,MAAMT,IAAI;;GAAA,EAC9DU,KAAI,EAAA,OAAA,KAAA;AAAAS,SAAAL,YAEPL,MAAMW,SAAQ;AAAA,SAAAN;KAAA;;AAKlB,SAAgBO,WAAWb,OAAwB;CAClD,MAAM,CAACC,OAAOC,QAAQ5B,WAAW0B,OAAO,CAAC,SAAS,WAAW,CAAC;CAE9D,MAAMG,kBAAkB/B,KAAKK,UAAUqC,QAAQb,MAAMI,MAAM;AAE3D,eAAA;EAAA,IAAAU,QAAAR,QAAA;AAAAC,SAAAO,OAAAN,WAAA,EAAA,KAAA,WAAA;AAAA,UAESN,WAAW;KAAA,EACdD,KAAI,EAAA,OAAA,KAAA;AAAAS,SAAAI,aAEPd,MAAMW,SAAQ;AAAA,SAAAG;KAAA;;AAKlB,SAAgBC,UAAUhB,OAAuB;CAChD,MAAM,CAACC,OAAOC,QAAQ5B,WAAW0B,OAAO;EAAC;EAAS;EAAY;EAAQ,CAAC;CAEvE,MAAMG,kBAAkB;EACvB,MAAMc,aAAahB,MAAMN,QAAQlB,UAAUyC,WAAWjB,MAAMN,SAASZ,KAAAA;AAErE,SAAOX,KAAKK,UAAU0C,OAAOF,YAAYhB,MAAMI,MAAM;;AAGtD,eAAA;EAAA,IAAAe,QAAAC,SAAA;AAAAb,SAAAY,OAAAX,WAAA,EAAA,KAAA,WAAA;AAAA,UAESN,WAAW;KAAA,EACdD,KAAI,EAAA,OAAA,KAAA;AAAAS,SAAAS,aAEPnB,MAAMW,SAAQ;AAAA,SAAAQ;KAAA;;AAKlB,SAAgBE,aAAatB,OAA0B;CACtD,MAAM,CAACC,OAAOC,QAAQ5B,WAAW0B,OAAO,CAAC,SAAS,WAAW,CAAC;CAE9D,MAAMG,kBAAkB/B,KAAKK,UAAU8C,UAAUtB,MAAMI,MAAM;AAE7D,eAAA;EAAA,IAAAmB,QAAAC,SAAA;AAAAjB,SAAAgB,OAAAf,WAAA,EAAA,KAAA,WAAA;AAAA,UAESN,WAAW;KAAA,EACdD,KAAI,EAAA,OAAA,KAAA;AAAAS,SAAAa,aAEPvB,MAAMW,SAAQ;AAAA,SAAAY;KAAA;;AAKlB,SAAgBE,WAAW1B,OAAwB;CAClD,MAAM,CAACC,OAAOC,QAAQ5B,WAAW0B,OAAO,CAAC,SAAS,WAAW,CAAC;CAE9D,MAAMG,kBAAkB/B,KAAKK,UAAUkD,QAAQ1B,MAAMI,MAAM;AAE3D,eAAA;EAAA,IAAAuB,QAAArB,QAAA;AAAAC,SAAAoB,OAAAnB,WAAA,EAAA,KAAA,WAAA;AAAA,UAESN,WAAW;KAAA,EACdD,KAAI,EAAA,OAAA,KAAA;AAAAS,SAAAiB,aAEP3B,MAAMW,SAAQ;AAAA,SAAAgB;KAAA;;AAKlB,SAAgBC,YAAY7B,OAAyB;CACpD,MAAM,CAACC,OAAOC,QAAQ5B,WAAW0B,OAAO;EAAC;EAAS;EAAY;EAAO;EAAQ,CAAC;CAE9E,MAAMG,kBAAkB/B,KAAKK,UAAUqD,SAAS7B,MAAMI,MAAM;AAE5D,eAAA;EAAA,IAAA0B,QAAAxB,QAAA;AAAAC,SAAAuB,OAAAtB,WAAA;GAAA,KAAA,WAAA;AAAA,WAESN,WAAW;;GAAA,IAClBxB,QAAK;AAAA,WAAED,cAAcuB,MAAMtB,OAAOF,UAAUuD,eAAe/B,MAAMT,IAAI;;GAAA,EACjEU,KAAI,EAAA,OAAA,KAAA;AAAAS,SAAAoB,aAEP9B,MAAMW,SAAQ;AAAA,SAAAmB;KAAA;;AAKlB,SAAgBE,WAAWjC,OAAwB;CAClD,MAAM,CAACC,OAAOC,QAAQ5B,WAAW0B,OAAO;EAAC;EAAS;EAAY;EAAO;EAAW;EAAQ,CAAC;CAEzF,MAAMG,kBAAkB;EACvB,MAAM+B,eAAejC,MAAMH,UAAUrB,UAAU0D,cAAclC,MAAMH,WAAWf,KAAAA;AAE9E,SAAOX,KAAKK,UAAU2D,QAAQF,cAAcjC,MAAMI,MAAM;;AAGzD,eAAA;EAAA,IAAAgC,QAAA9B,QAAA;AAAAC,SAAA6B,OAAA5B,WAAA;GAAA,KAAA,WAAA;AAAA,WAESN,WAAW;;GAAA,IAClBxB,QAAK;AAAA,WAAED,cAAcuB,MAAMtB,OAAOF,UAAU6D,cAAcrC,MAAMT,IAAI;;GAAA,EAChEU,KAAI,EAAA,OAAA,KAAA;AAAAS,SAAA0B,aAEPpC,MAAMW,SAAQ;AAAA,SAAAyB;KAAA;;AAKlB,MAAaE,OAAOC,OAAOC,OAAO1C,UAAU;CAC3C2C,QAAQ7B;CACR8B,OAAO3B;CACP4B,UAAUtB;CACVuB,QAAQnB;CACRoB,SAASjB;CACTkB,QAAQd;CACR,CAAC"}

package/dist/checkbox/index.css

@@ -0,0 +1,75 @@
+@layer components {
+  .fl-checkbox-group {
+    gap: var(--fl-size-2);
+    display: grid;
+  }
+}
+@layer components {
+  .fl-checkbox {
+    align-items: center;
+    gap: var(--fl-size-2);
+    cursor: pointer;
+    user-select: none;
+    display: inline-flex;
+  }
+
+  .fl-checkbox[data-disabled] {
+    cursor: var(--fl-disabled-cursor);
+    opacity: var(--fl-disabled-opacity);
+  }
+
+  .fl-checkbox .fl-checkbox_input {
+    opacity: 0;
+    pointer-events: none;
+    width: 1px;
+    height: 1px;
+    position: absolute;
+  }
+
+  .fl-checkbox .fl-checkbox_control {
+    width: var(--fl-size-4);
+    height: var(--fl-size-4);
+    background: var(--fl-body-bg-color);
+    border: var(--fl-input-border-size, var(--fl-border-size, 1px)) solid
+			var(--fl-input-border-color, var(--fl-border-color));
+    border-radius: var(--fl-radius-sm);
+    color: var(--fl-secondary-text-color);
+    box-shadow: var(--fl-input-shadow);
+    transition: background var(--fl-animation-duration) ease,
+			border-color var(--fl-animation-duration) ease,
+			color var(--fl-animation-duration) ease;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .fl-checkbox .fl-checkbox_indicator {
+    width: 100%;
+    height: 100%;
+    transition: scale var(--fl-animation-duration) ease;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+    scale: 0;
+  }
+
+  .fl-checkbox .fl-checkbox_input:checked + .fl-checkbox_control {
+    background: var(--fl-primary-color);
+    border-color: color-mix(in oklab, var(--fl-primary-color), black 20%);
+    color: var(--fl-primary-text-color);
+  }
+
+  .fl-checkbox .fl-checkbox_input:checked + .fl-checkbox_control .fl-checkbox_indicator {
+    scale: 1;
+  }
+
+  .fl-checkbox .fl-checkbox_input:focus-visible + .fl-checkbox_control {
+    outline: var(--fl-focus-ring-size) solid var(--fl-focus-ring-color);
+    outline-offset: var(--fl-focus-ring-offset);
+  }
+
+  .fl-checkbox .fl-checkbox_label {
+    color: var(--fl-body-text-color);
+    font-size: var(--fl-text-size-base);
+  }
+}