@ryanodd/design-system 0.0.0-dev4 → 0.0.0-dev6
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/esm/index.d.ts +189 -2
- package/dist/index.css +1 -1
- package/package.json +10 -2
- /package/dist/{index.js → cjs/index.js} +0 -0
- /package/dist/{index.mjs → esm/index.js} +0 -0
package/dist/esm/index.d.ts
CHANGED
|
@@ -1,2 +1,189 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { ButtonHTMLAttributes } from 'react';
|
|
2
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
3
|
+
import { ComponentType } from 'react';
|
|
4
|
+
import { DetailedHTMLProps } from 'react';
|
|
5
|
+
import { ForwardRefExoticComponent } from 'react';
|
|
6
|
+
import { HTMLAttributes } from 'react';
|
|
7
|
+
import { JSX } from 'react/jsx-runtime';
|
|
8
|
+
import * as RadixDialog from '@radix-ui/react-dialog';
|
|
9
|
+
import * as RadixMenuButton from '@radix-ui/react-dropdown-menu';
|
|
10
|
+
import * as RadixToast from '@radix-ui/react-toast';
|
|
11
|
+
import * as RadixTooltip from '@radix-ui/react-tooltip';
|
|
12
|
+
import { ReactNode } from 'react';
|
|
13
|
+
import { RefAttributes } from 'react';
|
|
14
|
+
import { SVGProps } from 'react';
|
|
15
|
+
|
|
16
|
+
export declare const ArrowLeft: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & {
|
|
17
|
+
size?: (typeof iconSizes)[number];
|
|
18
|
+
} & RefAttributes<SVGSVGElement>>;
|
|
19
|
+
|
|
20
|
+
export declare const ArrowRight: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & {
|
|
21
|
+
size?: (typeof iconSizes)[number];
|
|
22
|
+
} & RefAttributes<SVGSVGElement>>;
|
|
23
|
+
|
|
24
|
+
export declare const Button: ForwardRefExoticComponent<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Props & RefAttributes<HTMLButtonElement>>;
|
|
25
|
+
|
|
26
|
+
export declare type ButtonProps = ComponentPropsWithoutRef<"button"> & Props;
|
|
27
|
+
|
|
28
|
+
export declare const Check: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & {
|
|
29
|
+
size?: (typeof iconSizes)[number];
|
|
30
|
+
} & RefAttributes<SVGSVGElement>>;
|
|
31
|
+
|
|
32
|
+
export declare const Checkbox: ({ id, labelContent, checked, onClick }: CheckboxProps) => JSX.Element;
|
|
33
|
+
|
|
34
|
+
export declare type CheckboxProps = {
|
|
35
|
+
id: string;
|
|
36
|
+
labelContent: ReactNode;
|
|
37
|
+
checked: boolean;
|
|
38
|
+
onClick: (checked: boolean) => void;
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export declare const Circle: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & {
|
|
42
|
+
size?: (typeof iconSizes)[number];
|
|
43
|
+
} & RefAttributes<SVGSVGElement>>;
|
|
44
|
+
|
|
45
|
+
export declare const Close: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & {
|
|
46
|
+
size?: (typeof iconSizes)[number];
|
|
47
|
+
} & RefAttributes<SVGSVGElement>>;
|
|
48
|
+
|
|
49
|
+
export declare const createIcon: (SVG: ComponentType<HTMLAttributes<SVGSVGElement>>, label: string) => ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & {
|
|
50
|
+
size?: (typeof iconSizes)[number];
|
|
51
|
+
} & RefAttributes<SVGSVGElement>>;
|
|
52
|
+
|
|
53
|
+
export declare const Dialog: ({ trigger, content, title, ...props }: DialogProps) => JSX.Element;
|
|
54
|
+
|
|
55
|
+
export declare type DialogProps = RadixDialog.DialogProps & {
|
|
56
|
+
title: ReactNode;
|
|
57
|
+
trigger: ReactNode;
|
|
58
|
+
content: ReactNode;
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
export declare const ExternalLink: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & {
|
|
62
|
+
size?: (typeof iconSizes)[number];
|
|
63
|
+
} & RefAttributes<SVGSVGElement>>;
|
|
64
|
+
|
|
65
|
+
export declare const Gear: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & {
|
|
66
|
+
size?: (typeof iconSizes)[number];
|
|
67
|
+
} & RefAttributes<SVGSVGElement>>;
|
|
68
|
+
|
|
69
|
+
export declare const Hammer: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & {
|
|
70
|
+
size?: (typeof iconSizes)[number];
|
|
71
|
+
} & RefAttributes<SVGSVGElement>>;
|
|
72
|
+
|
|
73
|
+
export declare const Heart: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & {
|
|
74
|
+
size?: (typeof iconSizes)[number];
|
|
75
|
+
} & RefAttributes<SVGSVGElement>>;
|
|
76
|
+
|
|
77
|
+
export declare const IconMap: Record<string, ComponentType<IconProps> | null>;
|
|
78
|
+
|
|
79
|
+
export declare type IconProps = ComponentPropsWithoutRef<"svg"> & {
|
|
80
|
+
size?: typeof iconSizes[number];
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
export declare const iconSizes: readonly ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl"];
|
|
84
|
+
|
|
85
|
+
export declare const Kebab: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & {
|
|
86
|
+
size?: (typeof iconSizes)[number];
|
|
87
|
+
} & RefAttributes<SVGSVGElement>>;
|
|
88
|
+
|
|
89
|
+
export declare const Lightning: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & {
|
|
90
|
+
size?: (typeof iconSizes)[number];
|
|
91
|
+
} & RefAttributes<SVGSVGElement>>;
|
|
92
|
+
|
|
93
|
+
export declare const Mail: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & {
|
|
94
|
+
size?: (typeof iconSizes)[number];
|
|
95
|
+
} & RefAttributes<SVGSVGElement>>;
|
|
96
|
+
|
|
97
|
+
export declare const Menu: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & {
|
|
98
|
+
size?: (typeof iconSizes)[number];
|
|
99
|
+
} & RefAttributes<SVGSVGElement>>;
|
|
100
|
+
|
|
101
|
+
export declare const MenuButton: ({ children, ...props }: MenuButtonProps) => JSX.Element;
|
|
102
|
+
|
|
103
|
+
export declare const MenuButtonItem: ({ children, ...props }: MenuButtonItemProps) => JSX.Element;
|
|
104
|
+
|
|
105
|
+
export declare type MenuButtonItemProps = React.ComponentPropsWithoutRef<typeof RadixMenuButton.Item> & {
|
|
106
|
+
children: ReactNode;
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
export declare type MenuButtonProps = React.ComponentPropsWithoutRef<typeof RadixMenuButton.Root> & {
|
|
110
|
+
children: ReactNode;
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
export declare const NoMobile: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & {
|
|
114
|
+
size?: (typeof iconSizes)[number];
|
|
115
|
+
} & RefAttributes<SVGSVGElement>>;
|
|
116
|
+
|
|
117
|
+
export declare const Pencil: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, "ref"> & {
|
|
118
|
+
size?: (typeof iconSizes)[number];
|
|
119
|
+
} & RefAttributes<SVGSVGElement>>;
|
|
120
|
+
|
|
121
|
+
declare type Props = {
|
|
122
|
+
children?: ReactNode;
|
|
123
|
+
size?: "small" | "medium" | "large";
|
|
124
|
+
variant?: "primary" | "secondary" | "destructive" | "tertiary";
|
|
125
|
+
loading?: boolean;
|
|
126
|
+
iconOnly?: boolean;
|
|
127
|
+
notificationDotText?: string;
|
|
128
|
+
/**
|
|
129
|
+
* Optionally indicates which icon to use as a leading icon before the button text,
|
|
130
|
+
* or the icon for an icon-only button.
|
|
131
|
+
*/
|
|
132
|
+
icon?: keyof typeof IconMap;
|
|
133
|
+
/**
|
|
134
|
+
* Optionally indicates which icon to use as a trailing icon after the button text.
|
|
135
|
+
*/
|
|
136
|
+
trailingIcon?: keyof typeof IconMap;
|
|
137
|
+
};
|
|
138
|
+
|
|
139
|
+
export declare const Spinner: ForwardRefExoticComponent<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
140
|
+
/**
|
|
141
|
+
* Indicates the diameter (height/width) of the `Spinner`'s container
|
|
142
|
+
*/
|
|
143
|
+
size?: SpinnerSize;
|
|
144
|
+
} & RefAttributes<HTMLDivElement>>;
|
|
145
|
+
|
|
146
|
+
export declare type SpinnerProps = ComponentPropsWithoutRef<"div"> & {
|
|
147
|
+
/**
|
|
148
|
+
* Indicates the diameter (height/width) of the `Spinner`'s container
|
|
149
|
+
*/
|
|
150
|
+
size?: SpinnerSize;
|
|
151
|
+
};
|
|
152
|
+
|
|
153
|
+
export declare type SpinnerSize = typeof iconSizes[number];
|
|
154
|
+
|
|
155
|
+
export declare const Toast: ForwardRefExoticComponent<RadixToast.ToastProps & {
|
|
156
|
+
toastTitle: ReactNode;
|
|
157
|
+
toastDescription?: ReactNode;
|
|
158
|
+
toastAction?: ReactNode;
|
|
159
|
+
} & RefAttributes<HTMLLIElement>>;
|
|
160
|
+
|
|
161
|
+
export declare type ToastProps = RadixToast.ToastProps & {
|
|
162
|
+
toastTitle: ReactNode;
|
|
163
|
+
toastDescription?: ReactNode;
|
|
164
|
+
toastAction?: ReactNode;
|
|
165
|
+
};
|
|
166
|
+
|
|
167
|
+
export declare const ToastProvider: ({ ...props }: ToastProviderProps) => JSX.Element;
|
|
168
|
+
|
|
169
|
+
export declare type ToastProviderProps = RadixToast.ToastProviderProps;
|
|
170
|
+
|
|
171
|
+
export declare const ToastViewport: ForwardRefExoticComponent<RadixToast.ToastViewportProps & RefAttributes<HTMLOListElement>>;
|
|
172
|
+
|
|
173
|
+
export declare type ToastViewportProps = RadixToast.ToastViewportProps;
|
|
174
|
+
|
|
175
|
+
export declare function Tooltip({ children, content, open, defaultOpen, onOpenChange, ...props }: TooltipProps): JSX.Element;
|
|
176
|
+
|
|
177
|
+
export declare type TooltipProps = Omit<RadixTooltip.TooltipContentProps, "content"> & {
|
|
178
|
+
children: ReactNode;
|
|
179
|
+
content: ReactNode;
|
|
180
|
+
open?: boolean;
|
|
181
|
+
defaultOpen?: boolean;
|
|
182
|
+
onOpenChange?: (open: boolean) => void;
|
|
183
|
+
};
|
|
184
|
+
|
|
185
|
+
export declare const TooltipProvider: ({ ...props }: TooltipProviderProps) => JSX.Element;
|
|
186
|
+
|
|
187
|
+
export declare type TooltipProviderProps = RadixTooltip.TooltipProviderProps;
|
|
188
|
+
|
|
189
|
+
export { }
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
body{color:red}._button_w6zk1_1{flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;gap:var(--spacing-2)}._button_w6zk1_1:not(:disabled){cursor:pointer}._button_w6zk1_1:not(:active),._button_w6zk1_1:disabled{box-shadow:var(--shadow-sm)}._button_w6zk1_1{padding-top:var(--spacing-1_5);padding-bottom:var(--spacing-1_5);padding-left:var(--spacing-3);padding-right:var(--spacing-3);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}._button_w6zk1_1[data-icon-only=true]{width:var(--size-8);height:var(--size-8);padding-left:var(--spacing-1);padding-right:var(--spacing-1);padding-top:var(--spacing-1);padding-bottom:var(--spacing-1)}._button_w6zk1_1[data-size=medium]{padding-top:var(--spacing-2);padding-bottom:var(--spacing-2);padding-left:var(--spacing-4);padding-right:var(--spacing-4);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}._button_w6zk1_1[data-icon-only=true][data-size=medium]{width:var(--size-10);height:var(--size-10);padding-left:var(--spacing-1);padding-right:var(--spacing-1);padding-top:var(--spacing-1);padding-bottom:var(--spacing-1)}._button_w6zk1_1[data-size=large]{padding-top:var(--spacing-2);padding-bottom:var(--spacing-2);padding-left:var(--spacing-5);padding-right:var(--spacing-5);border-radius:var(--radius-md);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}._button_w6zk1_1[data-icon-only=true][data-size=large]{width:var(--size-12);height:var(--size-12);padding-left:var(--spacing-1);padding-right:var(--spacing-1);padding-top:var(--spacing-1);padding-bottom:var(--spacing-1)}._button_w6zk1_1{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-secondary);color:var(--color-text-secondary)}._button_w6zk1_1:hover:not(:disabled){background-color:var(--color-bg-tertiary)}._button_w6zk1_1:active{background-color:var(--color-bg-quaternary)}._button_w6zk1_1[data-variant=primary]{background-color:var(--color-bg-brand);color:var(--color-text-inverted);border:none}._button_w6zk1_1[data-variant=primary]:hover:not(:disabled){background-color:var(--color-bg-brand-hover)}._button_w6zk1_1[data-variant=destructive]{background-color:var(--color-text-error);color:var(--color-text-inverted);border:none}._button_w6zk1_1[data-variant=destructive]:hover:not(:disabled){background-color:var(--color-bg-error-hover)}._button_w6zk1_1[data-variant=tertiary]{background-color:var(--color-transparent);color:var(--color-text-secondary);border:none;box-shadow:var(--shadow-none)}._button_w6zk1_1[data-variant=tertiary]:hover:not(:disabled){background-color:#00000010}._button_w6zk1_1:disabled{background-color:var(--color-bg-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled)}._button_w6zk1_1[data-variant=tertiary]:disabled{background-color:var(--color-transparent);border:none;color:var(--color-text-disabled)}._buttonNotificationDot_w6zk1_143{position:absolute;--dot-width: 1.525rem;top:calc(-1 * var(--dot-width) / 2);right:calc(-1 * var(--dot-width) / 2);width:var(--dot-width);height:var(--dot-width);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;background-color:var(--color-text-error);font-size:var(--font-size-base);font-weight:var(--font-weight-bold);color:var(--color-text-inverted);padding-bottom:.0825rem}._icon_178c1_1{max-width:none;flex-shrink:0}._icon_178c1_1[data-size="2xs"]{width:var(--size-3);height:var(--size-3)}._icon_178c1_1[data-size=xs]{width:.875rem;height:.875rem}._icon_178c1_1[data-size=sm]{width:var(--size-4);height:var(--size-4)}._icon_178c1_1[data-size=md]{width:var(--size-5);height:var(--size-5)}._icon_178c1_1{width:var(--size-6);height:var(--size-6)}._icon_178c1_1[data-size=xl]{width:var(--size-8);height:var(--size-8)}._icon_178c1_1[data-size="2xl"]{width:var(--size-10);height:var(--size-10)}._icon_178c1_1[data-size="3xl"]{width:var(--size-12);height:var(--size-12)}._icon_178c1_1[data-size="4xl"]{width:var(--size-16);height:var(--size-16)}._spinnerWrapper_1mfc7_1{--spinner-size-2xs: var(--size-3);--spinner-size-xs: .875rem;--spinner-size-sm: var(--size-4);--spinner-size-md: var(--size-5);--spinner-size-lg: var(--size-6);--spinner-size-xl: var(--size-8);--spinner-size-2xl: var(--size-10);--spinner-size-3xl: var(--size-12);--spinner-size-4xl: var(--size-16);--spinner-size: var(--spinner-size-lg);width:var(--spinner-size);height:var(--spinner-size);aspect-ratio:1 / 1;flex-shrink:0;display:flex;justify-content:center;align-items:center}._spinner_1mfc7_1{--spinner-thickness: 2px;width:90%;height:90%;border-width:var(--spinner-thickness);border-radius:50%;box-sizing:border-box;position:relative;border-style:solid;border-right-color:transparent;border-left-color:currentcolor;border-top-color:currentcolor;border-bottom-color:currentcolor;animation:_rotate_1mfc7_1 1.2s infinite linear}._spinnerWrapper_1mfc7_1[data-size="2xs"]{--spinner-size: var(--spinner-size-2xs)}._spinnerWrapper_1mfc7_1[data-size="2xs"] ._spinner_1mfc7_1{--spinner-thickness: 1.33px}._spinnerWrapper_1mfc7_1[data-size=xs]{--spinner-size: var(--spinner-size-xs)}._spinnerWrapper_1mfc7_1[data-size=xs] ._spinner_1mfc7_1{--spinner-thickness: 1.5px}._spinnerWrapper_1mfc7_1[data-size=sm]{--spinner-size: var(--spinner-size-sm)}._spinnerWrapper_1mfc7_1[data-size=sm] ._spinner_1mfc7_1{--spinner-thickness: 1.67px}._spinnerWrapper_1mfc7_1[data-size=md]{--spinner-size: var(--spinner-size-md)}._spinnerWrapper_1mfc7_1[data-size=md] ._spinner_1mfc7_1{--spinner-thickness: 1.8px}._spinnerWrapper_1mfc7_1[data-size=xl]{--spinner-size: var(--spinner-size-xl)}._spinnerWrapper_1mfc7_1[data-size=xl] ._spinner_1mfc7_1{--spinner-thickness: 2.67px}._spinnerWrapper_1mfc7_1[data-size="2xl"]{--spinner-size: var(--spinner-size-2xl)}._spinnerWrapper_1mfc7_1[data-size="2xl"] ._spinner_1mfc7_1{--spinner-thickness: 3px}._spinnerWrapper_1mfc7_1[data-size="3xl"]{--spinner-size: var(--spinner-size-3xl)}._spinnerWrapper_1mfc7_1[data-size="3xl"] ._spinner_1mfc7_1{--spinner-thickness: 3.67px}._spinnerWrapper_1mfc7_1[data-size="4xl"]{--spinner-size: var(--spinner-size-4xl)}._spinnerWrapper_1mfc7_1[data-size="4xl"] ._spinner_1mfc7_1{--spinner-thickness: 4.33px}@keyframes _rotate_1mfc7_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._checkboxRow_5ztin_1{display:flex;align-items:center;gap:var(--spacing-2)}._checkboxRoot_5ztin_7{width:var(--size-6);height:var(--size-6);padding:0;border:1px solid var(--color-border-primary);border-radius:var(--radius-sm);display:flex;justify-content:center;align-items:center;background-color:var(--color-bg-primary)}._checkboxIndicator_5ztin_19{background-color:var(--color-bg-brand);border-radius:var(--radius-sm);width:100%;height:100%;display:flex;align-items:center;justify-content:center}._checkboxCheckmarkIcon_5ztin_29{width:var(--size-4);height:var(--size-4);color:var(--color-text-inverted)}._checkboxLabel_5ztin_35{font-size:var(--font-size-base);color:var(--color-text-primary)}._dialogOverlay_1flkk_1{background-color:var(--color-gray-950);position:fixed;inset:0;z-index:40;opacity:.5;animation:_overlayShow_1flkk_1 .2s cubic-bezier(.16,1,.3,1)}@keyframes _overlayShow_1flkk_1{0%{opacity:0}to{opacity:.5}}._dialogContent_1flkk_20{position:fixed;top:50%;left:50%;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-primary);color:var(--color-text-primary);z-index:50;display:flex;flex-direction:column;padding:var(--spacing-8);gap:var(--spacing-8);animation:_contentShow_1flkk_1 .2s cubic-bezier(.16,1,.3,1);transform:translate(-50%,-50%);width:90vw;max-width:450px}._dialogContent_1flkk_20[data-size=sm]{max-width:450px}._dialogContent_1flkk_20[data-size=md]{max-width:600px}._dialogContent_1flkk_20[data-size=lg]{max-width:800px}@keyframes _contentShow_1flkk_1{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}._dialogCloseButton_1flkk_65{position:absolute;top:var(--spacing-4);right:var(--spacing-4);color:var(--color-text-tertiary)}._dialogTitle_1flkk_72{margin:0;font-weight:var(--font-weight-semibold);font-size:var(--font-size-xl);color:var(--color-text-primary)}._dialogDescription_1flkk_79{margin:0;font-weight:var(--font-weight-normal);font-size:var(--font-size-sm);color:var(--color-text-secondary)}._menuButtonContent_boy14_1{background-color:var(--color-bg-primary);border-radius:var(--radius-md);padding:var(--spacing-1_5);border:1px solid var(--color-border-primary);box-shadow:var(--shadow-lg);min-width:10rem}._menuButtonItem_boy14_10{color:var(--color-text-secondary);display:flex;align-items:center;font-size:var(--font-size-sm);padding-left:var(--spacing-2_5);padding-right:var(--spacing-2_5);padding-top:var(--spacing-2);padding-bottom:var(--spacing-2);border-radius:var(--radius-md);line-height:var(--leading-none);height:25px;position:relative;-webkit-user-select:none;user-select:none;outline:none}._menuButtonItem_boy14_10[data-disabled]{color:var(--color-text-disabled);pointer-events:none}._menuButtonItem_boy14_10:hover:not([data-disabled]){background-color:var(--color-bg-tertiary);cursor:pointer}._menuButtonItem_boy14_10._focus-visible_boy14_37,._menuButtonItem_boy14_10:focus-visible{background-color:var(--color-bg-tertiary)}._menuButtonArrow_boy14_42{fill:var(--color-bg-primary)}._toast_7o27j_1{background-color:var(--color-bg-primary);box-shadow:var(--shadow-lg);border-radius:var(--radius-lg);display:flex;align-items:center;padding:var(--spacing-4);gap:var(--spacing-4);border:1px solid var(--color-border-primary)}._toastContent_7o27j_12{display:flex;flex-direction:column;gap:var(--spacing-1);flex-grow:1}._toast_7o27j_1[data-state=open]{animation:_slideIn_7o27j_1 .15s cubic-bezier(.16,1,.3,1)}._toast_7o27j_1[data-state=closed]{animation:_hide_7o27j_1 .1s ease-in}._toast_7o27j_1[data-swipe=move]{transform:translate(var(--radix-toast-swipe-move-x))}._toast_7o27j_1[data-swipe=cancel]{transform:translate(0);transition:transform .2s ease-out}._toast_7o27j_1[data-swipe=end]{animation:_swipeOut_7o27j_1 .1s ease-out}@keyframes _hide_7o27j_1{0%{opacity:1}to{opacity:0}}@keyframes _slideIn_7o27j_1{0%{transform:translate(calc(100% + var(--viewport-padding)))}to{transform:translate(0)}}@keyframes _swipeOut_7o27j_1{0%{transform:translate(var(--radix-toast-swipe-end-x))}to{transform:translate(calc(100% + var(--viewport-padding)))}}._toastViewport_7o27j_70{list-style-type:none;padding:0;position:fixed;bottom:0;right:0;display:flex;flex-direction:column;padding:var(--spacing-6);gap:var(--spacing-2);width:390px;max-width:100vw;margin:0;z-index:999;outline:none;--viewport-padding: var(--spacing-6)}._toastTitle_7o27j_89{color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}._toastDescription_7o27j_95{color:var(--color-text-secondary);font-size:var(--font-size-sm)}._tooltipContent_4rdhp_1{background-color:var(--color-bg-tooltip);color:var(--color-text-inverted);border-radius:var(--radius-md);padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-xs);line-height:var(--leading-tight);box-shadow:var(--shadow-sm);z-index:50}._tooltipArrow_4rdhp_12{fill:var(--color-bg-tooltip)}
|
|
1
|
+
@import"https://fonts.googleapis.com/css2?family=Zalando+Sans:wght@400;500;600;700&display=swap";h1,h2,h3,h4,h5,h6,p{margin:0}button{cursor:pointer}:root{--font-weight-family: "Zalando Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif}*,body{font-family:var(--font-weight-family)}:root{--spacing-0: 0;--spacing-0_5: .125rem;--spacing-1: .25rem;--spacing-1_5: .375rem;--spacing-2: .5rem;--spacing-2_5: .625rem;--spacing-3: .75rem;--spacing-4: 1rem;--spacing-5: 1.25rem;--spacing-6: 1.5rem;--spacing-8: 2rem;--spacing-10: 2.5rem;--spacing-12: 3rem;--spacing-16: 4rem;--size-3: .75rem;--size-4: 1rem;--size-5: 1.25rem;--size-6: 1.5rem;--size-8: 2rem;--size-10: 2.5rem;--size-12: 3rem;--size-16: 4rem}:root{--color-white: #ffffff;--color-black: #000000;--color-transparent: transparent;--color-gray-50: #f9fafb;--color-gray-100: #f3f4f6;--color-gray-200: #e5e7eb;--color-gray-300: #d1d5db;--color-gray-400: #9ca3af;--color-gray-500: #6b7280;--color-gray-600: #4b5563;--color-gray-700: #374151;--color-gray-800: #1f2937;--color-gray-900: #111827;--color-gray-950: #030712;--color-red-50: #fef2f2;--color-red-100: #fee2e2;--color-red-200: #fecaca;--color-red-300: #fca5a5;--color-red-400: #f87171;--color-red-500: #ef4444;--color-red-600: #dc2626;--color-red-700: #b91c1c;--color-red-800: #991b1b;--color-red-900: #7f1d1d;--color-red-950: #450a0a;--color-orange-50: #fff7ed;--color-orange-100: #ffedd5;--color-orange-200: #fed7aa;--color-orange-300: #fdba74;--color-orange-400: #fb923c;--color-orange-500: #f97316;--color-orange-600: #ea580c;--color-orange-700: #c2410c;--color-orange-800: #9a3412;--color-orange-900: #7c2d12;--color-orange-950: #431407;--color-amber-50: #fffbeb;--color-amber-100: #fef3c7;--color-amber-200: #fde68a;--color-amber-300: #fcd34d;--color-amber-400: #fbbf24;--color-amber-500: #f59e0b;--color-amber-600: #d97706;--color-amber-700: #b45309;--color-amber-800: #92400e;--color-amber-900: #78350f;--color-amber-950: #451a03;--color-green-50: #f0fdf4;--color-green-100: #dcfce7;--color-green-200: #bbf7d0;--color-green-300: #86efac;--color-green-400: #4ade80;--color-green-500: #22c55e;--color-green-600: #16a34a;--color-green-700: #15803d;--color-green-800: #166534;--color-green-900: #14532d;--color-green-950: #052e16;--color-teal-50: #f0fdfa;--color-teal-100: #ccfbf1;--color-teal-200: #99f6e4;--color-teal-300: #5eead4;--color-teal-400: #2dd4bf;--color-teal-500: #14b8a6;--color-teal-600: #0d9488;--color-teal-700: #0f766e;--color-teal-800: #115e59;--color-teal-900: #134e4a;--color-teal-950: #042f2e;--color-sky-50: #f0f9ff;--color-sky-100: #e0f2fe;--color-sky-200: #bae6fd;--color-sky-300: #7dd3fc;--color-sky-400: #38bdf8;--color-sky-500: #0ea5e9;--color-sky-600: #0284c7;--color-sky-700: #0369a1;--color-sky-800: #075985;--color-sky-900: #0c4a6e;--color-sky-950: #082f49;--color-blue-50: #f0f7ff;--color-blue-100: #e0f0ff;--color-blue-200: #b9e2fe;--color-blue-300: #7ccbfd;--color-blue-400: #36b2fa;--color-blue-500: #0099ff;--color-blue-600: #007aff;--color-blue-700: #0062cc;--color-blue-800: #004ead;--color-blue-900: #003b82;--color-blue-950: #002552;--color-purple-50: #faf5ff;--color-purple-100: #f3e8ff;--color-purple-200: #e9d5ff;--color-purple-300: #d8b4fe;--color-purple-400: #c084fc;--color-purple-500: #a855f7;--color-purple-600: #9333ea;--color-purple-700: #7e22ce;--color-purple-800: #6b21a8;--color-purple-900: #581c87;--color-purple-950: #3b0764;--color-text-primary: var(--color-gray-950);--color-text-secondary: var(--color-gray-600);--color-text-tertiary: var(--color-gray-400);--color-text-inverted: var(--color-white);--color-text-brand: var(--color-blue-600);--color-text-error: var(--color-red-600);--color-text-success: var(--color-green-600);--color-text-warning: var(--color-amber-600);--color-text-disabled: var(--color-gray-400);--color-bg-primary: var(--color-white);--color-bg-secondary: var(--color-gray-50);--color-bg-tertiary: var(--color-gray-100);--color-bg-quaternary: var(--color-gray-200);--color-bg-brand: var(--color-blue-600);--color-bg-brand-hover: var(--color-blue-700);--color-bg-inverse: var(--color-gray-900);--color-bg-error: var(--color-red-50);--color-bg-error-hover: var(--color-red-700);--color-bg-success: var(--color-green-50);--color-bg-warning: var(--color-amber-50);--color-bg-disabled: var(--color-gray-100);--color-bg-tooltip: color-mix(in srgb, var(--color-gray-950), transparent 18.75%);--color-border-primary: var(--color-gray-200);--color-border-secondary: var(--color-gray-300);--color-border-focus: var(--color-blue-500);--color-border-error: var(--color-red-200);--color-border-success: var(--color-green-200);--color-border-warning: var(--color-amber-200);--color-border-disabled: var(--color-gray-300)}:root{--shadow-sm: 0 2px 3px 0 rgb(0 0 0 / .075);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--shadow-none: none}:root{--radius-xs: .125rem;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px}:root{--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--leading-none: 1;--leading-tight: 1.25;--leading-normal: 1.5;--leading-relaxed: 1.75}._button_w6zk1_1{flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;gap:var(--spacing-2)}._button_w6zk1_1:not(:disabled){cursor:pointer}._button_w6zk1_1:not(:active),._button_w6zk1_1:disabled{box-shadow:var(--shadow-sm)}._button_w6zk1_1{padding-top:var(--spacing-1_5);padding-bottom:var(--spacing-1_5);padding-left:var(--spacing-3);padding-right:var(--spacing-3);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}._button_w6zk1_1[data-icon-only=true]{width:var(--size-8);height:var(--size-8);padding-left:var(--spacing-1);padding-right:var(--spacing-1);padding-top:var(--spacing-1);padding-bottom:var(--spacing-1)}._button_w6zk1_1[data-size=medium]{padding-top:var(--spacing-2);padding-bottom:var(--spacing-2);padding-left:var(--spacing-4);padding-right:var(--spacing-4);border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold)}._button_w6zk1_1[data-icon-only=true][data-size=medium]{width:var(--size-10);height:var(--size-10);padding-left:var(--spacing-1);padding-right:var(--spacing-1);padding-top:var(--spacing-1);padding-bottom:var(--spacing-1)}._button_w6zk1_1[data-size=large]{padding-top:var(--spacing-2);padding-bottom:var(--spacing-2);padding-left:var(--spacing-5);padding-right:var(--spacing-5);border-radius:var(--radius-md);font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold)}._button_w6zk1_1[data-icon-only=true][data-size=large]{width:var(--size-12);height:var(--size-12);padding-left:var(--spacing-1);padding-right:var(--spacing-1);padding-top:var(--spacing-1);padding-bottom:var(--spacing-1)}._button_w6zk1_1{background-color:var(--color-bg-secondary);border:1px solid var(--color-border-secondary);color:var(--color-text-secondary)}._button_w6zk1_1:hover:not(:disabled){background-color:var(--color-bg-tertiary)}._button_w6zk1_1:active{background-color:var(--color-bg-quaternary)}._button_w6zk1_1[data-variant=primary]{background-color:var(--color-bg-brand);color:var(--color-text-inverted);border:none}._button_w6zk1_1[data-variant=primary]:hover:not(:disabled){background-color:var(--color-bg-brand-hover)}._button_w6zk1_1[data-variant=destructive]{background-color:var(--color-text-error);color:var(--color-text-inverted);border:none}._button_w6zk1_1[data-variant=destructive]:hover:not(:disabled){background-color:var(--color-bg-error-hover)}._button_w6zk1_1[data-variant=tertiary]{background-color:var(--color-transparent);color:var(--color-text-secondary);border:none;box-shadow:var(--shadow-none)}._button_w6zk1_1[data-variant=tertiary]:hover:not(:disabled){background-color:#00000010}._button_w6zk1_1:disabled{background-color:var(--color-bg-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled)}._button_w6zk1_1[data-variant=tertiary]:disabled{background-color:var(--color-transparent);border:none;color:var(--color-text-disabled)}._buttonNotificationDot_w6zk1_143{position:absolute;--dot-width: 1.525rem;top:calc(-1 * var(--dot-width) / 2);right:calc(-1 * var(--dot-width) / 2);width:var(--dot-width);height:var(--dot-width);border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;background-color:var(--color-text-error);font-size:var(--font-size-base);font-weight:var(--font-weight-bold);color:var(--color-text-inverted);padding-bottom:.0825rem}._icon_178c1_1{max-width:none;flex-shrink:0}._icon_178c1_1[data-size="2xs"]{width:var(--size-3);height:var(--size-3)}._icon_178c1_1[data-size=xs]{width:.875rem;height:.875rem}._icon_178c1_1[data-size=sm]{width:var(--size-4);height:var(--size-4)}._icon_178c1_1[data-size=md]{width:var(--size-5);height:var(--size-5)}._icon_178c1_1{width:var(--size-6);height:var(--size-6)}._icon_178c1_1[data-size=xl]{width:var(--size-8);height:var(--size-8)}._icon_178c1_1[data-size="2xl"]{width:var(--size-10);height:var(--size-10)}._icon_178c1_1[data-size="3xl"]{width:var(--size-12);height:var(--size-12)}._icon_178c1_1[data-size="4xl"]{width:var(--size-16);height:var(--size-16)}._spinnerWrapper_1mfc7_1{--spinner-size-2xs: var(--size-3);--spinner-size-xs: .875rem;--spinner-size-sm: var(--size-4);--spinner-size-md: var(--size-5);--spinner-size-lg: var(--size-6);--spinner-size-xl: var(--size-8);--spinner-size-2xl: var(--size-10);--spinner-size-3xl: var(--size-12);--spinner-size-4xl: var(--size-16);--spinner-size: var(--spinner-size-lg);width:var(--spinner-size);height:var(--spinner-size);aspect-ratio:1 / 1;flex-shrink:0;display:flex;justify-content:center;align-items:center}._spinner_1mfc7_1{--spinner-thickness: 2px;width:90%;height:90%;border-width:var(--spinner-thickness);border-radius:50%;box-sizing:border-box;position:relative;border-style:solid;border-right-color:transparent;border-left-color:currentcolor;border-top-color:currentcolor;border-bottom-color:currentcolor;animation:_rotate_1mfc7_1 1.2s infinite linear}._spinnerWrapper_1mfc7_1[data-size="2xs"]{--spinner-size: var(--spinner-size-2xs)}._spinnerWrapper_1mfc7_1[data-size="2xs"] ._spinner_1mfc7_1{--spinner-thickness: 1.33px}._spinnerWrapper_1mfc7_1[data-size=xs]{--spinner-size: var(--spinner-size-xs)}._spinnerWrapper_1mfc7_1[data-size=xs] ._spinner_1mfc7_1{--spinner-thickness: 1.5px}._spinnerWrapper_1mfc7_1[data-size=sm]{--spinner-size: var(--spinner-size-sm)}._spinnerWrapper_1mfc7_1[data-size=sm] ._spinner_1mfc7_1{--spinner-thickness: 1.67px}._spinnerWrapper_1mfc7_1[data-size=md]{--spinner-size: var(--spinner-size-md)}._spinnerWrapper_1mfc7_1[data-size=md] ._spinner_1mfc7_1{--spinner-thickness: 1.8px}._spinnerWrapper_1mfc7_1[data-size=xl]{--spinner-size: var(--spinner-size-xl)}._spinnerWrapper_1mfc7_1[data-size=xl] ._spinner_1mfc7_1{--spinner-thickness: 2.67px}._spinnerWrapper_1mfc7_1[data-size="2xl"]{--spinner-size: var(--spinner-size-2xl)}._spinnerWrapper_1mfc7_1[data-size="2xl"] ._spinner_1mfc7_1{--spinner-thickness: 3px}._spinnerWrapper_1mfc7_1[data-size="3xl"]{--spinner-size: var(--spinner-size-3xl)}._spinnerWrapper_1mfc7_1[data-size="3xl"] ._spinner_1mfc7_1{--spinner-thickness: 3.67px}._spinnerWrapper_1mfc7_1[data-size="4xl"]{--spinner-size: var(--spinner-size-4xl)}._spinnerWrapper_1mfc7_1[data-size="4xl"] ._spinner_1mfc7_1{--spinner-thickness: 4.33px}@keyframes _rotate_1mfc7_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._checkboxRow_5ztin_1{display:flex;align-items:center;gap:var(--spacing-2)}._checkboxRoot_5ztin_7{width:var(--size-6);height:var(--size-6);padding:0;border:1px solid var(--color-border-primary);border-radius:var(--radius-sm);display:flex;justify-content:center;align-items:center;background-color:var(--color-bg-primary)}._checkboxIndicator_5ztin_19{background-color:var(--color-bg-brand);border-radius:var(--radius-sm);width:100%;height:100%;display:flex;align-items:center;justify-content:center}._checkboxCheckmarkIcon_5ztin_29{width:var(--size-4);height:var(--size-4);color:var(--color-text-inverted)}._checkboxLabel_5ztin_35{font-size:var(--font-size-base);color:var(--color-text-primary)}._dialogOverlay_1flkk_1{background-color:var(--color-gray-950);position:fixed;inset:0;z-index:40;opacity:.5;animation:_overlayShow_1flkk_1 .2s cubic-bezier(.16,1,.3,1)}@keyframes _overlayShow_1flkk_1{0%{opacity:0}to{opacity:.5}}._dialogContent_1flkk_20{position:fixed;top:50%;left:50%;border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--color-bg-primary);color:var(--color-text-primary);z-index:50;display:flex;flex-direction:column;padding:var(--spacing-8);gap:var(--spacing-8);animation:_contentShow_1flkk_1 .2s cubic-bezier(.16,1,.3,1);transform:translate(-50%,-50%);width:90vw;max-width:450px}._dialogContent_1flkk_20[data-size=sm]{max-width:450px}._dialogContent_1flkk_20[data-size=md]{max-width:600px}._dialogContent_1flkk_20[data-size=lg]{max-width:800px}@keyframes _contentShow_1flkk_1{0%{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}._dialogCloseButton_1flkk_65{position:absolute;top:var(--spacing-4);right:var(--spacing-4);color:var(--color-text-tertiary)}._dialogTitle_1flkk_72{margin:0;font-weight:var(--font-weight-semibold);font-size:var(--font-size-xl);color:var(--color-text-primary)}._dialogDescription_1flkk_79{margin:0;font-weight:var(--font-weight-normal);font-size:var(--font-size-sm);color:var(--color-text-secondary)}._menuButtonContent_boy14_1{background-color:var(--color-bg-primary);border-radius:var(--radius-md);padding:var(--spacing-1_5);border:1px solid var(--color-border-primary);box-shadow:var(--shadow-lg);min-width:10rem}._menuButtonItem_boy14_10{color:var(--color-text-secondary);display:flex;align-items:center;font-size:var(--font-size-sm);padding-left:var(--spacing-2_5);padding-right:var(--spacing-2_5);padding-top:var(--spacing-2);padding-bottom:var(--spacing-2);border-radius:var(--radius-md);line-height:var(--leading-none);height:25px;position:relative;-webkit-user-select:none;user-select:none;outline:none}._menuButtonItem_boy14_10[data-disabled]{color:var(--color-text-disabled);pointer-events:none}._menuButtonItem_boy14_10:hover:not([data-disabled]){background-color:var(--color-bg-tertiary);cursor:pointer}._menuButtonItem_boy14_10._focus-visible_boy14_37,._menuButtonItem_boy14_10:focus-visible{background-color:var(--color-bg-tertiary)}._menuButtonArrow_boy14_42{fill:var(--color-bg-primary)}._toast_7o27j_1{background-color:var(--color-bg-primary);box-shadow:var(--shadow-lg);border-radius:var(--radius-lg);display:flex;align-items:center;padding:var(--spacing-4);gap:var(--spacing-4);border:1px solid var(--color-border-primary)}._toastContent_7o27j_12{display:flex;flex-direction:column;gap:var(--spacing-1);flex-grow:1}._toast_7o27j_1[data-state=open]{animation:_slideIn_7o27j_1 .15s cubic-bezier(.16,1,.3,1)}._toast_7o27j_1[data-state=closed]{animation:_hide_7o27j_1 .1s ease-in}._toast_7o27j_1[data-swipe=move]{transform:translate(var(--radix-toast-swipe-move-x))}._toast_7o27j_1[data-swipe=cancel]{transform:translate(0);transition:transform .2s ease-out}._toast_7o27j_1[data-swipe=end]{animation:_swipeOut_7o27j_1 .1s ease-out}@keyframes _hide_7o27j_1{0%{opacity:1}to{opacity:0}}@keyframes _slideIn_7o27j_1{0%{transform:translate(calc(100% + var(--viewport-padding)))}to{transform:translate(0)}}@keyframes _swipeOut_7o27j_1{0%{transform:translate(var(--radix-toast-swipe-end-x))}to{transform:translate(calc(100% + var(--viewport-padding)))}}._toastViewport_7o27j_70{list-style-type:none;padding:0;position:fixed;bottom:0;right:0;display:flex;flex-direction:column;padding:var(--spacing-6);gap:var(--spacing-2);width:390px;max-width:100vw;margin:0;z-index:999;outline:none;--viewport-padding: var(--spacing-6)}._toastTitle_7o27j_89{color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}._toastDescription_7o27j_95{color:var(--color-text-secondary);font-size:var(--font-size-sm)}._tooltipContent_4rdhp_1{background-color:var(--color-bg-tooltip);color:var(--color-text-inverted);border-radius:var(--radius-md);padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-xs);line-height:var(--leading-tight);box-shadow:var(--shadow-sm);z-index:50}._tooltipArrow_4rdhp_12{fill:var(--color-bg-tooltip)}
|
package/package.json
CHANGED
|
@@ -1,16 +1,24 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ryanodd/design-system",
|
|
3
|
-
"version": "0.0.0-
|
|
3
|
+
"version": "0.0.0-dev6",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
7
7
|
"types": "dist/esm/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/esm/index.d.ts",
|
|
11
|
+
"import": "./dist/esm/index.js",
|
|
12
|
+
"require": "./dist/cjs/index.js"
|
|
13
|
+
},
|
|
14
|
+
"./dist/index.css": "./dist/index.css"
|
|
15
|
+
},
|
|
8
16
|
"files": [
|
|
9
17
|
"dist"
|
|
10
18
|
],
|
|
11
19
|
"scripts": {
|
|
12
20
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
13
|
-
"build": "vite build",
|
|
21
|
+
"build": "vite build && mv dist/design-system.css dist/index.css 2>/dev/null || true",
|
|
14
22
|
"storybook": "storybook dev -p 6006",
|
|
15
23
|
"build-storybook": "storybook build"
|
|
16
24
|
},
|
|
File without changes
|
|
File without changes
|