@xonic0506/sonic-ui 0.1.0 → 0.2.0

package/dist/components/radio-group.js

@@ -0,0 +1,40 @@
+"use client";
+import { cn as e } from "../lib/cn.js";
+import { choiceFocusClass as t, choiceLabelClass as n } from "./checkbox.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Fieldset as o } from "@base-ui/react/fieldset";
+import { Radio as s } from "@base-ui/react/radio";
+import { RadioGroup as c } from "@base-ui/react/radio-group";
+//#region src/components/radio-group.tsx
+function l({ label: t, value: n, defaultValue: r, onValueChange: s, disabled: l, name: u, className: d, children: f }) {
+	return /* @__PURE__ */ a(o.Root, {
+		className: e("sn:m-0 sn:flex sn:min-w-0 sn:flex-col sn:gap-3 sn:border-0 sn:p-0 sn:font-sans", d),
+		children: [/* @__PURE__ */ i(o.Legend, {
+			className: "sn:p-0 sn:text-label sn:text-default",
+			children: t
+		}), /* @__PURE__ */ i(c, {
+			value: n,
+			defaultValue: r,
+			onValueChange: s && ((e) => s(e)),
+			disabled: l,
+			name: u,
+			className: "sn:flex sn:flex-col sn:gap-2",
+			children: f
+		})]
+	});
+}
+var u = r.forwardRef(function({ value: r, disabled: o, className: c, children: l }, u) {
+	return /* @__PURE__ */ a("label", {
+		className: e(n, o && "sn:cursor-not-allowed sn:opacity-(--sn-opacity-disabled)", c),
+		children: [/* @__PURE__ */ i(s.Root, {
+			ref: u,
+			value: r,
+			disabled: o,
+			className: e("sn:box-border sn:inline-flex sn:size-4 sn:shrink-0 sn:items-center sn:justify-center sn:rounded-full sn:border sn:border-strong sn:bg-surface sn:data-checked:border-transparent sn:data-checked:bg-primary", t),
+			children: /* @__PURE__ */ i(s.Indicator, { className: "sn:size-2 sn:rounded-full sn:bg-(--sn-color-text-on-primary)" })
+		}), l]
+	});
+});
+//#endregion
+export { u as Radio, l as RadioGroup };

package/dist/components/select.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface SelectBaseProps {
+    options: SelectOption[];
+    placeholder?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    name?: string;
+    id?: string;
+    className?: string;
+    'aria-label'?: string;
+}
+/** multiple이면 값이 배열이에요 */
+export type SelectProps = SelectBaseProps & ({
+    multiple?: false;
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+} | {
+    multiple: true;
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+});
+export declare function Select(props: SelectProps): React.JSX.Element;
+export {};

package/dist/components/select.js

@@ -0,0 +1,66 @@
+"use client";
+import { cn as e } from "../lib/cn.js";
+import { inputClass as t } from "./input.js";
+import { itemClass as n, popupClass as r } from "./popup-styles.js";
+import "react";
+import { Check as i, ChevronDown as a } from "lucide-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Select as c } from "@base-ui/react/select";
+//#region src/components/select.tsx
+function l(l) {
+	let { options: u, placeholder: d, invalid: f, disabled: p, name: m, id: h, className: g, multiple: _ } = l, v = (e) => u.find((t) => t.value === e)?.label ?? e;
+	return /* @__PURE__ */ s(c.Root, {
+		items: u,
+		multiple: _,
+		value: l.value,
+		defaultValue: l.defaultValue,
+		onValueChange: l.onValueChange && ((e) => l.onValueChange(e)),
+		disabled: p,
+		name: m,
+		children: [/* @__PURE__ */ s(c.Trigger, {
+			id: h,
+			"aria-label": l["aria-label"],
+			"aria-invalid": f || void 0,
+			className: e(t, "sn:group sn:flex sn:h-8 sn:items-center sn:gap-2 sn:text-left sn:cursor-default sn:data-popup-open:border-focus", g),
+			children: [/* @__PURE__ */ o(c.Value, {
+				placeholder: d,
+				className: "sn:min-w-0 sn:flex-1 sn:truncate sn:data-placeholder:text-muted",
+				children: _ ? (e) => e.length ? e.map(v).join(", ") : d : void 0
+			}), /* @__PURE__ */ o(c.Icon, {
+				className: "sn:flex sn:text-muted sn:transition-transform sn:duration-(--sn-duration-fast) sn:group-data-popup-open:rotate-180 sn:motion-reduce:transition-none sn:[&_svg]:size-4",
+				children: /* @__PURE__ */ o(a, {})
+			})]
+		}), /* @__PURE__ */ o(c.Portal, { children: /* @__PURE__ */ o(c.Positioner, {
+			sideOffset: 4,
+			alignItemWithTrigger: !1,
+			className: "sn:z-50 sn:outline-none",
+			children: /* @__PURE__ */ o(c.Popup, {
+				className: r,
+				children: /* @__PURE__ */ o(c.List, { children: u.map((t) => /* @__PURE__ */ s(c.Item, {
+					value: t.value,
+					disabled: t.disabled,
+					className: n,
+					children: [
+						_ && /* @__PURE__ */ o("span", {
+							className: e("sn:box-border sn:inline-flex sn:size-4 sn:shrink-0 sn:items-center sn:justify-center sn:rounded-sm sn:border sn:border-strong sn:bg-surface sn:text-on-primary sn:[&_svg]:size-3", "sn:group-data-selected:border-transparent sn:group-data-selected:bg-primary"),
+							children: /* @__PURE__ */ o(c.ItemIndicator, {
+								className: "sn:flex",
+								children: /* @__PURE__ */ o(i, {})
+							})
+						}),
+						/* @__PURE__ */ o(c.ItemText, {
+							className: "sn:min-w-0 sn:flex-1 sn:truncate",
+							children: t.label
+						}),
+						!_ && /* @__PURE__ */ o(c.ItemIndicator, {
+							className: "sn:flex",
+							children: /* @__PURE__ */ o(i, {})
+						})
+					]
+				}, t.value)) })
+			})
+		}) })]
+	});
+}
+//#endregion
+export { l as Select };

package/dist/components/separator.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface SeparatorProps {
+    orientation?: 'horizontal' | 'vertical';
+    className?: string;
+}
+/** 관련 없는 묶음 사이를 나눌 때만 써요. 1px border/default */
+export declare function Separator({ orientation, className }: SeparatorProps): React.JSX.Element;

package/dist/components/separator.js

@@ -0,0 +1,14 @@
+"use client";
+import { cn as e } from "../lib/cn.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+import { Separator as n } from "@base-ui/react/separator";
+//#region src/components/separator.tsx
+function r({ orientation: r = "horizontal", className: i }) {
+	return /* @__PURE__ */ t(n, {
+		orientation: r,
+		className: e("sn:shrink-0 sn:border-0 sn:bg-(--sn-color-border-default)", r === "horizontal" ? "sn:h-px sn:w-full" : "sn:w-px sn:self-stretch", i)
+	});
+}
+//#endregion
+export { r as Separator };

package/dist/components/skeleton.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface SkeletonProps {
+    shape?: 'text' | 'rect' | 'circle';
+    /** 크기는 쓰는 곳에서 정해요 (예: className="w-40") */
+    className?: string;
+}
+/** 로딩 자리 표시. 스크린 리더에는 숨겨요 — 로딩 영역 전체에 aria-busy를 두세요 */
+export declare function Skeleton({ shape, className }: SkeletonProps): React.JSX.Element;

package/dist/components/skeleton.js

@@ -0,0 +1,22 @@
+"use client";
+import { cn as e } from "../lib/cn.js";
+import "react";
+import { cva as t } from "class-variance-authority";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/skeleton.tsx
+var r = t("sn:block sn:shrink-0 sn:bg-subtle sn:animate-[sn-pulse_var(--sn-duration-loop)_ease-in-out_infinite] sn:motion-reduce:animate-none", {
+	variants: { shape: {
+		text: "sn:h-3 sn:w-full sn:rounded-sm",
+		rect: "sn:h-16 sn:w-full sn:rounded-md",
+		circle: "sn:size-8 sn:rounded-full"
+	} },
+	defaultVariants: { shape: "text" }
+});
+function i({ shape: t, className: i }) {
+	return /* @__PURE__ */ n("span", {
+		"aria-hidden": !0,
+		className: e(r({ shape: t }), i)
+	});
+}
+//#endregion
+export { i as Skeleton };

package/dist/components/state-layout.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface StateLayoutProps {
+    icon?: React.ReactNode;
+    iconClassName: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    className?: string;
+    role?: 'alert';
+    children?: React.ReactNode;
+}
+export declare function StateLayout({ icon, iconClassName, title, description, className, role, children }: StateLayoutProps): React.JSX.Element;

package/dist/components/state-layout.js

@@ -0,0 +1,31 @@
+"use client";
+import { cn as e } from "../lib/cn.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/state-layout.tsx
+function r({ icon: r, iconClassName: i, title: a, description: o, className: s, role: c, children: l }) {
+	return /* @__PURE__ */ n("div", {
+		role: c,
+		className: e("sn:box-border sn:flex sn:flex-col sn:items-center sn:gap-4 sn:px-6 sn:py-12 sn:text-center sn:font-sans", s),
+		children: [
+			r && /* @__PURE__ */ t("span", {
+				"aria-hidden": !0,
+				className: e("sn:inline-flex sn:size-12 sn:items-center sn:justify-center sn:rounded-full sn:bg-subtle sn:[&_svg]:size-6", i),
+				children: r
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "sn:flex sn:flex-col sn:gap-1",
+				children: [/* @__PURE__ */ t("p", {
+					className: "sn:m-0 sn:text-body-strong sn:text-default",
+					children: a
+				}), o && /* @__PURE__ */ t("p", {
+					className: "sn:m-0 sn:text-body sn:text-muted",
+					children: o
+				})]
+			}),
+			l
+		]
+	});
+}
+//#endregion
+export { r as StateLayout };

package/dist/components/switch.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface SwitchProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    name?: string;
+    className?: string;
+    children?: React.ReactNode;
+}
+/** 누르는 즉시 적용되는 설정에만 써요 */
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLElement>>;

package/dist/components/switch.js

@@ -0,0 +1,24 @@
+"use client";
+import { cn as e } from "../lib/cn.js";
+import { choiceFocusClass as t, choiceLabelClass as n } from "./checkbox.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Switch as o } from "@base-ui/react/switch";
+//#region src/components/switch.tsx
+var s = r.forwardRef(function({ checked: r, defaultChecked: s, onCheckedChange: c, disabled: l, name: u, className: d, children: f }, p) {
+	return /* @__PURE__ */ a("label", {
+		className: e(n, l && "sn:cursor-not-allowed sn:opacity-(--sn-opacity-disabled)", d),
+		children: [/* @__PURE__ */ i(o.Root, {
+			ref: p,
+			checked: r,
+			defaultChecked: s,
+			onCheckedChange: c && ((e) => c(e)),
+			disabled: l,
+			name: u,
+			className: e("sn:box-border sn:inline-flex sn:h-4 sn:w-7 sn:shrink-0 sn:items-center sn:rounded-full sn:border sn:border-strong sn:bg-subtle sn:p-px sn:transition-colors sn:duration-(--sn-duration-fast) sn:ease-standard sn:data-checked:border-transparent sn:data-checked:bg-primary sn:motion-reduce:transition-none", t),
+			children: /* @__PURE__ */ i(o.Thumb, { className: "sn:block sn:size-3 sn:rounded-full sn:bg-surface sn:transition-transform sn:duration-(--sn-duration-fast) sn:ease-standard sn:data-checked:translate-x-3 sn:data-checked:bg-(--sn-color-text-on-primary) sn:motion-reduce:transition-none" })
+		}), f]
+	});
+});
+//#endregion
+export { s as Switch };

package/dist/components/tabs.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+export interface TabsProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    className?: string;
+    children?: React.ReactNode;
+}
+/** 같은 대상의 다른 보기를 오갈 때 써요. 페이지 이동 링크에는 쓰지 않아요 */
+export declare function Tabs({ value, defaultValue, onValueChange, className, children }: TabsProps): React.JSX.Element;
+export interface TabsListProps {
+    /** 화살표 키로 이동하면 바로 탭을 바꿀지 (기본 true). false면 화살표로 이동하고 Enter·Space로 바꿔요 */
+    activateOnFocus?: boolean;
+    /** 끝에서 화살표를 누르면 처음으로 돌아갈지 (기본 true) */
+    loopFocus?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare function TabsList({ activateOnFocus, loopFocus, className, children }: TabsListProps): React.JSX.Element;
+export interface TabProps {
+    value: string;
+    disabled?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;
+export declare function TabsPanel({ value, className, children }: {
+    value: string;
+    className?: string;
+    children?: React.ReactNode;
+}): React.JSX.Element;

package/dist/components/tabs.js

@@ -0,0 +1,41 @@
+"use client";
+import { cn as e } from "../lib/cn.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Tabs as i } from "@base-ui/react/tabs";
+//#region src/components/tabs.tsx
+function a({ value: t, defaultValue: r, onValueChange: a, className: o, children: s }) {
+	return /* @__PURE__ */ n(i.Root, {
+		value: t,
+		defaultValue: r,
+		onValueChange: a && ((e) => a(e)),
+		className: e("sn:flex sn:flex-col sn:gap-4 sn:font-sans", o),
+		children: s
+	});
+}
+function o({ activateOnFocus: t = !0, loopFocus: a = !0, className: o, children: s }) {
+	return /* @__PURE__ */ r(i.List, {
+		activateOnFocus: t,
+		loopFocus: a,
+		className: e("sn:relative sn:flex sn:border-b sn:border-default", o),
+		children: [s, /* @__PURE__ */ n(i.Indicator, { className: "sn:absolute sn:bottom-[-1px] sn:left-0 sn:h-0.5 sn:w-(--active-tab-width) sn:translate-x-(--active-tab-left) sn:bg-primary sn:transition-[translate,width] sn:duration-(--sn-duration-normal) sn:ease-standard sn:motion-reduce:transition-none" })]
+	});
+}
+var s = t.forwardRef(function({ value: t, disabled: r, className: a, children: o }, s) {
+	return /* @__PURE__ */ n(i.Tab, {
+		ref: s,
+		value: t,
+		disabled: r,
+		className: e("sn:box-border sn:flex sn:h-8 sn:items-center sn:border-0 sn:bg-transparent sn:px-3 sn:font-sans sn:text-body-strong sn:text-muted sn:cursor-pointer sn:focus-visible:outline-2 sn:focus-visible:-outline-offset-2 sn:focus-visible:outline-focus sn:transition-colors sn:duration-(--sn-duration-fast) sn:hover:not-data-disabled:text-default sn:data-active:text-default sn:data-disabled:cursor-not-allowed sn:data-disabled:opacity-(--sn-opacity-disabled)", a),
+		children: o
+	});
+});
+function c({ value: t, className: r, children: a }) {
+	return /* @__PURE__ */ n(i.Panel, {
+		value: t,
+		className: e("sn:text-body sn:text-default sn:focus-visible:outline-2 sn:focus-visible:outline-offset-2 sn:focus-visible:outline-focus", r),
+		children: a
+	});
+}
+//#endregion
+export { s as Tab, a as Tabs, o as TabsList, c as TabsPanel };

package/dist/components/textarea.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'> {
+    invalid?: boolean;
+    className?: string;
+}
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/textarea.js

@@ -0,0 +1,20 @@
+"use client";
+import { cn as e } from "../lib/cn.js";
+import { inputClass as t } from "./input.js";
+import * as n from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { Input as i } from "@base-ui/react/input";
+//#region src/components/textarea.tsx
+var a = n.forwardRef(function({ invalid: n, className: a, rows: o = 3, ...s }, c) {
+	return /* @__PURE__ */ r(i, {
+		render: /* @__PURE__ */ r("textarea", {
+			ref: c,
+			rows: o
+		}),
+		"aria-invalid": n || void 0,
+		className: e(t, "sn:min-h-20 sn:resize-y sn:py-2", a),
+		...s
+	});
+});
+//#endregion
+export { a as Textarea };

package/dist/components/toast.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export type ToastTone = 'neutral' | 'success' | 'warning' | 'danger';
+export interface ToastOptions {
+    /** 결과 한 줄 */
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    tone?: ToastTone;
+    /** 사라지기까지 ms. 0이면 직접 닫을 때까지 남아요 (기본 5000) */
+    timeout?: number;
+}
+/** ToastProvider 안의 클라이언트 컴포넌트에서만 써요 */
+export declare function useToast(): {
+    /** 알림을 띄우고 id를 돌려줘요 */
+    add: ({ tone, ...options }: ToastOptions) => string;
+    /** id가 없으면 모두 닫아요 */
+    close: (id?: string) => void;
+};
+export interface ToastProviderProps {
+    /** 기본 사라지는 시간 ms (기본 5000) */
+    timeout?: number;
+    children?: React.ReactNode;
+}
+/** 앱 최상단에 한 번 둬요. 알림은 화면 오른쪽 아래에 쌓여요 */
+export declare function ToastProvider({ timeout, children }: ToastProviderProps): React.JSX.Element;

package/dist/components/toast.js

@@ -0,0 +1,62 @@
+"use client";
+import { cn as e } from "../lib/cn.js";
+import { Button as t } from "./button.js";
+import * as n from "react";
+import { CircleAlert as r, CircleCheck as i, Info as a, TriangleAlert as o, X as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Toast as u } from "@base-ui/react/toast";
+//#region src/components/toast.tsx
+var d = {
+	neutral: /* @__PURE__ */ c(a, { className: "sn:text-muted" }),
+	success: /* @__PURE__ */ c(i, { className: "sn:text-success" }),
+	warning: /* @__PURE__ */ c(o, { className: "sn:text-warning" }),
+	danger: /* @__PURE__ */ c(r, { className: "sn:text-danger" })
+};
+function f() {
+	let { add: e, close: t } = u.useToastManager();
+	return n.useMemo(() => ({
+		add: ({ tone: t = "neutral", ...n }) => e({
+			...n,
+			type: t,
+			priority: t === "danger" ? "high" : "low"
+		}),
+		close: (e) => t(e)
+	}), [e, t]);
+}
+function p({ timeout: e, children: t }) {
+	return /* @__PURE__ */ l(u.Provider, {
+		timeout: e,
+		children: [t, /* @__PURE__ */ c(u.Portal, { children: /* @__PURE__ */ c(u.Viewport, {
+			"aria-label": "알림",
+			className: "sn:fixed sn:right-4 sn:bottom-4 sn:z-50 sn:flex sn:w-90 sn:max-w-[calc(100vw-2*var(--sn-space-4))] sn:flex-col-reverse sn:gap-2 sn:outline-none",
+			children: /* @__PURE__ */ c(m, {})
+		}) })]
+	});
+}
+function m() {
+	let { toasts: n } = u.useToastManager();
+	return n.map((n) => /* @__PURE__ */ l(u.Root, {
+		toast: n,
+		className: "sn:box-border sn:flex sn:items-start sn:gap-3 sn:rounded-lg sn:border sn:border-default sn:bg-surface sn:p-3 sn:font-sans sn:text-default sn:transition-[opacity,translate] sn:duration-(--sn-duration-normal) sn:ease-standard sn:focus-visible:outline-2 sn:focus-visible:outline-offset-2 sn:focus-visible:outline-focus sn:data-starting-style:translate-y-2 sn:data-starting-style:opacity-0 sn:data-ending-style:translate-y-2 sn:data-ending-style:opacity-0 sn:data-limited:hidden sn:motion-reduce:transition-none",
+		children: [
+			/* @__PURE__ */ c("span", {
+				className: "sn:flex sn:h-7 sn:shrink-0 sn:items-center sn:[&_svg]:size-4",
+				children: d[n.type ?? "neutral"]
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "sn:flex sn:min-w-0 sn:flex-1 sn:flex-col sn:gap-1 sn:pt-1",
+				children: [/* @__PURE__ */ c(u.Title, { className: "sn:m-0 sn:text-body-strong sn:text-default" }), /* @__PURE__ */ c(u.Description, { className: e("sn:m-0 sn:text-caption sn:text-muted", !n.description && "sn:hidden") })]
+			}),
+			/* @__PURE__ */ c(u.Close, {
+				render: /* @__PURE__ */ c(t, {
+					size: "icon-sm",
+					variant: "ghost",
+					"aria-label": "알림 닫기"
+				}),
+				children: /* @__PURE__ */ c(s, {})
+			})
+		]
+	}, n.id));
+}
+//#endregion
+export { p as ToastProvider, f as useToast };

package/dist/components/tooltip.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface TooltipProps {
+    /** 보여 줄 짧은 이름. 중요한 정보나 클릭할 요소는 넣지 않아요 */
+    content: React.ReactNode;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    className?: string;
+    /** 대상 요소 하나 (보통 아이콘 버튼) */
+    children: React.ReactElement;
+}
+/** 마우스는 600ms 뒤, 키보드 포커스는 바로 보여요 */
+export declare function Tooltip({ content, side, className, children }: TooltipProps): React.JSX.Element;

package/dist/components/tooltip.js

@@ -0,0 +1,19 @@
+"use client";
+import { cn as e } from "../lib/cn.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Tooltip as r } from "@base-ui/react/tooltip";
+//#region src/components/tooltip.tsx
+function i({ content: i, side: a = "top", className: o, children: s }) {
+	return /* @__PURE__ */ n(r.Root, { children: [/* @__PURE__ */ t(r.Trigger, { render: s }), /* @__PURE__ */ t(r.Portal, { children: /* @__PURE__ */ t(r.Positioner, {
+		side: a,
+		sideOffset: 4,
+		className: "sn:z-50",
+		children: /* @__PURE__ */ t(r.Popup, {
+			className: e("sn:origin-(--transform-origin) sn:rounded-md sn:bg-inverse sn:px-2 sn:py-1 sn:font-sans sn:text-caption sn:text-inverse sn:transition-[opacity,scale] sn:duration-(--sn-duration-fast) sn:ease-standard sn:data-starting-style:scale-98 sn:data-starting-style:opacity-0 sn:data-ending-style:scale-98 sn:data-ending-style:opacity-0 sn:motion-reduce:transition-none", o),
+			children: i
+		})
+	}) })] });
+}
+//#endregion
+export { i as Tooltip };

package/dist/index.d.ts

@@ -1,6 +1,24 @@
 export { Button, type ButtonProps } from './components/button';
 export { Input, type InputProps } from './components/input';
+export { Textarea, type TextareaProps } from './components/textarea';
+export { Checkbox, CheckboxGroup, type CheckboxProps, type CheckboxGroupProps } from './components/checkbox';
+export { RadioGroup, Radio, type RadioGroupProps, type RadioProps } from './components/radio-group';
+export { Switch, type SwitchProps } from './components/switch';
+export { Select, type SelectProps, type SelectOption } from './components/select';
 export { Text, type TextProps, type TextVariant } from './components/text';
 export { Card, CardHeader, CardTitle, CardDescription, CardBody, CardFooter, type CardProps } from './components/card';
 export { Avatar, type AvatarProps } from './components/avatar';
+export { Field, type FieldProps } from './components/field';
+export { Skeleton, type SkeletonProps } from './components/skeleton';
+export { EmptyState, type EmptyStateProps } from './components/empty-state';
+export { ErrorState, type ErrorStateProps } from './components/error-state';
 export { Dialog, DialogTrigger, DialogPopup, DialogTitle, DialogDescription, DialogClose, DialogFooter, type DialogProps, type DialogButtonProps, type DialogPopupProps, } from './components/dialog';
+export { AlertDialog, AlertDialogTrigger, AlertDialogPopup, AlertDialogTitle, AlertDialogDescription, AlertDialogClose, AlertDialogFooter, } from './components/alert-dialog';
+export { Menu, MenuTrigger, MenuPopup, MenuItem, MenuSeparator, type MenuProps, type MenuTriggerProps, type MenuPopupProps, type MenuItemProps } from './components/menu';
+export { Popover, PopoverTrigger, PopoverPopup, PopoverTitle, PopoverDescription, PopoverClose, type PopoverProps, type PopoverPopupProps } from './components/popover';
+export { Tooltip, type TooltipProps } from './components/tooltip';
+export { Tabs, TabsList, Tab, TabsPanel, type TabsProps, type TabsListProps, type TabProps } from './components/tabs';
+export { Separator, type SeparatorProps } from './components/separator';
+export { ToastProvider, useToast, type ToastProviderProps, type ToastOptions, type ToastTone } from './components/toast';
+export { Badge, type BadgeProps } from './components/badge';
+export { Progress, type ProgressProps } from './components/progress';

package/dist/index.js

@@ -1,8 +1,26 @@
 "use client";
 import { Button as e } from "./components/button.js";
 import { Input as t } from "./components/input.js";
-import { Text as n } from "./components/text.js";
-import { Card as r, CardBody as i, CardDescription as a, CardFooter as o, CardHeader as s, CardTitle as c } from "./components/card.js";
-import { Avatar as l } from "./components/avatar.js";
-import { Dialog as u, DialogClose as d, DialogDescription as f, DialogFooter as p, DialogPopup as m, DialogTitle as h, DialogTrigger as g } from "./components/dialog.js";
-export { l as Avatar, e as Button, r as Card, i as CardBody, a as CardDescription, o as CardFooter, s as CardHeader, c as CardTitle, u as Dialog, d as DialogClose, f as DialogDescription, p as DialogFooter, m as DialogPopup, h as DialogTitle, g as DialogTrigger, t as Input, n as Text };
+import { Textarea as n } from "./components/textarea.js";
+import { Checkbox as r, CheckboxGroup as i } from "./components/checkbox.js";
+import { Radio as a, RadioGroup as o } from "./components/radio-group.js";
+import { Switch as s } from "./components/switch.js";
+import { Select as c } from "./components/select.js";
+import { Text as l } from "./components/text.js";
+import { Card as u, CardBody as d, CardDescription as f, CardFooter as p, CardHeader as m, CardTitle as h } from "./components/card.js";
+import { Avatar as g } from "./components/avatar.js";
+import { Field as _ } from "./components/field.js";
+import { Skeleton as v } from "./components/skeleton.js";
+import { EmptyState as y } from "./components/empty-state.js";
+import { ErrorState as b } from "./components/error-state.js";
+import { Dialog as x, DialogClose as S, DialogDescription as C, DialogFooter as w, DialogPopup as T, DialogTitle as E, DialogTrigger as D } from "./components/dialog.js";
+import { AlertDialog as O, AlertDialogClose as k, AlertDialogDescription as A, AlertDialogFooter as j, AlertDialogPopup as M, AlertDialogTitle as N, AlertDialogTrigger as P } from "./components/alert-dialog.js";
+import { Menu as F, MenuItem as I, MenuPopup as L, MenuSeparator as R, MenuTrigger as z } from "./components/menu.js";
+import { Popover as B, PopoverClose as V, PopoverDescription as H, PopoverPopup as U, PopoverTitle as W, PopoverTrigger as G } from "./components/popover.js";
+import { Tooltip as K } from "./components/tooltip.js";
+import { Tab as q, Tabs as J, TabsList as Y, TabsPanel as X } from "./components/tabs.js";
+import { Separator as Z } from "./components/separator.js";
+import { ToastProvider as Q, useToast as $ } from "./components/toast.js";
+import { Badge as ee } from "./components/badge.js";
+import { Progress as te } from "./components/progress.js";
+export { O as AlertDialog, k as AlertDialogClose, A as AlertDialogDescription, j as AlertDialogFooter, M as AlertDialogPopup, N as AlertDialogTitle, P as AlertDialogTrigger, g as Avatar, ee as Badge, e as Button, u as Card, d as CardBody, f as CardDescription, p as CardFooter, m as CardHeader, h as CardTitle, r as Checkbox, i as CheckboxGroup, x as Dialog, S as DialogClose, C as DialogDescription, w as DialogFooter, T as DialogPopup, E as DialogTitle, D as DialogTrigger, y as EmptyState, b as ErrorState, _ as Field, t as Input, F as Menu, I as MenuItem, L as MenuPopup, R as MenuSeparator, z as MenuTrigger, B as Popover, V as PopoverClose, H as PopoverDescription, U as PopoverPopup, W as PopoverTitle, G as PopoverTrigger, te as Progress, a as Radio, o as RadioGroup, c as Select, Z as Separator, v as Skeleton, s as Switch, q as Tab, J as Tabs, Y as TabsList, X as TabsPanel, l as Text, n as Textarea, Q as ToastProvider, K as Tooltip, $ as useToast };