iryx-ui 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -1,8 +1,11 @@
 export { componentNames } from './component-names';
 export type { ComponentName } from './component-names';
 export * from './components';
+export type { AlertProps } from './components/Alert.vue';
 export type { AppProps } from './components/App.vue';
+export type { BadgeProps } from './components/Badge.vue';
 export type { ButtonProps } from './components/Button.vue';
+export type { CardProps } from './components/Card.vue';
 export type { CheckboxProps } from './components/Checkbox.vue';
 export type { FormProps } from './components/Form.vue';
 export type { FormFieldProps } from './components/FormField.vue';

package/dist/index.js

@@ -1,25 +1,31 @@
 import { componentNames as e } from "./component-names.js";
-import { initAppearance as t, useAppearance as n } from "./composables/appearance.js";
-import { defaultConfig as r, iryxUiConfigKey as i, useIryxUiConfig as a } from "./config.js";
-import { applyTheme as o, clearTheme as s, themes as c } from "./theme/presets.js";
-import l from "./components/App.js";
-import { buttonTheme as u } from "./theme/button.js";
-import d from "./components/Button.js";
-import { checkboxTheme as f } from "./theme/checkbox.js";
-import p from "./components/Checkbox.js";
-import { formContextKey as m, formFieldContextKey as h, getByPath as g, isStandardSchema as _, issuePath as v, useForm as y, useFormField as b } from "./composables/form.js";
-import x from "./components/Form.js";
-import { labelTheme as S } from "./theme/label.js";
-import C from "./components/Label.js";
-import w from "./components/FormField.js";
-import { fieldBase as T, inputTheme as E, textareaTheme as D } from "./theme/input.js";
-import O from "./components/Input.js";
-import { radioGroupTheme as k } from "./theme/radio-group.js";
-import A from "./components/RadioGroup.js";
-import { selectTheme as j } from "./theme/select.js";
-import M from "./components/Select.js";
-import { switchTheme as N } from "./theme/switch.js";
-import P from "./components/Switch.js";
-import F from "./components/Textarea.js";
-import { IryxUi as I, createIryxUi as L } from "./plugin.js";
-export { l as App, d as Button, p as Checkbox, x as Form, w as FormField, O as Input, I as IryxUi, C as Label, A as RadioGroup, M as Select, P as Switch, F as Textarea, o as applyTheme, u as buttonTheme, f as checkboxTheme, s as clearTheme, e as componentNames, L as createIryxUi, r as defaultConfig, T as fieldBase, m as formContextKey, h as formFieldContextKey, g as getByPath, t as initAppearance, E as inputTheme, i as iryxUiConfigKey, _ as isStandardSchema, v as issuePath, S as labelTheme, k as radioGroupTheme, j as selectTheme, N as switchTheme, D as textareaTheme, c as themes, n as useAppearance, y as useForm, b as useFormField, a as useIryxUiConfig };
+import { defaultConfig as t, iryxUiConfigKey as n, useIryxUiConfig as r } from "./config.js";
+import { alertTheme as i } from "./theme/alert.js";
+import a from "./components/Alert.js";
+import { initAppearance as o, useAppearance as s } from "./composables/appearance.js";
+import { applyTheme as c, clearTheme as l, themes as u } from "./theme/presets.js";
+import d from "./components/App.js";
+import { badgeTheme as f } from "./theme/badge.js";
+import p from "./components/Badge.js";
+import { buttonTheme as m } from "./theme/button.js";
+import h from "./components/Button.js";
+import { cardTheme as g } from "./theme/card.js";
+import _ from "./components/Card.js";
+import { checkboxTheme as v } from "./theme/checkbox.js";
+import y from "./components/Checkbox.js";
+import { formContextKey as b, formFieldContextKey as x, getByPath as S, isStandardSchema as C, issuePath as w, useForm as T, useFormField as E } from "./composables/form.js";
+import D from "./components/Form.js";
+import { labelTheme as O } from "./theme/label.js";
+import k from "./components/Label.js";
+import A from "./components/FormField.js";
+import { fieldBase as j, inputTheme as M, textareaTheme as N } from "./theme/input.js";
+import P from "./components/Input.js";
+import { radioGroupTheme as F } from "./theme/radio-group.js";
+import I from "./components/RadioGroup.js";
+import { selectTheme as L } from "./theme/select.js";
+import R from "./components/Select.js";
+import { switchTheme as z } from "./theme/switch.js";
+import B from "./components/Switch.js";
+import V from "./components/Textarea.js";
+import { IryxUi as H, createIryxUi as U } from "./plugin.js";
+export { a as Alert, d as App, p as Badge, h as Button, _ as Card, y as Checkbox, D as Form, A as FormField, P as Input, H as IryxUi, k as Label, I as RadioGroup, R as Select, B as Switch, V as Textarea, i as alertTheme, c as applyTheme, f as badgeTheme, m as buttonTheme, g as cardTheme, v as checkboxTheme, l as clearTheme, e as componentNames, U as createIryxUi, t as defaultConfig, j as fieldBase, b as formContextKey, x as formFieldContextKey, S as getByPath, o as initAppearance, M as inputTheme, n as iryxUiConfigKey, C as isStandardSchema, w as issuePath, O as labelTheme, F as radioGroupTheme, L as selectTheme, z as switchTheme, N as textareaTheme, u as themes, s as useAppearance, T as useForm, E as useFormField, r as useIryxUiConfig };

package/dist/plugin.js

@@ -1,18 +1,18 @@
 import { componentNames as e } from "./component-names.js";
-import { initAppearance as t } from "./composables/appearance.js";
-import { defaultConfig as n, iryxUiConfigKey as r } from "./config.js";
+import { defaultConfig as t, iryxUiConfigKey as n } from "./config.js";
+import { initAppearance as r } from "./composables/appearance.js";
 import { applyTheme as i } from "./theme/presets.js";
 import { components_exports as a } from "./components/index.js";
 //#region src/plugin.ts
 function o(o = {}) {
 	let { prefix: s = "I", appearance: c, theme: l, ...u } = o;
 	return { install(o) {
-		o.provide(r, {
-			...n,
+		o.provide(n, {
+			...t,
 			...u
 		});
 		for (let t of e) o.component(`${s}${t}`, a[t]);
-		l && i(l), c && t(c);
+		l && i(l), c && r(c);
 	} };
 }
 var s = o();

package/dist/theme/alert.d.ts

@@ -0,0 +1,98 @@
+export declare const alertTheme: import("tailwind-variants").TVReturnType<{
+    variant: {
+        info: {
+            root: string;
+            icon: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+        };
+        danger: {
+            root: string;
+            icon: string;
+        };
+    };
+    /** Tightens the title/description gap when both are present. */
+    withTitle: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    icon: string;
+    content: string;
+    title: string;
+    description: string;
+    close: string;
+}, undefined, {
+    variant: {
+        info: {
+            root: string;
+            icon: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+        };
+        danger: {
+            root: string;
+            icon: string;
+        };
+    };
+    /** Tightens the title/description gap when both are present. */
+    withTitle: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    icon: string;
+    content: string;
+    title: string;
+    description: string;
+    close: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        info: {
+            root: string;
+            icon: string;
+        };
+        success: {
+            root: string;
+            icon: string;
+        };
+        warning: {
+            root: string;
+            icon: string;
+        };
+        danger: {
+            root: string;
+            icon: string;
+        };
+    };
+    /** Tightens the title/description gap when both are present. */
+    withTitle: {
+        true: {
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    icon: string;
+    content: string;
+    title: string;
+    description: string;
+    close: string;
+}, undefined, unknown, unknown, undefined>>;
+export type AlertSlots = keyof ReturnType<typeof alertTheme>;

package/dist/theme/alert.js

@@ -0,0 +1,36 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/alert.ts
+var t = e({
+	slots: {
+		root: "flex w-full gap-3 rounded-lg border p-4",
+		icon: "mt-0.5 shrink-0 [&_svg]:size-5",
+		content: "min-w-0 flex-1",
+		title: "text-sm font-medium",
+		description: "text-sm opacity-90",
+		close: "-m-1 shrink-0 self-start rounded-md p-1 opacity-70 transition-opacity outline-none hover:opacity-100 focus-visible:ring-2 focus-visible:ring-current/50 [&_svg]:size-4"
+	},
+	variants: {
+		variant: {
+			info: {
+				root: "border-info-border bg-info-muted text-info-muted-foreground",
+				icon: "text-info"
+			},
+			success: {
+				root: "border-success-border bg-success-muted text-success-muted-foreground",
+				icon: "text-success"
+			},
+			warning: {
+				root: "border-warning-border bg-warning-muted text-warning-muted-foreground",
+				icon: "text-warning"
+			},
+			danger: {
+				root: "border-danger-border bg-danger-muted text-danger-muted-foreground",
+				icon: "text-danger"
+			}
+		},
+		withTitle: { true: { description: "mt-1" } }
+	},
+	defaultVariants: { variant: "info" }
+});
+//#endregion
+export { t as alertTheme };

package/dist/theme/badge.d.ts

@@ -0,0 +1,92 @@
+export declare const badgeTheme: import("tailwind-variants").TVReturnType<{
+    variant: {
+        neutral: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {};
+    };
+    /** `soft` is a tinted background; `solid` is a filled block of colour. */
+    tone: {
+        soft: {};
+        solid: {};
+    };
+    size: {
+        sm: {
+            root: string;
+            dot: string;
+        };
+        md: {
+            root: string;
+            dot: string;
+        };
+        lg: {
+            root: string;
+            dot: string;
+        };
+    };
+}, {
+    root: string;
+    dot: string;
+}, undefined, {
+    variant: {
+        neutral: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {};
+    };
+    /** `soft` is a tinted background; `solid` is a filled block of colour. */
+    tone: {
+        soft: {};
+        solid: {};
+    };
+    size: {
+        sm: {
+            root: string;
+            dot: string;
+        };
+        md: {
+            root: string;
+            dot: string;
+        };
+        lg: {
+            root: string;
+            dot: string;
+        };
+    };
+}, {
+    root: string;
+    dot: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        neutral: {};
+        success: {};
+        warning: {};
+        danger: {};
+        info: {};
+    };
+    /** `soft` is a tinted background; `solid` is a filled block of colour. */
+    tone: {
+        soft: {};
+        solid: {};
+    };
+    size: {
+        sm: {
+            root: string;
+            dot: string;
+        };
+        md: {
+            root: string;
+            dot: string;
+        };
+        lg: {
+            root: string;
+            dot: string;
+        };
+    };
+}, {
+    root: string;
+    dot: string;
+}, undefined, unknown, unknown, undefined>>;
+export type BadgeSlots = keyof ReturnType<typeof badgeTheme>;

package/dist/theme/badge.js

@@ -0,0 +1,94 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/badge.ts
+var t = e({
+	slots: {
+		root: "inline-flex shrink-0 items-center rounded-full font-medium whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		dot: "rounded-full bg-current"
+	},
+	variants: {
+		variant: {
+			neutral: {},
+			success: {},
+			warning: {},
+			danger: {},
+			info: {}
+		},
+		tone: {
+			soft: {},
+			solid: {}
+		},
+		size: {
+			sm: {
+				root: "h-5 gap-1 px-2 text-xs [&_svg]:size-3",
+				dot: "size-1.5"
+			},
+			md: {
+				root: "h-6 gap-1.5 px-2.5 text-xs [&_svg]:size-3.5",
+				dot: "size-2"
+			},
+			lg: {
+				root: "h-7 gap-1.5 px-3 text-sm [&_svg]:size-4",
+				dot: "size-2"
+			}
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "neutral",
+			tone: "soft",
+			class: { root: "bg-muted text-muted-foreground" }
+		},
+		{
+			variant: "neutral",
+			tone: "solid",
+			class: { root: "bg-foreground text-background" }
+		},
+		{
+			variant: "success",
+			tone: "soft",
+			class: { root: "bg-success-muted text-success-muted-foreground" }
+		},
+		{
+			variant: "success",
+			tone: "solid",
+			class: { root: "bg-success text-success-foreground" }
+		},
+		{
+			variant: "warning",
+			tone: "soft",
+			class: { root: "bg-warning-muted text-warning-muted-foreground" }
+		},
+		{
+			variant: "warning",
+			tone: "solid",
+			class: { root: "bg-warning text-warning-foreground" }
+		},
+		{
+			variant: "danger",
+			tone: "soft",
+			class: { root: "bg-danger-muted text-danger-muted-foreground" }
+		},
+		{
+			variant: "danger",
+			tone: "solid",
+			class: { root: "bg-danger text-danger-foreground" }
+		},
+		{
+			variant: "info",
+			tone: "soft",
+			class: { root: "bg-info-muted text-info-muted-foreground" }
+		},
+		{
+			variant: "info",
+			tone: "solid",
+			class: { root: "bg-info text-info-foreground" }
+		}
+	],
+	defaultVariants: {
+		variant: "neutral",
+		tone: "soft",
+		size: "md"
+	}
+});
+//#endregion
+export { t as badgeTheme };

package/dist/theme/card.d.ts

@@ -0,0 +1,110 @@
+export declare const cardTheme: import("tailwind-variants").TVReturnType<{
+    variant: {
+        outline: {
+            root: string;
+        };
+        soft: {
+            root: string;
+        };
+    };
+    padding: {
+        none: {};
+        sm: {
+            root: string;
+            header: string;
+            footer: string;
+        };
+        md: {
+            root: string;
+            header: string;
+            footer: string;
+        };
+        lg: {
+            root: string;
+            header: string;
+            footer: string;
+        };
+    };
+}, {
+    root: string;
+    /** Only rendered when a title, description or header slot is provided. */
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    /** Only rendered when a footer slot is provided. */
+    footer: string;
+}, undefined, {
+    variant: {
+        outline: {
+            root: string;
+        };
+        soft: {
+            root: string;
+        };
+    };
+    padding: {
+        none: {};
+        sm: {
+            root: string;
+            header: string;
+            footer: string;
+        };
+        md: {
+            root: string;
+            header: string;
+            footer: string;
+        };
+        lg: {
+            root: string;
+            header: string;
+            footer: string;
+        };
+    };
+}, {
+    root: string;
+    /** Only rendered when a title, description or header slot is provided. */
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    /** Only rendered when a footer slot is provided. */
+    footer: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        outline: {
+            root: string;
+        };
+        soft: {
+            root: string;
+        };
+    };
+    padding: {
+        none: {};
+        sm: {
+            root: string;
+            header: string;
+            footer: string;
+        };
+        md: {
+            root: string;
+            header: string;
+            footer: string;
+        };
+        lg: {
+            root: string;
+            header: string;
+            footer: string;
+        };
+    };
+}, {
+    root: string;
+    /** Only rendered when a title, description or header slot is provided. */
+    header: string;
+    title: string;
+    description: string;
+    body: string;
+    /** Only rendered when a footer slot is provided. */
+    footer: string;
+}, undefined, unknown, unknown, undefined>>;
+export type CardSlots = keyof ReturnType<typeof cardTheme>;

package/dist/theme/card.js

@@ -0,0 +1,42 @@
+import { tv as e } from "tailwind-variants";
+//#region src/theme/card.ts
+var t = e({
+	slots: {
+		root: "rounded-xl text-foreground",
+		header: "flex flex-col gap-1",
+		title: "text-base leading-none font-semibold",
+		description: "text-sm text-muted-foreground",
+		body: "",
+		footer: "flex items-center gap-2"
+	},
+	variants: {
+		variant: {
+			outline: { root: "border border-border bg-background" },
+			soft: { root: "bg-muted" }
+		},
+		padding: {
+			none: {},
+			sm: {
+				root: "p-4",
+				header: "mb-3",
+				footer: "mt-3"
+			},
+			md: {
+				root: "p-6",
+				header: "mb-4",
+				footer: "mt-4"
+			},
+			lg: {
+				root: "p-8",
+				header: "mb-6",
+				footer: "mt-6"
+			}
+		}
+	},
+	defaultVariants: {
+		variant: "outline",
+		padding: "md"
+	}
+});
+//#endregion
+export { t as cardTheme };

package/dist/theme/form.d.ts

@@ -1,10 +1,10 @@
 export declare const formFieldTheme: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
-            header?: import("tailwind-variants").ClassValue;
-            label?: import("tailwind-variants").ClassValue;
             root?: import("tailwind-variants").ClassValue;
             description?: import("tailwind-variants").ClassValue;
+            label?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
             error?: import("tailwind-variants").ClassValue;
             hint?: import("tailwind-variants").ClassValue;
             control?: import("tailwind-variants").ClassValue;
@@ -14,10 +14,10 @@ export declare const formFieldTheme: import("tailwind-variants").TVReturnType<{
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
-            header?: import("tailwind-variants").ClassValue;
-            label?: import("tailwind-variants").ClassValue;
             root?: import("tailwind-variants").ClassValue;
             description?: import("tailwind-variants").ClassValue;
+            label?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
             error?: import("tailwind-variants").ClassValue;
             hint?: import("tailwind-variants").ClassValue;
             control?: import("tailwind-variants").ClassValue;
@@ -36,10 +36,10 @@ export declare const formFieldTheme: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
-            header?: import("tailwind-variants").ClassValue;
-            label?: import("tailwind-variants").ClassValue;
             root?: import("tailwind-variants").ClassValue;
             description?: import("tailwind-variants").ClassValue;
+            label?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
             error?: import("tailwind-variants").ClassValue;
             hint?: import("tailwind-variants").ClassValue;
             control?: import("tailwind-variants").ClassValue;

package/dist/theme/index.d.ts

@@ -1,4 +1,7 @@
+export * from './alert';
+export * from './badge';
 export * from './button';
+export * from './card';
 export * from './checkbox';
 export * from './input';
 export * from './label';

package/dist/theme/presets.d.ts

@@ -12,6 +12,26 @@ export interface ThemeColors {
     muted?: string;
     mutedForeground?: string;
     border?: string;
+    success?: string;
+    successForeground?: string;
+    successMuted?: string;
+    successMutedForeground?: string;
+    successBorder?: string;
+    warning?: string;
+    warningForeground?: string;
+    warningMuted?: string;
+    warningMutedForeground?: string;
+    warningBorder?: string;
+    danger?: string;
+    dangerForeground?: string;
+    dangerMuted?: string;
+    dangerMutedForeground?: string;
+    dangerBorder?: string;
+    info?: string;
+    infoForeground?: string;
+    infoMuted?: string;
+    infoMutedForeground?: string;
+    infoBorder?: string;
 }
 /** A theme provides token values per appearance mode. Omitted tokens keep the defaults from theme.css. */
 export interface Theme {

package/dist/theme/presets.js

@@ -10,7 +10,27 @@ var e = {
 	accentForeground: "--iryx-accent-foreground",
 	muted: "--iryx-muted",
 	mutedForeground: "--iryx-muted-foreground",
-	border: "--iryx-border"
+	border: "--iryx-border",
+	success: "--iryx-success",
+	successForeground: "--iryx-success-foreground",
+	successMuted: "--iryx-success-muted",
+	successMutedForeground: "--iryx-success-muted-foreground",
+	successBorder: "--iryx-success-border",
+	warning: "--iryx-warning",
+	warningForeground: "--iryx-warning-foreground",
+	warningMuted: "--iryx-warning-muted",
+	warningMutedForeground: "--iryx-warning-muted-foreground",
+	warningBorder: "--iryx-warning-border",
+	danger: "--iryx-danger",
+	dangerForeground: "--iryx-danger-foreground",
+	dangerMuted: "--iryx-danger-muted",
+	dangerMutedForeground: "--iryx-danger-muted-foreground",
+	dangerBorder: "--iryx-danger-border",
+	info: "--iryx-info",
+	infoForeground: "--iryx-info-foreground",
+	infoMuted: "--iryx-info-muted",
+	infoMutedForeground: "--iryx-info-muted-foreground",
+	infoBorder: "--iryx-info-border"
 }, t = {
 	violet: {
 		light: {