@xonic0506/sonic-ui 0.4.2 → 0.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/button-variants.d.ts +5 -0
- package/dist/components/button-variants.js +26 -0
- package/dist/components/button.d.ts +0 -5
- package/dist/components/button.js +10 -31
- package/dist/components/illustration.js +0 -1
- package/dist/components/popup-styles.js +0 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +3 -3
- package/dist/lib/cn.js +0 -1
- package/package.json +1 -1
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/** 링크를 버튼 모양으로 그릴 때: <NextLink className={buttonVariants({ variant: 'secondary' })} /> */
|
|
2
|
+
export declare const buttonVariants: (props?: ({
|
|
3
|
+
variant?: "danger" | "ghost" | "primary" | "secondary" | null | undefined;
|
|
4
|
+
size?: "icon-lg" | "icon-md" | "icon-sm" | "lg" | "md" | "sm" | null | undefined;
|
|
5
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { cva as e } from "class-variance-authority";
|
|
2
|
+
//#region src/components/button-variants.ts
|
|
3
|
+
var t = e("sn:box-border sn:inline-flex sn:items-center sn:justify-center sn:gap-2 sn:whitespace-nowrap sn:rounded-md sn:border sn:border-transparent sn:font-sans sn:cursor-pointer sn:select-none sn:transition-colors sn:duration-(--sn-duration-fast) sn:ease-standard sn:focus-visible:outline-2 sn:focus-visible:outline-offset-2 sn:focus-visible:outline-focus sn:data-disabled:not-data-loading:cursor-not-allowed sn:data-disabled:not-data-loading:opacity-(--sn-opacity-disabled) sn:data-loading:cursor-progress sn:[&_svg]:pointer-events-none sn:[&_svg]:shrink-0", {
|
|
4
|
+
variants: {
|
|
5
|
+
variant: {
|
|
6
|
+
primary: "sn:bg-primary sn:text-on-primary sn:hover:not-data-disabled:bg-primary-hover",
|
|
7
|
+
secondary: "sn:border-default sn:bg-surface sn:text-default sn:hover:not-data-disabled:bg-subtle",
|
|
8
|
+
ghost: "sn:bg-transparent sn:text-default sn:hover:not-data-disabled:bg-subtle",
|
|
9
|
+
danger: "sn:bg-danger sn:text-on-danger"
|
|
10
|
+
},
|
|
11
|
+
size: {
|
|
12
|
+
sm: "sn:h-7 sn:px-2 sn:text-label sn:[&_svg]:size-4",
|
|
13
|
+
md: "sn:h-8 sn:px-3 sn:text-body-strong sn:[&_svg]:size-4",
|
|
14
|
+
lg: "sn:h-10 sn:px-4 sn:text-body-strong sn:[&_svg]:size-5",
|
|
15
|
+
"icon-sm": "sn:size-7 sn:p-0 sn:[&_svg]:size-4",
|
|
16
|
+
"icon-md": "sn:size-8 sn:p-0 sn:[&_svg]:size-4",
|
|
17
|
+
"icon-lg": "sn:size-10 sn:p-0 sn:[&_svg]:size-5"
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
defaultVariants: {
|
|
21
|
+
variant: "primary",
|
|
22
|
+
size: "md"
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
//#endregion
|
|
26
|
+
export { t as buttonVariants };
|
|
@@ -1,9 +1,4 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
/** 링크를 버튼 모양으로 그릴 때: <NextLink className={buttonVariants({ variant: 'secondary' })} /> */
|
|
3
|
-
export declare const buttonVariants: (props?: ({
|
|
4
|
-
variant?: "danger" | "ghost" | "primary" | "secondary" | null | undefined;
|
|
5
|
-
size?: "icon-lg" | "icon-md" | "icon-sm" | "lg" | "md" | "sm" | null | undefined;
|
|
6
|
-
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
2
|
interface ButtonBaseProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
|
|
8
3
|
variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
|
|
9
4
|
className?: string;
|
|
@@ -1,35 +1,14 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { cn as e } from "../lib/cn.js";
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
3
|
+
import { buttonVariants as t } from "./button-variants.js";
|
|
4
|
+
import * as n from "react";
|
|
5
|
+
import { Button as r } from "@base-ui/react/button";
|
|
6
6
|
import { LoaderCircle as i } from "lucide-react";
|
|
7
7
|
import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
8
8
|
//#region src/components/button.tsx
|
|
9
|
-
var c =
|
|
10
|
-
variants: {
|
|
11
|
-
variant: {
|
|
12
|
-
primary: "sn:bg-primary sn:text-on-primary sn:hover:not-data-disabled:bg-primary-hover",
|
|
13
|
-
secondary: "sn:border-default sn:bg-surface sn:text-default sn:hover:not-data-disabled:bg-subtle",
|
|
14
|
-
ghost: "sn:bg-transparent sn:text-default sn:hover:not-data-disabled:bg-subtle",
|
|
15
|
-
danger: "sn:bg-danger sn:text-on-danger"
|
|
16
|
-
},
|
|
17
|
-
size: {
|
|
18
|
-
sm: "sn:h-7 sn:px-2 sn:text-label sn:[&_svg]:size-4",
|
|
19
|
-
md: "sn:h-8 sn:px-3 sn:text-body-strong sn:[&_svg]:size-4",
|
|
20
|
-
lg: "sn:h-10 sn:px-4 sn:text-body-strong sn:[&_svg]:size-5",
|
|
21
|
-
"icon-sm": "sn:size-7 sn:p-0 sn:[&_svg]:size-4",
|
|
22
|
-
"icon-md": "sn:size-8 sn:p-0 sn:[&_svg]:size-4",
|
|
23
|
-
"icon-lg": "sn:size-10 sn:p-0 sn:[&_svg]:size-5"
|
|
24
|
-
}
|
|
25
|
-
},
|
|
26
|
-
defaultVariants: {
|
|
27
|
-
variant: "primary",
|
|
28
|
-
size: "md"
|
|
29
|
-
}
|
|
30
|
-
}), l = t.forwardRef(function({ variant: t, size: r, className: l, render: u, loading: d, disabled: f, children: p, ...m }, h) {
|
|
9
|
+
var c = n.forwardRef(function({ variant: n, size: c, className: l, render: u, loading: d, disabled: f, children: p, ...m }, h) {
|
|
31
10
|
let g = /* @__PURE__ */ o(i, { className: "sn:animate-[sn-spin_var(--sn-duration-loop)_linear_infinite] sn:motion-reduce:animate-none" });
|
|
32
|
-
return /* @__PURE__ */ o(
|
|
11
|
+
return /* @__PURE__ */ o(r, {
|
|
33
12
|
ref: h,
|
|
34
13
|
render: u,
|
|
35
14
|
nativeButton: !u || u.type === "button",
|
|
@@ -37,13 +16,13 @@ var c = r("sn:box-border sn:inline-flex sn:items-center sn:justify-center sn:gap
|
|
|
37
16
|
focusableWhenDisabled: d,
|
|
38
17
|
"aria-busy": d || void 0,
|
|
39
18
|
"data-loading": d ? "" : void 0,
|
|
40
|
-
className: e(
|
|
41
|
-
variant:
|
|
42
|
-
size:
|
|
19
|
+
className: e(t({
|
|
20
|
+
variant: n,
|
|
21
|
+
size: c
|
|
43
22
|
}), l),
|
|
44
23
|
...m,
|
|
45
|
-
children: d &&
|
|
24
|
+
children: d && c?.startsWith("icon-") ? g : d ? /* @__PURE__ */ s(a, { children: [g, p] }) : p
|
|
46
25
|
});
|
|
47
26
|
});
|
|
48
27
|
//#endregion
|
|
49
|
-
export {
|
|
28
|
+
export { c as Button };
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
//#region src/components/popup-styles.ts
|
|
3
2
|
var e = "sn:box-border sn:min-w-(--anchor-width) sn:max-h-(--available-height) sn:overflow-y-auto sn:origin-(--transform-origin) sn:rounded-lg sn:border sn:border-default sn:bg-surface sn:p-1 sn:font-sans sn:text-body sn:text-default sn:outline-none sn:transition-[opacity,scale] sn:duration-(--sn-duration-normal) 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", t = "sn:group sn:flex sn:h-8 sn:cursor-default sn:items-center sn:gap-2 sn:rounded-md sn:px-2 sn:outline-none sn:select-none sn:data-highlighted:bg-subtle sn:data-disabled:opacity-(--sn-opacity-disabled) sn:[&_svg]:size-4 sn:[&_svg]:shrink-0", n = "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";
|
|
4
3
|
//#endregion
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
export { Button,
|
|
1
|
+
export { Button, type ButtonProps } from './components/button';
|
|
2
|
+
export { buttonVariants } from './components/button-variants';
|
|
2
3
|
export { Input, type InputProps } from './components/input';
|
|
3
4
|
export { Textarea, type TextareaProps } from './components/textarea';
|
|
4
5
|
export { Checkbox, CheckboxGroup, type CheckboxProps, type CheckboxGroupProps } from './components/checkbox';
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import { Button as
|
|
1
|
+
import { buttonVariants as e } from "./components/button-variants.js";
|
|
2
|
+
import { Button as t } from "./components/button.js";
|
|
3
3
|
import { Input as n } from "./components/input.js";
|
|
4
4
|
import { Textarea as r } from "./components/textarea.js";
|
|
5
5
|
import { Checkbox as i, CheckboxGroup as a } from "./components/checkbox.js";
|
|
@@ -29,4 +29,4 @@ import { Table as ae, TableBody as oe, TableCell as se, TableHead as ce, TableHe
|
|
|
29
29
|
import { ToggleGroup as de, ToggleGroupItem as fe } from "./components/toggle-group.js";
|
|
30
30
|
import { Accordion as pe, AccordionItem as me, AccordionPanel as he, AccordionTrigger as ge } from "./components/accordion.js";
|
|
31
31
|
import { FileDropzone as _e, FileList as ve, formatBytes as ye } from "./components/file-upload.js";
|
|
32
|
-
export { pe as Accordion, me as AccordionItem, he as AccordionPanel, ge as AccordionTrigger, A as AlertDialog, j as AlertDialogClose, M as AlertDialogDescription, N as AlertDialogFooter, P as AlertDialogPopup, F as AlertDialogTitle, I as AlertDialogTrigger, _ as Avatar, ne as Badge,
|
|
32
|
+
export { pe as Accordion, me as AccordionItem, he as AccordionPanel, ge as AccordionTrigger, A as AlertDialog, j as AlertDialogClose, M as AlertDialogDescription, N as AlertDialogFooter, P as AlertDialogPopup, F as AlertDialogTitle, I as AlertDialogTrigger, _ as Avatar, ne as Badge, t as Button, d as Card, f as CardBody, p as CardDescription, m as CardFooter, h as CardHeader, g as CardTitle, i as Checkbox, a as CheckboxGroup, C as Dialog, w as DialogClose, T as DialogDescription, E as DialogFooter, D as DialogPopup, O as DialogTitle, k as DialogTrigger, b as EmptyState, S as ErrorPage, x as ErrorState, v as Field, _e as FileDropzone, ve as FileList, n as Input, ie as Link, L as Menu, R as MenuItem, z as MenuPopup, B as MenuSeparator, V as MenuTrigger, H as Popover, U as PopoverClose, W as PopoverDescription, G as PopoverPopup, K as PopoverTitle, q as PopoverTrigger, re as Progress, o as Radio, s as RadioGroup, l as Select, $ as Separator, y as Skeleton, c as Switch, Y as Tab, ae as Table, oe as TableBody, se as TableCell, ce as TableHead, le as TableHeader, ue as TableRow, X as Tabs, Z as TabsList, Q as TabsPanel, u as Text, r as Textarea, ee as ToastProvider, de as ToggleGroup, fe as ToggleGroupItem, J as Tooltip, e as buttonVariants, ye as formatBytes, te as useToast };
|
package/dist/lib/cn.js
CHANGED