@edo-w/flatline-solid 0.2.1 → 0.3.0

package/dist/tabs/index.css

@@ -0,0 +1,114 @@
+@layer components {
+  .fl-tabs {
+    --fl-tabs-indicator-size: 2px;
+    --fl-tabs-indicator-color: var(--fl-primary-color);
+    --fl-tabs-list-border-color: var(--fl-input-border-color, var(--fl-border-color));
+    --fl-tabs-trigger-hover-bg: var(--fl-input-bg-hover-color, oklab(95% 0 5.96046e-8));
+    --fl-tabs-trigger-focus-bg: color-mix(in oklab, var(--fl-input-bg-color, white), black 3%);
+    width: 100%;
+    color: var(--fl-body-text-color);
+  }
+
+  .fl-tabs.--color-primary {
+    --fl-tabs-indicator-color: var(--fl-primary-color);
+  }
+
+  .fl-tabs.--color-secondary {
+    --fl-tabs-indicator-color: var(--fl-secondary-text-color);
+  }
+
+  .fl-tabs[data-orientation="vertical"] {
+    gap: var(--fl-size-4);
+    display: flex;
+  }
+}
+@layer components {
+  .fl-tabs .fl-tabs_list {
+    display: flex;
+    position: relative;
+  }
+
+  .fl-tabs .fl-tabs_list[data-orientation="horizontal"] {
+    border-bottom: var(--fl-border-size, 1px) solid var(--fl-tabs-list-border-color);
+    align-items: center;
+  }
+
+  .fl-tabs .fl-tabs_list[data-orientation="vertical"] {
+    border-right: var(--fl-border-size, 1px) solid var(--fl-tabs-list-border-color);
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+@layer components {
+  .fl-tabs .fl-tabs_trigger {
+    appearance: none;
+    padding-inline: var(--fl-size-4);
+    padding-block: var(--fl-input-pad-y, var(--fl-size-1-5));
+    color: var(--fl-body-text-color);
+    font: inherit;
+    font-weight: var(--fl-font-weight-medium);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    background: none;
+    border: 0;
+    justify-content: center;
+    align-items: center;
+    transition: background-color .188s ease-in-out, color .188s ease-in-out;
+    display: inline-flex;
+  }
+
+  .fl-tabs .fl-tabs_trigger:hover:not([data-disabled]) {
+    background-color: var(--fl-tabs-trigger-hover-bg);
+  }
+
+  .fl-tabs .fl-tabs_trigger:focus-visible {
+    background-color: var(--fl-tabs-trigger-focus-bg);
+    outline: none;
+  }
+
+  .fl-tabs .fl-tabs_trigger[data-selected] {
+    color: var(--fl-tabs-indicator-color);
+  }
+
+  .fl-tabs .fl-tabs_trigger[data-disabled], .fl-tabs .fl-tabs_trigger[data-disabled]:hover {
+    opacity: var(--fl-disabled-opacity);
+    cursor: var(--fl-disabled-cursor);
+    background-color: #0000;
+  }
+}
+@layer components {
+  .fl-tabs .fl-tabs_indicator {
+    background-color: var(--fl-tabs-indicator-color);
+    transition: all var(--fl-animation-duration) ease-in-out;
+    position: absolute;
+  }
+
+  .fl-tabs .fl-tabs_indicator[data-orientation="horizontal"] {
+    bottom: calc(var(--fl-border-size, 1px) * -1);
+    height: var(--fl-tabs-indicator-size);
+    border-radius: var(--fl-radius-full);
+  }
+
+  .fl-tabs .fl-tabs_indicator[data-orientation="vertical"] {
+    right: calc(var(--fl-border-size, 1px) * -1);
+    width: var(--fl-tabs-indicator-size);
+    border-radius: var(--fl-radius-full);
+  }
+}
+@layer components {
+  .fl-tabs .fl-tabs_content {
+    padding: var(--fl-size-4);
+    color: var(--fl-body-text-color);
+  }
+
+  .fl-tabs .fl-tabs_content:focus-visible {
+    outline: var(--fl-focus-ring-size) solid var(--fl-focus-ring-color);
+    outline-offset: var(--fl-focus-ring-offset);
+  }
+
+  .fl-tabs[data-orientation="vertical"] .fl-tabs_content {
+    flex: auto;
+    padding-top: 0;
+  }
+}

package/dist/tabs/index.d.ts

@@ -0,0 +1,40 @@
+import { JSX } from "solid-js";
+import { TabsContentProps as TabsContentProps$1, TabsIndicatorProps as TabsIndicatorProps$1, TabsListProps as TabsListProps$1, TabsRootProps as TabsRootProps$1, TabsTriggerProps as TabsTriggerProps$1 } from "@kobalte/core/tabs";
+
+//#region src/components/tabs/class.d.ts
+declare const tabsClass: {
+  readonly root: "fl-tabs";
+  readonly list: "fl-tabs_list";
+  readonly trigger: "fl-tabs_trigger";
+  readonly indicator: "fl-tabs_indicator";
+  readonly content: "fl-tabs_content";
+  readonly color: {
+    readonly primary: "--color-primary";
+    readonly secondary: "--color-secondary";
+  };
+};
+type TabsColor = keyof typeof tabsClass.color;
+//#endregion
+//#region src/components/tabs/tabs.d.ts
+type TabsRootBaseProps = TabsRootProps$1 & JSX.HTMLAttributes<HTMLDivElement>;
+interface TabsRootProps extends TabsRootBaseProps {
+  color?: TabsColor;
+}
+type TabsListProps = TabsListProps$1 & JSX.HTMLAttributes<HTMLDivElement>;
+type TabsTriggerProps = TabsTriggerProps$1 & JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+type TabsIndicatorProps = TabsIndicatorProps$1 & JSX.HTMLAttributes<HTMLDivElement>;
+type TabsContentProps = TabsContentProps$1 & JSX.HTMLAttributes<HTMLDivElement>;
+declare function TabsRoot(props: TabsRootProps): JSX.Element;
+declare function TabsList(props: TabsListProps): JSX.Element;
+declare function TabsTrigger(props: TabsTriggerProps): JSX.Element;
+declare function TabsIndicator(props: TabsIndicatorProps): JSX.Element;
+declare function TabsContent(props: TabsContentProps): JSX.Element;
+declare const Tabs: typeof TabsRoot & {
+  List: typeof TabsList;
+  Trigger: typeof TabsTrigger;
+  Indicator: typeof TabsIndicator;
+  Content: typeof TabsContent;
+};
+//#endregion
+export { Tabs, TabsColor, TabsContent, TabsContentProps, TabsIndicator, TabsIndicatorProps, TabsList, TabsListProps, TabsRoot, TabsRootBaseProps, TabsRootProps, TabsTrigger, TabsTriggerProps, tabsClass };
+//# sourceMappingURL=index.d.ts.map

package/dist/tabs/index.js

@@ -0,0 +1,67 @@
+import './index.css';
+import { t as clsx } from "../lite-CiFvU804.js";
+import { createComponent, mergeProps } from "solid-js/web";
+import { mergeProps as mergeProps$1, splitProps } from "solid-js";
+import { Tabs as Tabs$1 } from "@kobalte/core/tabs";
+//#region src/components/tabs/class.ts
+const tabsClass = {
+	root: "fl-tabs",
+	list: "fl-tabs_list",
+	trigger: "fl-tabs_trigger",
+	indicator: "fl-tabs_indicator",
+	content: "fl-tabs_content",
+	color: {
+		primary: "--color-primary",
+		secondary: "--color-secondary"
+	}
+};
+//#endregion
+//#region src/components/tabs/tabs.tsx
+function TabsRoot(props) {
+	const [local, rest] = splitProps(mergeProps$1({ color: "primary" }, props), ["class", "color"]);
+	const rootClass = () => {
+		const colorClass = tabsClass.color[local.color];
+		return clsx(tabsClass.root, colorClass, local.class);
+	};
+	return createComponent(Tabs$1, mergeProps({ get ["class"]() {
+		return rootClass();
+	} }, rest));
+}
+function TabsList(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	const rootClass = () => clsx(tabsClass.list, local.class);
+	return createComponent(Tabs$1.List, mergeProps({ get ["class"]() {
+		return rootClass();
+	} }, rest));
+}
+function TabsTrigger(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	const rootClass = () => clsx(tabsClass.trigger, local.class);
+	return createComponent(Tabs$1.Trigger, mergeProps({ get ["class"]() {
+		return rootClass();
+	} }, rest));
+}
+function TabsIndicator(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	const rootClass = () => clsx(tabsClass.indicator, local.class);
+	return createComponent(Tabs$1.Indicator, mergeProps({ get ["class"]() {
+		return rootClass();
+	} }, rest));
+}
+function TabsContent(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	const rootClass = () => clsx(tabsClass.content, local.class);
+	return createComponent(Tabs$1.Content, mergeProps({ get ["class"]() {
+		return rootClass();
+	} }, rest));
+}
+const Tabs = Object.assign(TabsRoot, {
+	List: TabsList,
+	Trigger: TabsTrigger,
+	Indicator: TabsIndicator,
+	Content: TabsContent
+});
+//#endregion
+export { Tabs, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, tabsClass };
+
+//# sourceMappingURL=index.js.map

package/dist/tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Tabs","KTabs","TabsContentProps","KTabsContentProps","TabsIndicatorProps","KTabsIndicatorProps","TabsListProps","KTabsListProps","TabsRootProps","KTabsRootProps","TabsTriggerProps","KTabsTriggerProps","clsx","JSX","mergeProps","splitProps","TabsColor","tabsClass","TabsRootBaseProps","HTMLAttributes","HTMLDivElement","color","ButtonHTMLAttributes","HTMLButtonElement","TabsRoot","props","merged","const","local","rest","rootClass","colorClass","root","class","_$createComponent","_$mergeProps","TabsList","list","List","TabsTrigger","trigger","Trigger","TabsIndicator","indicator","Indicator","TabsContent","content","Content","Object","assign"],"sources":["../../src/components/tabs/class.ts","../../src/components/tabs/tabs.tsx"],"sourcesContent":["export const tabsClass = {\n\troot: 'fl-tabs',\n\tlist: 'fl-tabs_list',\n\ttrigger: 'fl-tabs_trigger',\n\tindicator: 'fl-tabs_indicator',\n\tcontent: 'fl-tabs_content',\n\tcolor: {\n\t\tprimary: '--color-primary',\n\t\tsecondary: '--color-secondary',\n\t},\n} as const;\n\nexport type TabsColor = keyof typeof tabsClass.color;\n","import {\n\tTabs as KTabs,\n\ttype TabsContentProps as KTabsContentProps,\n\ttype TabsIndicatorProps as KTabsIndicatorProps,\n\ttype TabsListProps as KTabsListProps,\n\ttype TabsRootProps as KTabsRootProps,\n\ttype TabsTriggerProps as KTabsTriggerProps,\n} from '@kobalte/core/tabs';\nimport clsx from 'clsx/lite';\nimport { type JSX, mergeProps, splitProps } from 'solid-js';\nimport { type TabsColor, tabsClass } from './class';\nimport './tabs-root.css';\nimport './tabs-list.css';\nimport './tabs-trigger.css';\nimport './tabs-indicator.css';\nimport './tabs-content.css';\n\nexport type TabsRootBaseProps = KTabsRootProps & JSX.HTMLAttributes<HTMLDivElement>;\n\nexport interface TabsRootProps extends TabsRootBaseProps {\n\tcolor?: TabsColor;\n}\n\nexport type TabsListProps = KTabsListProps & JSX.HTMLAttributes<HTMLDivElement>;\nexport type TabsTriggerProps = KTabsTriggerProps & JSX.ButtonHTMLAttributes<HTMLButtonElement>;\nexport type TabsIndicatorProps = KTabsIndicatorProps & JSX.HTMLAttributes<HTMLDivElement>;\nexport type TabsContentProps = KTabsContentProps & JSX.HTMLAttributes<HTMLDivElement>;\n\nexport function TabsRoot(props: TabsRootProps) {\n\tconst merged = mergeProps(\n\t\t{\n\t\t\tcolor: 'primary',\n\t\t} as const,\n\t\tprops,\n\t);\n\tconst [local, rest] = splitProps(merged, ['class', 'color']);\n\n\tconst rootClass = () => {\n\t\tconst colorClass = tabsClass.color[local.color];\n\n\t\treturn clsx(tabsClass.root, colorClass, local.class);\n\t};\n\n\treturn (\n\t\t<KTabs\n\t\t\tclass={rootClass()}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n\nexport function TabsList(props: TabsListProps) {\n\tconst [local, rest] = splitProps(props, ['class']);\n\n\tconst rootClass = () => clsx(tabsClass.list, local.class);\n\n\treturn (\n\t\t<KTabs.List\n\t\t\tclass={rootClass()}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n\nexport function TabsTrigger(props: TabsTriggerProps) {\n\tconst [local, rest] = splitProps(props, ['class']);\n\n\tconst rootClass = () => clsx(tabsClass.trigger, local.class);\n\n\treturn (\n\t\t<KTabs.Trigger\n\t\t\tclass={rootClass()}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n\nexport function TabsIndicator(props: TabsIndicatorProps) {\n\tconst [local, rest] = splitProps(props, ['class']);\n\n\tconst rootClass = () => clsx(tabsClass.indicator, local.class);\n\n\treturn (\n\t\t<KTabs.Indicator\n\t\t\tclass={rootClass()}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n\nexport function TabsContent(props: TabsContentProps) {\n\tconst [local, rest] = splitProps(props, ['class']);\n\n\tconst rootClass = () => clsx(tabsClass.content, local.class);\n\n\treturn (\n\t\t<KTabs.Content\n\t\t\tclass={rootClass()}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n\nexport const Tabs = Object.assign(TabsRoot, {\n\tList: TabsList,\n\tTrigger: TabsTrigger,\n\tIndicator: TabsIndicator,\n\tContent: TabsContent,\n});\n"],"mappings":";;;;;AAAA,MAAa,YAAY;CACxB,MAAM;CACN,MAAM;CACN,SAAS;CACT,WAAW;CACX,SAAS;CACT,OAAO;EACN,SAAS;EACT,WAAW;EACX;CACD;;;ACkBD,SAAgBwB,SAASC,OAAsB;CAO9C,MAAM,CAACG,OAAOC,QAAQd,WANPD,aACd,EACCO,OAAO,WACP,EACDI,MACA,EACwC,CAAC,SAAS,QAAQ,CAAC;CAE5D,MAAMK,kBAAkB;EACvB,MAAMC,aAAad,UAAUI,MAAMO,MAAMP;AAEzC,SAAOT,KAAKK,UAAUe,MAAMD,YAAYH,MAAMK,MAAM;;AAGrD,QAAAC,gBACEjC,QAAKkC,WAAA,EAAA,KAAA,WAAA;AAAA,SACEL,WAAW;IAAA,EACdD,KAAI,CAAA;;AAKX,SAAgBO,SAASX,OAAsB;CAC9C,MAAM,CAACG,OAAOC,QAAQd,WAAWU,OAAO,CAAC,QAAQ,CAAC;CAElD,MAAMK,kBAAkBlB,KAAKK,UAAUoB,MAAMT,MAAMK,MAAM;AAEzD,QAAAC,gBACEjC,OAAMqC,MAAIH,WAAA,EAAA,KAAA,WAAA;AAAA,SACHL,WAAW;IAAA,EACdD,KAAI,CAAA;;AAKX,SAAgBU,YAAYd,OAAyB;CACpD,MAAM,CAACG,OAAOC,QAAQd,WAAWU,OAAO,CAAC,QAAQ,CAAC;CAElD,MAAMK,kBAAkBlB,KAAKK,UAAUuB,SAASZ,MAAMK,MAAM;AAE5D,QAAAC,gBACEjC,OAAMwC,SAAON,WAAA,EAAA,KAAA,WAAA;AAAA,SACNL,WAAW;IAAA,EACdD,KAAI,CAAA;;AAKX,SAAgBa,cAAcjB,OAA2B;CACxD,MAAM,CAACG,OAAOC,QAAQd,WAAWU,OAAO,CAAC,QAAQ,CAAC;CAElD,MAAMK,kBAAkBlB,KAAKK,UAAU0B,WAAWf,MAAMK,MAAM;AAE9D,QAAAC,gBACEjC,OAAM2C,WAAST,WAAA,EAAA,KAAA,WAAA;AAAA,SACRL,WAAW;IAAA,EACdD,KAAI,CAAA;;AAKX,SAAgBgB,YAAYpB,OAAyB;CACpD,MAAM,CAACG,OAAOC,QAAQd,WAAWU,OAAO,CAAC,QAAQ,CAAC;CAElD,MAAMK,kBAAkBlB,KAAKK,UAAU6B,SAASlB,MAAMK,MAAM;AAE5D,QAAAC,gBACEjC,OAAM8C,SAAOZ,WAAA,EAAA,KAAA,WAAA;AAAA,SACNL,WAAW;IAAA,EACdD,KAAI,CAAA;;AAKX,MAAa7B,OAAOgD,OAAOC,OAAOzB,UAAU;CAC3Cc,MAAMF;CACNK,SAASF;CACTK,WAAWF;CACXK,SAASF;CACT,CAAC"}

package/dist/textarea/index.css

@@ -0,0 +1,35 @@
+@layer components {
+  .fl-textarea {
+    appearance: initial;
+    width: 100%;
+    min-width: 0;
+    min-height: var(--fl-size-24);
+    padding-inline: var(--fl-input-pad-x);
+    padding-block: var(--fl-input-pad-y);
+    background: var(--fl-input-bg-color);
+    border: var(--fl-input-border-size) solid var(--fl-input-border-color);
+    border-radius: var(--fl-input-border-radius);
+    box-shadow: var(--fl-input-shadow);
+    color: var(--fl-input-text-color);
+    font: inherit;
+    resize: vertical;
+    outline: none;
+    line-height: 1.5;
+    display: block;
+  }
+
+  .fl-textarea::placeholder {
+    color: var(--fl-body-muted-text-color);
+  }
+
+  .fl-textarea:focus-visible:not(:disabled) {
+    border-color: var(--fl-input-border-focus-color);
+    outline: var(--fl-focus-ring-size) solid var(--fl-focus-ring-color);
+    outline-offset: 0;
+  }
+
+  .fl-textarea:disabled {
+    opacity: var(--fl-disabled-opacity);
+    cursor: var(--fl-disabled-cursor);
+  }
+}

package/dist/textarea/index.d.ts

@@ -0,0 +1,14 @@
+import { JSX } from "solid-js";
+
+//#region src/components/textarea/class.d.ts
+declare const textAreaClass: {
+  readonly root: "fl-textarea";
+};
+//#endregion
+//#region src/components/textarea/textarea.d.ts
+type TextAreaBaseProps = JSX.TextareaHTMLAttributes<HTMLTextAreaElement>;
+interface TextAreaProps extends TextAreaBaseProps {}
+declare function TextArea(props: TextAreaProps): JSX.Element;
+//#endregion
+export { TextArea, TextAreaBaseProps, TextAreaProps, textAreaClass };
+//# sourceMappingURL=index.d.ts.map

package/dist/textarea/index.js

@@ -0,0 +1,24 @@
+import './index.css';
+import { t as clsx } from "../lite-CiFvU804.js";
+import { mergeProps, spread, template } from "solid-js/web";
+import { splitProps } from "solid-js";
+//#region src/components/textarea/class.ts
+const textAreaClass = { root: "fl-textarea" };
+//#endregion
+//#region src/components/textarea/textarea.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<textarea>`);
+function TextArea(props) {
+	const [local, rest] = splitProps(props, ["class"]);
+	const rootClass = () => clsx(textAreaClass.root, local.class);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({ get ["class"]() {
+			return rootClass();
+		} }, rest), false, false);
+		return _el$;
+	})();
+}
+//#endregion
+export { TextArea, textAreaClass };
+
+//# sourceMappingURL=index.js.map

package/dist/textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["clsx","JSX","splitProps","textAreaClass","TextAreaBaseProps","TextareaHTMLAttributes","HTMLTextAreaElement","TextAreaProps","TextArea","props","local","rest","rootClass","root","class","_el$","_tmpl$","_$spread","_$mergeProps"],"sources":["../../src/components/textarea/class.ts","../../src/components/textarea/textarea.tsx"],"sourcesContent":["export const textAreaClass = {\n\troot: 'fl-textarea',\n} as const;\n","import clsx from 'clsx/lite';\nimport { type JSX, splitProps } from 'solid-js';\nimport { textAreaClass } from './class';\nimport './textarea.css';\n\nexport type TextAreaBaseProps = JSX.TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nexport interface TextAreaProps extends TextAreaBaseProps {}\n\nexport function TextArea(props: TextAreaProps) {\n\tconst [local, rest] = splitProps(props, ['class']);\n\n\tconst rootClass = () => clsx(textAreaClass.root, local.class);\n\n\treturn (\n\t\t<textarea\n\t\t\tclass={rootClass()}\n\t\t\t{...rest}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;AAAA,MAAa,gBAAgB,EAC5B,MAAM,eACN;;;;ACOD,SAAgBQ,SAASC,OAAsB;CAC9C,MAAM,CAACC,OAAOC,QAAQT,WAAWO,OAAO,CAAC,QAAQ,CAAC;CAElD,MAAMG,kBAAkBZ,KAAKG,cAAcU,MAAMH,MAAMI,MAAM;AAE7D,eAAA;EAAA,IAAAC,OAAAC,QAAA;AAAAC,SAAAF,MAAAG,WAAA,EAAA,KAAA,WAAA;AAAA,UAESN,WAAW;KAAA,EACdD,KAAI,EAAA,OAAA,MAAA;AAAA,SAAAI;KAAA"}

package/dist/xstack/index.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/ystack/index.css

@@ -0,0 +1,26 @@
+@layer components {
+  .fl-ystack {
+    --fl-gap: 0;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: calc(var(--fl-gap) * var(--fl-size-unit));
+    flex-direction: column;
+    display: flex;
+  }
+
+  .fl-ystack.--align-left {
+    align-items: flex-start;
+  }
+
+  .fl-ystack.--align-center {
+    align-items: center;
+  }
+
+  .fl-ystack.--align-right {
+    align-items: flex-end;
+  }
+
+  .fl-ystack.--align-stretch {
+    align-items: stretch;
+  }
+}

package/dist/ystack/index.d.ts

@@ -0,0 +1,25 @@
+import { JSX } from "solid-js";
+
+//#region src/components/ystack/class.d.ts
+declare const ystackClass: {
+  readonly root: "fl-ystack";
+  readonly gapVar: "--fl-gap";
+  readonly align: {
+    readonly left: "--align-left";
+    readonly center: "--align-center";
+    readonly right: "--align-right";
+    readonly stretch: "--align-stretch";
+  };
+};
+type YStackAlign = keyof typeof ystackClass.align;
+//#endregion
+//#region src/components/ystack/ystack.d.ts
+type YStackBaseProps = JSX.HTMLAttributes<HTMLDivElement>;
+interface YStackProps extends YStackBaseProps {
+  gap?: number | string;
+  align?: YStackAlign;
+}
+declare function YStack(props: YStackProps): JSX.Element;
+//#endregion
+export { YStack, YStackAlign, YStackBaseProps, YStackProps, ystackClass };
+//# sourceMappingURL=index.d.ts.map

package/dist/ystack/index.js

@@ -0,0 +1,47 @@
+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/ystack/class.ts
+const ystackClass = {
+	root: "fl-ystack",
+	gapVar: "--fl-gap",
+	align: {
+		left: "--align-left",
+		center: "--align-center",
+		right: "--align-right",
+		stretch: "--align-stretch"
+	}
+};
+//#endregion
+//#region src/components/ystack/ystack.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+function YStack(props) {
+	const [local, rest] = splitProps(props, [
+		"class",
+		"children",
+		"gap",
+		"align"
+	]);
+	const rootClass = () => {
+		const alignClass = local.align ? ystackClass.align[local.align] : void 0;
+		return clsx(ystackClass.root, alignClass, local.class);
+	};
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({
+			get ["class"]() {
+				return rootClass();
+			},
+			get style() {
+				return { [ystackClass.gapVar]: local.gap };
+			}
+		}, rest), false, true);
+		insert(_el$, () => local.children);
+		return _el$;
+	})();
+}
+//#endregion
+export { YStack, ystackClass };
+
+//# sourceMappingURL=index.js.map

package/dist/ystack/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["clsx","JSX","splitProps","YStackAlign","ystackClass","YStackBaseProps","HTMLAttributes","HTMLDivElement","YStackProps","gap","align","YStack","props","local","rest","rootClass","alignClass","undefined","root","class","_el$","_tmpl$","_$spread","_$mergeProps","style","gapVar","_$insert","children"],"sources":["../../src/components/ystack/class.ts","../../src/components/ystack/ystack.tsx"],"sourcesContent":["export const ystackClass = {\n\troot: 'fl-ystack',\n\tgapVar: '--fl-gap',\n\talign: {\n\t\tleft: '--align-left',\n\t\tcenter: '--align-center',\n\t\tright: '--align-right',\n\t\tstretch: '--align-stretch',\n\t},\n} as const;\n\nexport type YStackAlign = keyof typeof ystackClass.align;\n","import clsx from 'clsx/lite';\nimport { type JSX, splitProps } from 'solid-js';\nimport { type YStackAlign, ystackClass } from './class';\nimport './ystack.css';\n\nexport type YStackBaseProps = JSX.HTMLAttributes<HTMLDivElement>;\n\nexport interface YStackProps extends YStackBaseProps {\n\tgap?: number | string;\n\talign?: YStackAlign;\n}\n\nexport function YStack(props: YStackProps) {\n\tconst [local, rest] = splitProps(props, ['class', 'children', 'gap', 'align']);\n\n\tconst rootClass = () => {\n\t\tconst alignClass = local.align ? ystackClass.align[local.align] : undefined;\n\n\t\treturn clsx(ystackClass.root, alignClass, local.class);\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclass={rootClass()}\n\t\t\tstyle={{ [ystackClass.gapVar]: local.gap }}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{local.children}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;AAAA,MAAa,cAAc;CAC1B,MAAM;CACN,QAAQ;CACR,OAAO;EACN,MAAM;EACN,QAAQ;EACR,OAAO;EACP,SAAS;EACT;CACD;;;;ACGD,SAAgBW,OAAOC,OAAoB;CAC1C,MAAM,CAACC,OAAOC,QAAQZ,WAAWU,OAAO;EAAC;EAAS;EAAY;EAAO;EAAQ,CAAC;CAE9E,MAAMG,kBAAkB;EACvB,MAAMC,aAAaH,MAAMH,QAAQN,YAAYM,MAAMG,MAAMH,SAASO,KAAAA;AAElE,SAAOjB,KAAKI,YAAYc,MAAMF,YAAYH,MAAMM,MAAM;;AAGvD,eAAA;EAAA,IAAAC,OAAAC,QAAA;AAAAC,SAAAF,MAAAG,WAAA;GAAA,KAAA,WAAA;AAAA,WAESR,WAAW;;GAAA,IAClBS,QAAK;AAAA,WAAE,GAAGpB,YAAYqB,SAASZ,MAAMJ,KAAK;;GAAA,EACtCK,KAAI,EAAA,OAAA,KAAA;AAAAY,SAAAN,YAEPP,MAAMc,SAAQ;AAAA,SAAAP;KAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edo-w/flatline-solid",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/edo-w/flatline.git"
@@ -8,23 +8,45 @@
   "author": "https://github.com/juanka881",
   "type": "module",
   "exports": {
-    ".": "./dist/src/index.js",
-    "./*": "./dist/src/*.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 +55,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 +67,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",
     "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;