@lawkit/ui 0.1.2 → 0.1.4

package/dist/tokens/src/themes/light-theme.css.d.ts

@@ -18,6 +18,7 @@ export declare const defaultThemeValues: {
     shadow: {
         readonly focus: "0 0 0 3px rgba(47, 91, 255, 0.14)";
         readonly raised: "0 6px 16px rgba(17, 24, 39, 0.08)";
+        readonly modal: "0 4px 15px rgba(44, 63, 88, 0.35)";
     };
 };
 export declare const lightThemeClass: string;

package/dist/ui-v3/src/components/Alert/Alert.css.d.ts

@@ -42,16 +42,16 @@ export declare const actions: string;
 export declare const actionButton: import('@vanilla-extract/recipes').RuntimeFn<{
     intent: {
         primary: {
-            backgroundColor: string;
+            backgroundColor: `var(--${string})`;
         };
         warning: {
-            backgroundColor: string;
+            backgroundColor: `var(--${string})`;
         };
         danger: {
-            backgroundColor: string;
+            backgroundColor: `var(--${string})`;
         };
         secondary: {
-            backgroundColor: string;
+            backgroundColor: `var(--${string})`;
         };
     };
 }>;

package/dist/ui-v3/src/components/Avatar/Avatar.css.d.ts

@@ -20,7 +20,7 @@ export declare const labelCircle: import('@vanilla-extract/recipes').RuntimeFn<{
     color: {
         primary: {
             backgroundColor: "rgba(33, 81, 236, 0.12)";
-            color: string;
+            color: `var(--${string})`;
         };
         success: {
             backgroundColor: "rgba(39, 194, 129, 0.12)";

package/dist/ui-v3/src/components/ButtonGroup/ButtonGroup.css.d.ts

@@ -14,22 +14,22 @@ export declare const root: import('@vanilla-extract/recipes').RuntimeFn<{
 export declare const item: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         fill: {
-            backgroundColor: string;
-            color: string;
+            backgroundColor: `var(--${string})`;
+            color: `var(--${string})`;
             borderRight: "1px solid rgba(0, 0, 0, 0.12)";
             selectors: {
                 "&:last-child": {
                     borderRight: "none";
                 };
                 "&:hover:not([data-active='true'])": {
-                    backgroundColor: string;
+                    backgroundColor: `var(--${string})`;
                 };
             };
         };
         outline: {
             backgroundColor: "transparent";
-            color: string;
-            border: `1px solid ${string}`;
+            color: `var(--${string})`;
+            border: `1px solid var(--${string})`;
             marginLeft: number;
             borderRadius: number;
             selectors: {

package/dist/ui-v3/src/components/ButtonTab/ButtonTab.css.d.ts

@@ -2,11 +2,11 @@ export declare const root: string;
 export declare const tab: import('@vanilla-extract/recipes').RuntimeFn<{
     active: {
         true: {
-            backgroundColor: string;
-            color: string;
+            backgroundColor: `var(--${string})`;
+            color: `var(--${string})`;
             selectors: {
                 "&:hover:not(:disabled)": {
-                    backgroundColor: string;
+                    backgroundColor: `var(--${string})`;
                 };
             };
         };

package/dist/ui-v3/src/components/Card/Card.css.d.ts

@@ -1,7 +1,7 @@
 export declare const root: import('@vanilla-extract/recipes').RuntimeFn<{
     bordered: {
         true: {
-            border: `1px solid ${string}`;
+            border: `1px solid var(--${string})`;
         };
         false: {};
     };

package/dist/ui-v3/src/components/ChartTooltip/ChartTooltip.css.d.ts

@@ -1,11 +1,11 @@
 export declare const root: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         default: {
-            backgroundColor: string;
+            backgroundColor: `var(--${string})`;
             border: "1px solid #eeeff2";
         };
         pie: {
-            backgroundColor: string;
+            backgroundColor: `var(--${string})`;
         };
     };
 }>;
@@ -20,7 +20,7 @@ export declare const label: import('@vanilla-extract/recipes').RuntimeFn<{
             color: "#4c5469";
         };
         pie: {
-            color: string;
+            color: `var(--${string})`;
         };
     };
 }>;
@@ -30,7 +30,7 @@ export declare const value: import('@vanilla-extract/recipes').RuntimeFn<{
             color: "#4c5469";
         };
         pie: {
-            color: string;
+            color: `var(--${string})`;
         };
     };
 }>;

package/dist/ui-v3/src/components/Checkbox/Checkbox.css.d.ts

@@ -18,11 +18,11 @@ export declare const box: import('@vanilla-extract/recipes').RuntimeFn<{
     };
     checked: {
         true: {
-            backgroundColor: string;
+            backgroundColor: `var(--${string})`;
             boxShadow: "none";
         };
         false: {
-            backgroundColor: string;
+            backgroundColor: `var(--${string})`;
             boxShadow: "inset 0 0 0 1.5px #9ea7b8";
         };
     };

package/dist/ui-v3/src/components/ChipsNavigation/ChipsNavigation.css.d.ts

@@ -5,7 +5,7 @@ export declare const chip: import('@vanilla-extract/recipes').RuntimeFn<{
     active: {
         true: {
             backgroundColor: "#343434";
-            color: string;
+            color: `var(--${string})`;
             selectors: {
                 "&:hover": {
                     opacity: number;
@@ -14,7 +14,7 @@ export declare const chip: import('@vanilla-extract/recipes').RuntimeFn<{
         };
         false: {
             backgroundColor: "#3434341F";
-            color: string;
+            color: `var(--${string})`;
             selectors: {
                 "&:hover": {
                     backgroundColor: "#34343433";

package/dist/ui-v3/src/components/Collapse/Collapse.css.d.ts

@@ -13,7 +13,7 @@ export declare const root: import('@vanilla-extract/recipes').RuntimeFn<{
 export declare const header: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         default: {
-            borderBottom: `1px solid ${string}`;
+            borderBottom: `1px solid var(--${string})`;
         };
         shadow: {};
         border: {};
@@ -46,10 +46,10 @@ export declare const contentInner: import('@vanilla-extract/recipes').RuntimeFn<
     variant: {
         default: {};
         shadow: {
-            borderTop: `1px solid ${string}`;
+            borderTop: `1px solid var(--${string})`;
         };
         border: {
-            borderTop: `1px solid ${string}`;
+            borderTop: `1px solid var(--${string})`;
         };
         margin: {};
     };

package/dist/ui-v3/src/components/DataTable/DataTable.css.d.ts

@@ -8,7 +8,7 @@ export declare const sortIcon: import('@vanilla-extract/recipes').RuntimeFn<{
     active: {
         true: {
             opacity: number;
-            color: string;
+            color: `var(--${string})`;
         };
         false: {};
     };

package/dist/ui-v3/src/components/DataTable/index.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactNode } from 'react';
-import { ColumnDef, SortingState, RowSelectionState, OnChangeFn, Row } from '@tanstack/react-table';
-export type { ColumnDef, SortingState, RowSelectionState, OnChangeFn, Row, };
+import { ColumnDef, SortingState, RowSelectionState, OnChangeFn } from '@tanstack/react-table';
+export * from '@tanstack/react-table';
 export interface DataTableProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
     /** 테이블 데이터 */
     data: T[];

package/dist/ui-v3/src/components/DatePicker/DatePicker.css.d.ts

@@ -18,29 +18,29 @@ export declare const dateButton: import('@vanilla-extract/recipes').RuntimeFn<{
                 borderColor: "#cfd5e1";
             };
             ":focus-visible": {
-                borderColor: string;
+                borderColor: `var(--${string})`;
             };
         };
         today: {
-            color: string;
+            color: `var(--${string})`;
             fontWeight: `var(--${string})`;
             ":hover": {
                 backgroundColor: "rgba(158, 167, 184, 0.12)";
                 borderColor: "#cfd5e1";
             };
             ":focus-visible": {
-                borderColor: string;
+                borderColor: `var(--${string})`;
             };
         };
         selected: {
-            backgroundColor: string;
-            color: string;
+            backgroundColor: `var(--${string})`;
+            color: `var(--${string})`;
             ":hover": {
-                backgroundColor: string;
+                backgroundColor: `var(--${string})`;
             };
         };
         disabled: {
-            color: string;
+            color: `var(--${string})`;
             cursor: "not-allowed";
         };
         outside: {
@@ -48,15 +48,15 @@ export declare const dateButton: import('@vanilla-extract/recipes').RuntimeFn<{
             cursor: "default";
         };
         rangeStart: {
-            backgroundColor: string;
-            color: string;
+            backgroundColor: `var(--${string})`;
+            color: `var(--${string})`;
         };
         rangeEnd: {
-            backgroundColor: string;
-            color: string;
+            backgroundColor: `var(--${string})`;
+            color: `var(--${string})`;
         };
         inRange: {
-            color: string;
+            color: `var(--${string})`;
             ":hover": {
                 backgroundColor: "rgba(158, 167, 184, 0.12)";
                 borderColor: "#cfd5e1";

package/dist/ui-v3/src/components/Dropdown/Dropdown.css.d.ts

@@ -18,7 +18,7 @@ export declare const trigger: import('@vanilla-extract/recipes').RuntimeFn<{
     };
     open: {
         true: {
-            borderColor: string;
+            borderColor: `var(--${string})`;
         };
         false: {};
     };
@@ -49,7 +49,7 @@ export declare const panel: string;
 export declare const option: import('@vanilla-extract/recipes').RuntimeFn<{
     selected: {
         true: {
-            color: string;
+            color: `var(--${string})`;
             backgroundColor: "rgba(33, 81, 236, 0.12)";
         };
         false: {};
@@ -68,9 +68,9 @@ export declare const optionDescription: string;
 export declare const checkbox: import('@vanilla-extract/recipes').RuntimeFn<{
     checked: {
         true: {
-            backgroundColor: string;
-            borderColor: string;
-            color: string;
+            backgroundColor: `var(--${string})`;
+            borderColor: `var(--${string})`;
+            color: `var(--${string})`;
         };
         false: {};
     };

package/dist/ui-v3/src/components/FileUpload/FileUpload.css.d.ts

@@ -31,7 +31,7 @@ export declare const thumbnailFilename: string;
 export declare const fileItem: import('@vanilla-extract/recipes').RuntimeFn<{
     active: {
         true: {
-            borderColor: string;
+            borderColor: `var(--${string})`;
             backgroundColor: "rgba(33, 81, 236, 0.12)";
         };
         false: {};

package/dist/ui-v3/src/components/Icon/Icon.css.d.ts

@@ -0,0 +1,12 @@
+export declare const icon: import('@vanilla-extract/recipes').RuntimeFn<{
+    size: {
+        sm: {
+            width: "16px";
+            height: "16px";
+        };
+        md: {
+            width: "24px";
+            height: "24px";
+        };
+    };
+}>;

package/dist/ui-v3/src/components/Icon/index.d.ts

@@ -0,0 +1,4 @@
+import { IconProps } from './types';
+export declare function Icon({ className, name, size, title, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export { iconRegistry } from './registry';
+export type { IconName, IconProps, IconSize } from './types';

package/dist/ui-v3/src/components/Icon/registry.d.ts

@@ -0,0 +1,11 @@
+import { SVGProps } from 'react';
+export type IconComponentProps = SVGProps<SVGSVGElement> & {
+    title?: string;
+};
+export declare const iconRegistry: {
+    readonly info: ({ title, ...props }: IconComponentProps) => import("react/jsx-runtime").JSX.Element;
+    readonly confirm: ({ title, ...props }: IconComponentProps) => import("react/jsx-runtime").JSX.Element;
+    readonly saveTemporarily: ({ title, ...props }: IconComponentProps) => import("react/jsx-runtime").JSX.Element;
+    readonly secret: ({ title, ...props }: IconComponentProps) => import("react/jsx-runtime").JSX.Element;
+    readonly close: ({ title, ...props }: IconComponentProps) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/ui-v3/src/components/Icon/types.d.ts

@@ -0,0 +1,10 @@
+import { SVGProps } from 'react';
+import { iconRegistry } from './registry';
+export declare const iconSizes: readonly ["sm", "md"];
+export type IconName = keyof typeof iconRegistry;
+export type IconSize = (typeof iconSizes)[number];
+export type IconProps = SVGProps<SVGSVGElement> & {
+    name: IconName;
+    size?: IconSize;
+    title?: string;
+};

package/dist/ui-v3/src/components/IconButtonGroup/IconButtonGroup.css.d.ts

@@ -10,22 +10,22 @@ export declare const root: import('@vanilla-extract/recipes').RuntimeFn<{
 export declare const item: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         fill: {
-            backgroundColor: string;
-            color: string;
+            backgroundColor: `var(--${string})`;
+            color: `var(--${string})`;
             borderRight: "1px solid rgba(0, 0, 0, 0.12)";
             selectors: {
                 "&:last-child": {
                     borderRight: "none";
                 };
                 "&:hover:not([data-active='true'])": {
-                    backgroundColor: string;
+                    backgroundColor: `var(--${string})`;
                 };
             };
         };
         outline: {
             backgroundColor: "transparent";
-            color: string;
-            border: `1px solid ${string}`;
+            color: `var(--${string})`;
+            border: `1px solid var(--${string})`;
             marginLeft: number;
             borderRadius: number;
             selectors: {

package/dist/ui-v3/src/components/Input/Input.css.d.ts

@@ -23,23 +23,23 @@ export declare const inputWrapper: import('@vanilla-extract/recipes').RuntimeFn<
         default: {
             selectors: {
                 "&:focus-within": {
-                    borderColor: string;
+                    borderColor: `var(--${string})`;
                     boxShadow: `var(--${string})`;
                 };
             };
         };
         active: {
-            borderColor: string;
+            borderColor: `var(--${string})`;
             boxShadow: `var(--${string})`;
         };
         success: {
-            borderColor: "#28c76f";
+            borderColor: string;
         };
         warning: {
-            borderColor: string;
+            borderColor: `var(--${string})`;
         };
         disabled: {
-            backgroundColor: string;
+            backgroundColor: `var(--${string})`;
             cursor: "not-allowed";
             pointerEvents: "none";
         };
@@ -67,10 +67,10 @@ export declare const suffixDivider: string;
 export declare const helper: import('@vanilla-extract/recipes').RuntimeFn<{
     state: {
         default: {
-            color: string;
+            color: `var(--${string})`;
         };
         active: {
-            color: string;
+            color: `var(--${string})`;
         };
         success: {
             color: "#1bc47d";
@@ -79,14 +79,14 @@ export declare const helper: import('@vanilla-extract/recipes').RuntimeFn<{
             color: "#ea5455";
         };
         disabled: {
-            color: string;
+            color: `var(--${string})`;
         };
     };
 }>;
 export declare const multiWrapper: import('@vanilla-extract/recipes').RuntimeFn<{
     disabled: {
         true: {
-            backgroundColor: string;
+            backgroundColor: `var(--${string})`;
             cursor: "not-allowed";
             pointerEvents: "none";
         };

package/dist/ui-v3/src/components/ListGroup/ListGroup.css.d.ts

@@ -7,8 +7,8 @@ export declare const root: import('@vanilla-extract/recipes').RuntimeFn<{
 export declare const item: import('@vanilla-extract/recipes').RuntimeFn<{
     active: {
         true: {
-            backgroundColor: string;
-            color: string;
+            backgroundColor: `var(--${string})`;
+            color: `var(--${string})`;
         };
     };
     danger: {

package/dist/ui-v3/src/components/NavigationTab/NavigationTab.css.d.ts

@@ -2,13 +2,13 @@ export declare const root: string;
 export declare const tab: import('@vanilla-extract/recipes').RuntimeFn<{
     active: {
         true: {
-            backgroundColor: string;
-            border: `1px solid ${string}`;
-            color: string;
+            backgroundColor: `var(--${string})`;
+            border: `1px solid var(--${string})`;
+            color: `var(--${string})`;
             selectors: {
                 "&:hover:not(:disabled)": {
-                    color: string;
-                    borderColor: string;
+                    color: `var(--${string})`;
+                    borderColor: `var(--${string})`;
                 };
             };
         };

package/dist/ui-v3/src/components/NumberInput/NumberInput.css.d.ts

@@ -39,7 +39,7 @@ export declare const input: import('@vanilla-extract/recipes').RuntimeFn<{
             fontSize: `var(--${string})`;
             fontWeight: `var(--${string})`;
             lineHeight: "24px";
-            color: string;
+            color: `var(--${string})`;
         };
     };
 }>;

package/dist/ui-v3/src/components/Pagination/Pagination.css.d.ts

@@ -4,13 +4,13 @@ export declare const numbersTrack: string;
 export declare const pageButton: import('@vanilla-extract/recipes').RuntimeFn<{
     active: {
         true: {
-            backgroundColor: string;
-            color: string;
+            backgroundColor: `var(--${string})`;
+            color: `var(--${string})`;
             fontSize: `var(--${string})`;
             fontWeight: `var(--${string})`;
             selectors: {
                 "&:hover": {
-                    backgroundColor: string;
+                    backgroundColor: `var(--${string})`;
                 };
             };
         };

package/dist/ui-v3/src/components/Progress/Progress.css.d.ts

@@ -2,7 +2,7 @@ export declare const progressTrack: string;
 export declare const progressBar: import('@vanilla-extract/recipes').RuntimeFn<{
     color: {
         primary: {
-            backgroundColor: string;
+            backgroundColor: `var(--${string})`;
         };
         success: {
             backgroundColor: "#28c76f";
@@ -32,11 +32,11 @@ export declare const stepIcon: import('@vanilla-extract/recipes').RuntimeFn<{
     status: {
         completed: {
             backgroundColor: "rgba(33, 81, 236, 0.12)";
-            color: string;
+            color: `var(--${string})`;
         };
         active: {
-            backgroundColor: string;
-            color: string;
+            backgroundColor: `var(--${string})`;
+            color: `var(--${string})`;
         };
         scheduled: {
             backgroundColor: "rgba(158, 167, 184, 0.12)";

package/dist/ui-v3/src/components/Spinner/Spinner.css.d.ts

@@ -23,7 +23,7 @@ export declare const root: import('@vanilla-extract/recipes').RuntimeFn<{
     };
     color: {
         primary: {
-            borderColor: string;
+            borderColor: `var(--${string})`;
             borderTopColor: "transparent";
         };
         white: {
@@ -57,7 +57,7 @@ export declare const track: import('@vanilla-extract/recipes').RuntimeFn<{
     };
     color: {
         primary: {
-            borderColor: string;
+            borderColor: `var(--${string})`;
         };
         white: {
             borderColor: "rgba(255, 255, 255, 0.9)";

package/dist/ui-v3/src/components/Switch/Switch.css.d.ts

@@ -14,7 +14,7 @@ export declare const track: import('@vanilla-extract/recipes').RuntimeFn<{
     };
     checked: {
         true: {
-            backgroundColor: string;
+            backgroundColor: `var(--${string})`;
         };
         false: {
             backgroundColor: "#d1d1d1";

package/dist/ui-v3/src/components/Tabs/Tabs.css.d.ts

@@ -4,12 +4,12 @@ export declare const tabList: string;
 export declare const tabItem: import('@vanilla-extract/recipes').RuntimeFn<{
     active: {
         true: {
-            backgroundColor: string;
-            color: string;
+            backgroundColor: `var(--${string})`;
+            color: `var(--${string})`;
         };
         false: {
             backgroundColor: "#3434341F";
-            color: string;
+            color: `var(--${string})`;
             selectors: {
                 "&:hover": {
                     backgroundColor: "#34343433";
@@ -31,12 +31,12 @@ export declare const tabItem: import('@vanilla-extract/recipes').RuntimeFn<{
 export declare const badge: import('@vanilla-extract/recipes').RuntimeFn<{
     active: {
         true: {
-            backgroundColor: string;
-            color: string;
+            backgroundColor: `var(--${string})`;
+            color: `var(--${string})`;
         };
         false: {
             backgroundColor: "rgba(0, 0, 0, 0.12)";
-            color: string;
+            color: `var(--${string})`;
         };
     };
     size: {

package/dist/ui-v3/src/components/Toast/Toast.css.d.ts

@@ -12,7 +12,7 @@ export declare const top: string;
 export declare const icon: import('@vanilla-extract/recipes').RuntimeFn<{
     intent: {
         info: {
-            backgroundColor: string;
+            backgroundColor: `var(--${string})`;
         };
         success: {
             backgroundColor: "#28c76f";
@@ -34,7 +34,7 @@ export declare const progressTrack: string;
 export declare const progressFill: import('@vanilla-extract/recipes').RuntimeFn<{
     intent: {
         info: {
-            backgroundColor: string;
+            backgroundColor: `var(--${string})`;
         };
         success: {
             backgroundColor: "#28c76f";
@@ -51,7 +51,7 @@ export declare const countdownTrack: string;
 export declare const countdownFill: import('@vanilla-extract/recipes').RuntimeFn<{
     intent: {
         info: {
-            backgroundColor: string;
+            backgroundColor: `var(--${string})`;
         };
         success: {
             backgroundColor: "#28c76f";

package/dist/ui-v3/src/components/TreeView/TreeView.css.d.ts

@@ -70,7 +70,7 @@ export declare const levelBadge: import('@vanilla-extract/recipes').RuntimeFn<{
     color: {
         primary: {
             backgroundColor: "rgba(33, 81, 236, 0.12)";
-            color: string;
+            color: `var(--${string})`;
         };
         secondary: {
             backgroundColor: "rgba(130, 134, 139, 0.12)";
@@ -83,11 +83,11 @@ export declare const textZone: string;
 export declare const textSegment: import('@vanilla-extract/recipes').RuntimeFn<{
     type: {
         code: {
-            color: string;
+            color: `var(--${string})`;
             fontWeight: `var(--${string})`;
         };
         title: {
-            color: string;
+            color: `var(--${string})`;
             fontWeight: `var(--${string})`;
             flex: number;
             minWidth: number;

package/dist/ui-v3/src/components/Widget/Widget.css.d.ts

@@ -21,10 +21,10 @@ export declare const statLabel: string;
 export declare const statValue: import('@vanilla-extract/recipes').RuntimeFn<{
     color: {
         primary: {
-            color: string;
+            color: `var(--${string})`;
         };
         heading: {
-            color: string;
+            color: `var(--${string})`;
         };
         success: {
             color: "#1bc47d";