snapflow-ui-kit 0.0.2 → 0.0.3

package/dist/components/Button/Button.d.ts

@@ -1,14 +1,2 @@
-import { ComponentPropsWithoutRef } from 'react';
-export type ButtonVariant = 'primary' | 'secondary' | 'outlined' | 'text';
-type CommonProps = {
-    variant?: ButtonVariant;
-};
-type AsButtonProps = {
-    asLink?: false;
-} & CommonProps & ComponentPropsWithoutRef<'button'>;
-type AsLinkProps = {
-    asLink: true;
-} & CommonProps & ComponentPropsWithoutRef<'a'>;
-export type ButtonProps = AsButtonProps | AsLinkProps;
+import { ButtonProps } from './Button.types';
 export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Button/Button.types.d.ts

@@ -0,0 +1,14 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'outlined' | 'text';
+type CommonProps = {
+    variant?: ButtonVariant;
+    icon?: ReactNode;
+};
+type AsButtonProps = {
+    asLink?: false;
+} & CommonProps & ComponentPropsWithoutRef<'button'>;
+type AsLinkProps = {
+    asLink: true;
+} & CommonProps & ComponentPropsWithoutRef<'a'>;
+export type ButtonProps = AsButtonProps | AsLinkProps;
+export {};

package/dist/components/Button/index.d.ts

@@ -1 +1,2 @@
 export * from './Button';
+export * from './Button.types';

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxProps } from './Checkbox.types';
+export declare const Checkbox: ({ children, className, checked, onChange, ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Checkbox/Checkbox.types.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export type CheckboxProps = {
+    children?: ReactNode;
+    checked?: boolean;
+    onChange?: ComponentPropsWithoutRef<'input'>['onChange'];
+} & Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'checked' | 'onChange' | 'children'>;

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox.types';

package/dist/components/Radio/Radio.d.ts

@@ -0,0 +1,2 @@
+import { RadioProps } from './Radio.types';
+export declare const Radio: ({ children, className, checked, onChange, ...rest }: RadioProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Radio/Radio.types.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export type RadioProps = {
+    children?: ReactNode;
+    checked?: boolean;
+    onChange?: ComponentPropsWithoutRef<'input'>['onChange'];
+} & Omit<ComponentPropsWithoutRef<'input'>, 'checked' | 'onChange' | 'children'>;

package/dist/components/Radio/index.d.ts

@@ -0,0 +1 @@
+export * from './Radio';

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,3 @@
+import 'simplebar-react/dist/simplebar.min.css';
+import { SelectProps } from './';
+export declare const Select: (props: SelectProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Select/Select.types.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export type SelectOption = {
+    icon?: ReactNode;
+    label: string;
+    value: string;
+};
+export type SelectProps = {
+    className?: string;
+    disabled?: boolean;
+    label?: string;
+    onChange?: (value: string) => void;
+    options: SelectOption[];
+    placeholder?: string;
+    value?: string;
+};

package/dist/components/Select/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Select';
+export * from './Select.types';

package/dist/components/Typography/Typography.d.ts

@@ -0,0 +1,3 @@
+import { ElementType } from 'react';
+import { TypographyProps } from './Typography.types';
+export declare const Typography: <T extends ElementType = "span">(props: TypographyProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Typography/Typography.types.d.ts

@@ -0,0 +1,8 @@
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+export type TypographyVariant = 'large' | 'h1' | 'h2' | 'h3' | 'text-16' | 'text-14' | 'text-14-bold' | 'text-16-bold' | 'text-14-medium' | 'small' | 'small-semibold' | 'link' | 'small-link';
+export type TypographyProps<T extends ElementType = 'span'> = {
+    as?: T;
+    children: ReactNode;
+    icon?: ReactNode;
+    variant: TypographyVariant;
+} & Omit<ComponentPropsWithoutRef<T>, 'as'>;

package/dist/components/Typography/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Typography';
+export * from './Typography.types';

package/dist/components/index.d.ts

@@ -1 +1,5 @@
 export * from './Button';
+export * from './Checkbox';
+export * from './Radio';
+export * from './Select';
+export * from './Typography';

package/dist/icons/index.d.ts

@@ -40,7 +40,6 @@ export * from './PlusCirceIcon';
 export * from './SearchIcon';
 export * from './SettingsIcon';
 export * from './TrashIcon';
-export * from './RadioButtonIcon';
 export * from './FacebookLogo';
 export * from './FlagRussia';
 export * from './FlagUK';

package/dist/index.css

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";:root{--color-accent-100: #73a5ff;--color-accent-300: #4c8dff;--color-accent-500: #397df6;--color-accent-700: #2f68cc;--color-accent-900: #234e99;--color-success-100: #80ffbf;--color-success-300: #22e584;--color-success-500: #14cc70;--color-success-700: #0f9954;--color-success-900: #0a6638;--color-danger-100: #ff8099;--color-danger-300: #f23d61;--color-danger-500: #cc1439;--color-danger-700: #990f2b;--color-danger-900: #660a1d;--color-warning-100: #ffd073;--color-warning-300: #e5ac39;--color-warning-500: #d99000;--color-warning-700: #960;--color-warning-900: #640;--color-dark-100: #4c4c4c;--color-dark-300: #333;--color-dark-500: #171717;--color-dark-700: #0d0d0d;--color-dark-900: #000;--color-light-100: #fff;--color-light-300: #f7fbff;--color-light-500: #edf3fa;--color-light-700: #d5dae0;--color-light-900: #8d9094}html{box-sizing:border-box;font-size:100%}*,*:before,*:after{box-sizing:border-box}body{margin:0;padding:0;font-family:Inter,sans-serif}input,button,select,textarea,optgroup,option{font-family:inherit;font-size:inherit;font-weight:inherit;font-style:inherit;color:inherit}._button_x75vv_1{all:unset;cursor:pointer;box-sizing:border-box;padding:6px 24px;border-radius:2px;font-weight:600;line-height:150%;text-align:center;transition-duration:.2s}._button_x75vv_1:disabled{cursor:not-allowed}._primary_x75vv_21{color:var(--color-light-100);background-color:var(--color-accent-500)}._primary_x75vv_21:active{color:var(--color-light-500);background-color:var(--color-accent-700)}._primary_x75vv_21:focus-visible{border:2px solid var(--color-accent-700)}._primary_x75vv_21:disabled{color:var(--color-light-900);background-color:var(--color-accent-900)}._primary_x75vv_21:hover:not(:active,:focus-visible){background-color:var(--color-accent-100)}._secondary_x75vv_44{color:var(--color-light-100);background-color:var(--color-dark-300)}._secondary_x75vv_44:active{color:var(--color-light-500);background-color:#212121}._secondary_x75vv_44:focus-visible{border:1px solid var(--color-accent-300)}._secondary_x75vv_44:disabled{color:var(--color-light-900);background-color:var(--color-dark-500)}._secondary_x75vv_44:hover:not(:active,:focus-visible){background-color:var(--color-dark-100)}._outlined_x75vv_67{border:1px solid var(--color-accent-500);color:var(--color-accent-500);background-color:transparent}._outlined_x75vv_67:active{border-color:var(--color-accent-700);color:var(--color-accent-700)}._outlined_x75vv_67:focus-visible{border:2px solid var(--color-accent-700);color:var(--color-accent-700)}._outlined_x75vv_67:disabled{border-color:var(--color-accent-900);color:var(--color-accent-900)}._outlined_x75vv_67:hover:not(:active,:focus-visible){border-color:var(--color-accent-100);color:var(--color-accent-100)}._text_x75vv_93{color:var(--color-accent-500)}._text_x75vv_93:active{color:var(--color-accent-700)}._text_x75vv_93:focus-visible{border:2px solid var(--color-accent-700)}._text_x75vv_93:disabled{color:var(--color-accent-900)}._text_x75vv_93:hover:not(:active,:focus-visible){color:var(--color-accent-100)}._icon_x75vv_113{color:#000;background-color:transparent}._link_x75vv_118{color:#00f;background-color:transparent}
+@import"https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";html{line-height:1.15;text-size-adjust:100%}body{margin:0;padding:0}main{display:block}h1{margin:.67em 0;font-size:2em}hr{overflow:visible;box-sizing:content-box;height:0}pre{font-family:monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace;font-size:1em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{appearance:auto}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{padding:0;border-style:none}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{display:table;box-sizing:border-box;max-width:100%;padding:0;color:inherit;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none}::-webkit-file-upload-button{font:inherit;appearance:auto}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}[data-simplebar]{position:relative;flex-direction:column;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start}.simplebar-wrapper{overflow:hidden;width:inherit;height:inherit;max-width:inherit;max-height:inherit}.simplebar-mask{direction:inherit;position:absolute;overflow:hidden;padding:0;margin:0;inset:0;width:auto!important;height:auto!important;z-index:0}.simplebar-offset{direction:inherit!important;box-sizing:inherit!important;resize:none!important;position:absolute;inset:0;padding:0;margin:0;-webkit-overflow-scrolling:touch}.simplebar-content-wrapper{direction:inherit;box-sizing:border-box!important;position:relative;display:block;height:100%;width:auto;max-width:100%;max-height:100%;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.simplebar-content-wrapper::-webkit-scrollbar,.simplebar-hide-scrollbar::-webkit-scrollbar{display:none;width:0;height:0}.simplebar-content:after,.simplebar-content:before{content:" ";display:table}.simplebar-placeholder{max-height:100%;max-width:100%;width:100%;pointer-events:none}.simplebar-height-auto-observer-wrapper{box-sizing:inherit!important;height:100%;width:100%;max-width:1px;position:relative;float:left;max-height:1px;overflow:hidden;z-index:-1;padding:0;margin:0;pointer-events:none;flex-grow:inherit;flex-shrink:0;flex-basis:0}.simplebar-height-auto-observer{box-sizing:inherit;display:block;opacity:0;position:absolute;top:0;left:0;height:1000%;width:1000%;min-height:1px;min-width:1px;overflow:hidden;pointer-events:none;z-index:-1}.simplebar-track{z-index:1;position:absolute;right:0;bottom:0;pointer-events:none;overflow:hidden}[data-simplebar].simplebar-dragging,[data-simplebar].simplebar-dragging .simplebar-content{pointer-events:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-simplebar].simplebar-dragging .simplebar-track{pointer-events:all}.simplebar-scrollbar{position:absolute;left:0;right:0;min-height:10px}.simplebar-scrollbar:before{position:absolute;content:"";background:#000;border-radius:7px;left:2px;right:2px;opacity:0;transition:opacity .2s .5s linear}.simplebar-scrollbar.simplebar-visible:before{opacity:.5;transition-delay:0s;transition-duration:0s}.simplebar-track.simplebar-vertical{top:0;width:11px}.simplebar-scrollbar:before{inset:2px}.simplebar-track.simplebar-horizontal{left:0;height:11px}.simplebar-track.simplebar-horizontal .simplebar-scrollbar{inset:0 auto 0 0;min-height:0;min-width:10px;width:auto}[data-simplebar-direction=rtl] .simplebar-track.simplebar-vertical{right:auto;left:0}.simplebar-dummy-scrollbar-size{direction:rtl;position:fixed;opacity:0;visibility:hidden;height:500px;width:500px;overflow-y:hidden;overflow-x:scroll;-ms-overflow-style:scrollbar!important}.simplebar-dummy-scrollbar-size>div{width:200%;height:200%;margin:10px 0}.simplebar-hide-scrollbar{position:fixed;left:0;visibility:hidden;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}:root{--color-accent-100: #73a5ff;--color-accent-300: #4c8dff;--color-accent-500: #397df6;--color-accent-700: #2f68cc;--color-accent-900: #234e99;--color-success-100: #80ffbf;--color-success-300: #22e584;--color-success-500: #14cc70;--color-success-700: #0f9954;--color-success-900: #0a6638;--color-danger-100: #ff8099;--color-danger-300: #f23d61;--color-danger-500: #cc1439;--color-danger-700: #990f2b;--color-danger-900: #660a1d;--color-warning-100: #ffd073;--color-warning-300: #e5ac39;--color-warning-500: #d99000;--color-warning-700: #960;--color-warning-900: #640;--color-dark-100: #4c4c4c;--color-dark-300: #333;--color-dark-400: #212121;--color-dark-500: #171717;--color-dark-700: #0d0d0d;--color-dark-900: #000;--color-light-100: #fff;--color-light-300: #f7fbff;--color-light-500: #edf3fa;--color-light-700: #d5dae0;--color-light-900: #8d9094}html{box-sizing:border-box;font-size:100%}*,*:before,*:after{box-sizing:border-box}body{font-family:Inter,sans-serif;font-size:16px}input,button,select,textarea,optgroup,option{font-weight:inherit;font-style:inherit;color:inherit}[data-simplebar] .simplebar-track.simplebar-vertical{width:14px;background:transparent}[data-simplebar] .simplebar-scrollbar:before{left:50%;transform:translate(-50%);width:4px;border-radius:3px;background:var(--color-dark-900)}[data-simplebar] .simplebar-scrollbar:hover:before{background:var(--color-light-900)}[data-simplebar] .simplebar-scrollbar.simplebar-visible:before{opacity:1}._button_dqki1_1{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:6px 24px;border-radius:2px;font-weight:600;line-height:150%;transition:color .12s ease-out,background-color .18s cubic-bezier(.2,0,0,1)}._button_dqki1_1:disabled{cursor:not-allowed}._primary_dqki1_25{color:var(--color-light-100);background-color:var(--color-accent-500)}._primary_dqki1_25:active{color:var(--color-light-500);background-color:var(--color-accent-700)}._primary_dqki1_25:focus-visible{outline:2px solid var(--color-accent-700)}._primary_dqki1_25:disabled{color:var(--color-light-900);background-color:var(--color-accent-900)}._primary_dqki1_25:hover:not(:active,:focus-visible,:disabled){background-color:var(--color-accent-100)}._secondary_dqki1_48{color:var(--color-light-100);background-color:var(--color-dark-300)}._secondary_dqki1_48:active{color:var(--color-light-500);background-color:var(--color-dark-400)}._secondary_dqki1_48:focus-visible{outline:2px solid var(--color-accent-300)}._secondary_dqki1_48:disabled{color:var(--color-light-900);background-color:var(--color-dark-500)}._secondary_dqki1_48:hover:not(:active,:focus-visible,:disabled){background-color:var(--color-dark-100)}._outlined_dqki1_71{border:1px solid var(--color-accent-500);color:var(--color-accent-500);background-color:transparent}._outlined_dqki1_71:active{border-color:var(--color-accent-700);color:var(--color-accent-700)}._outlined_dqki1_71:focus-visible{border:2px solid var(--color-accent-700);color:var(--color-accent-700)}._outlined_dqki1_71:disabled{border-color:var(--color-accent-900);color:var(--color-accent-900)}._outlined_dqki1_71:hover:not(:active,:focus-visible,:disabled){border-color:var(--color-accent-100);color:var(--color-accent-100)}._text_dqki1_97{color:var(--color-accent-500)}._text_dqki1_97:active{color:var(--color-accent-700)}._text_dqki1_97:focus-visible{outline:2px solid var(--color-accent-700)}._text_dqki1_97:disabled{color:var(--color-accent-900)}._text_dqki1_97:hover:not(:active,:focus-visible,:disabled){color:var(--color-accent-100)}._icon_dqki1_117{display:inline-flex;align-items:center;margin-right:10px}._checkbox_1q28z_1{cursor:pointer;position:relative;display:inline-flex;gap:10px;align-items:center}._input_1q28z_11{position:absolute;opacity:0}._labelSpan_1q28z_16{font-size:14px;font-weight:400;line-height:171%;color:var(--color-light-100)}._control_1q28z_23{position:relative;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:2px solid var(--color-light-500);border-radius:4px}._input_1q28z_11:checked+._control_1q28z_23{background-color:var(--color-light-100)}._control_1q28z_23:before{content:"";position:absolute;z-index:-1;width:36px;height:36px;border-radius:50%;background-color:transparent;transition:background-color .15s ease}._control_1q28z_23:hover:before{background-color:var(--color-dark-100)}._input_1q28z_11:focus-visible+._control_1q28z_23:before{background-color:var(--color-dark-100)}._checkbox_1q28z_1:active ._control_1q28z_23:before{background-color:var(--color-dark-100)}._control_1q28z_23:after{content:"";position:absolute;top:50%;left:50%;transform-origin:left bottom;transform:translate(calc(-50% + 4px),-40%) rotate(-45deg);width:10px;height:6px;border-bottom:2px solid transparent;border-left:2px solid transparent}._input_1q28z_11:checked+._control_1q28z_23:after{border-color:var(--color-dark-900)}._input_1q28z_11:disabled+._control_1q28z_23{border-color:var(--color-dark-100)}._input_1q28z_11:disabled+._control_1q28z_23:before{background-color:transparent}._input_1q28z_11:disabled~._labelSpan_1q28z_16,._input_1q28z_11:disabled+._control_1q28z_23{cursor:not-allowed}._input_1q28z_11:disabled:checked+._control_1q28z_23{background-color:var(--color-dark-100)}._input_1q28z_11:disabled:checked+._control_1q28z_23:after{border-color:var(--color-light-700)}._input_1q28z_11:disabled~._labelSpan_1q28z_16{color:var(--color-light-900)}._checkbox_1q28z_1:has(._input_1q28z_11:disabled){cursor:not-allowed}._radio_yk69v_1{cursor:pointer;position:relative;display:inline-flex;gap:10px;align-items:center}._input_yk69v_12{position:absolute;opacity:0}._labelSpan_yk69v_18{font-size:14px;font-weight:400;line-height:171%;color:var(--color-light-100)}._control_yk69v_26{position:relative;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:2px solid var(--color-light-100);border-radius:50%}._control_yk69v_26:before{content:"";position:absolute;z-index:-1;width:36px;height:36px;border-radius:50%;background-color:transparent;transition:background-color .2s ease}._control_yk69v_26:hover:before{background-color:var(--color-dark-300)}._input_yk69v_12:focus-visible+._control_yk69v_26:before{background-color:var(--color-dark-500)}._radio_yk69v_1:active ._control_yk69v_26:before{background-color:var(--color-dark-100)}._control_yk69v_26:after{content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;border-radius:50%;background-color:transparent;transform:translate(-50%,-50%)}._input_yk69v_12:checked+._control_yk69v_26:after{background-color:var(--color-light-100)}._input_yk69v_12:disabled+._control_yk69v_26{border-color:var(--color-dark-100)}._input_yk69v_12:disabled+._control_yk69v_26:before{background-color:transparent}._input_yk69v_12:disabled:checked+._control_yk69v_26:after{background-color:var(--color-dark-100)}._input_yk69v_12:disabled~._labelSpan_yk69v_18{color:var(--color-light-900)}._input_yk69v_12:disabled~._labelSpan_yk69v_18,._input_yk69v_12:disabled+._control_yk69v_26,._input_yk69v_12:disabled~._control_yk69v_26{cursor:not-allowed}._radio_yk69v_1:has(._input_yk69v_12:disabled){cursor:not-allowed}._container_zuge2_1{display:flex;flex-direction:column;width:100%}._label_zuge2_7{font-size:14px;font-weight:400;line-height:171%;color:var(--color-light-900)}._select_zuge2_14{position:relative;width:100%}._trigger_zuge2_19{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;width:100%;height:36px;padding:8px 12px;border:1px solid var(--color-light-900);border-radius:2px;font-size:16px;line-height:150%;color:var(--color-light-100);background-color:transparent;transition:color .2s,background-color .2s}._triggerOpen_zuge2_46{border-color:var(--color-light-100);border-radius:2px 2px 0 0;background-color:var(--color-dark-300)}._trigger_zuge2_19:disabled{cursor:not-allowed;border-color:var(--color-dark-100);color:var(--color-dark-100)}._trigger_zuge2_19:focus-visible{padding:7px 11px;border:2px solid var(--color-accent-500)}._trigger_zuge2_19:hover:not(:disabled,._triggerOpen_zuge2_46){color:var(--color-light-900)}._placeholder_zuge2_67{color:var(--color-light-900)}._selectedContent_zuge2_71{overflow:hidden;display:flex;gap:8px;align-items:center;text-overflow:ellipsis;white-space:nowrap}._optionIcon_zuge2_81{display:inline-flex;flex-shrink:0;align-items:center}._arrow_zuge2_87{display:inline-flex;margin-left:24px;color:var(--color-light-100);transition:transform .2s}._trigger_zuge2_19:disabled ._arrow_zuge2_87{color:var(--color-dark-100)}._arrow_zuge2_87._open_zuge2_98{transform:rotate(180deg)}._dropdown_zuge2_102{position:absolute;z-index:1000;top:100%;left:0;box-sizing:border-box;width:100%;border:1px solid var(--color-light-100);border-top:none;border-radius:0 0 2px 2px;background-color:var(--color-dark-300);box-shadow:0 4px 8px #0003}._dropdown_zuge2_102 .simplebar-scrollbar:before{background:var(--color-light-900)}._option_zuge2_81{all:unset;cursor:pointer;display:flex;gap:8px;align-items:center;box-sizing:border-box;width:100%;padding:7px 12px;font-size:16px;font-weight:400;line-height:150%;color:var(--color-light-100)}._option_zuge2_81:hover{color:var(--color-accent-500);background-color:var(--color-dark-100);transition:color .12s ease-out,background-color .16s cubic-bezier(.2,0,0,1)}._option_zuge2_81._selected_zuge2_71{color:var(--color-accent-500)}._option_zuge2_81:focus-visible{background-color:var(--color-dark-100);outline:2px solid var(--color-accent-500);outline-offset:-2px}._typography_11tbz_1{display:inline-flex;align-items:center;margin:0;color:var(--color-dark-900)}._icon_11tbz_8{display:inline-flex;align-items:center;margin-right:8px}._large_11tbz_14{font-size:26px;font-weight:600;line-height:138%}._h1_11tbz_20{font-size:20px;font-weight:700;line-height:180%}._h2_11tbz_26{font-size:18px;font-weight:700;line-height:133%}._h3_11tbz_32{font-size:16px;font-weight:600;line-height:150%}._text-16_11tbz_38{font-size:16px;font-weight:400;line-height:150%}._text-16-bold_11tbz_44{font-size:16px;font-weight:700;line-height:150%}._text-14_11tbz_50{font-size:14px;font-weight:400;line-height:171%}._text-14-bold_11tbz_56{font-size:14px;font-weight:700;line-height:171%}._text-14-medium_11tbz_62{font-size:14px;font-weight:500;line-height:171%}._small_11tbz_68{font-size:12px;font-weight:400;line-height:133%}._small-semibold_11tbz_74{font-size:12px;font-weight:600;line-height:133%}._link_11tbz_80{font-size:14px;font-weight:400;line-height:171%;color:var(--color-accent-500);text-decoration:underline;text-decoration-skip-ink:none}._small-link_11tbz_89{font-size:12px;font-weight:400;line-height:133%;color:var(--color-accent-500);text-decoration:underline;text-decoration-skip-ink:none}

package/dist/index.d.ts

@@ -1,3 +1,6 @@
+import './styles/normalize.css';
+import 'simplebar-react/dist/simplebar.min.css';
 import './styles/index.css';
 export * from './components';
 export { clsx } from 'clsx';
+export { default as SimpleBar } from 'simplebar-react';

package/dist/index.js

@@ -1,25 +1,166 @@
-import { clsx as v } from "clsx";
-import { clsx as j } from "clsx";
-import { jsx as n } from "react/jsx-runtime";
-const x = "_button_x75vv_1", l = "_primary_x75vv_21", m = "_secondary_x75vv_44", u = "_outlined_x75vv_67", p = "_text_x75vv_93", y = "_icon_x75vv_113", b = "_link_x75vv_118", s = {
-  button: x,
-  primary: l,
-  secondary: m,
-  outlined: u,
-  text: p,
-  icon: y,
-  link: b
-}, f = (r) => {
-  const { className: c, variant: _ = "primary", asLink: i, ...t } = r, o = v(s.button, s[_], c);
-  if (i) {
-    const { ...e } = t;
-    return /* @__PURE__ */ n("a", { className: o, ...e });
+import { clsx as _ } from "clsx";
+import { clsx as ke } from "clsx";
+import f from "simplebar-react";
+import { default as fe } from "simplebar-react";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { useId as v, useState as w, useRef as S, useEffect as q } from "react";
+const $ = "_button_dqki1_1", I = "_primary_dqki1_25", O = "_secondary_dqki1_48", L = "_outlined_dqki1_71", B = "_text_dqki1_97", P = "_icon_dqki1_117", g = {
+  button: $,
+  primary: I,
+  secondary: O,
+  outlined: L,
+  text: B,
+  icon: P
+}, me = (o) => {
+  const { className: l, variant: a = "primary", asLink: r, icon: s, ...d } = o, p = _(g.button, g[a], l);
+  if (r) {
+    const { children: h, ...m } = d;
+    return /* @__PURE__ */ c("a", { className: p, ...m, children: [
+      s && /* @__PURE__ */ e("span", { className: g.icon, children: s }),
+      h
+    ] });
   }
-  const { ...a } = t;
-  return /* @__PURE__ */ n("button", { className: o, ...a });
+  const { children: u, ...i } = d;
+  return /* @__PURE__ */ c("button", { className: p, ...i, children: [
+    s && /* @__PURE__ */ e("span", { className: g.icon, children: s }),
+    u
+  ] });
+}, E = "_checkbox_1q28z_1", R = "_input_1q28z_11", j = "_labelSpan_1q28z_16", T = "_control_1q28z_23", x = {
+  checkbox: E,
+  input: R,
+  labelSpan: j,
+  control: T
+}, be = ({ children: o, className: l, checked: a, onChange: r, ...s }) => /* @__PURE__ */ c("label", { className: _(x.checkbox, l), children: [
+  /* @__PURE__ */ e("input", { type: "checkbox", className: x.input, checked: a, onChange: r, ...s }),
+  /* @__PURE__ */ e("span", { className: x.control }),
+  o && /* @__PURE__ */ e("span", { className: x.labelSpan, children: o })
+] }), A = "_radio_yk69v_1", D = "_input_yk69v_12", H = "_labelSpan_yk69v_18", M = "_control_yk69v_26", z = {
+  radio: A,
+  input: D,
+  labelSpan: H,
+  control: M
+}, ge = ({ children: o, className: l, checked: a, onChange: r, ...s }) => /* @__PURE__ */ c("label", { className: _(z.radio, l), children: [
+  /* @__PURE__ */ e("input", { type: "radio", className: z.input, checked: a, onChange: r, ...s }),
+  /* @__PURE__ */ e("span", { className: z.control }),
+  o && /* @__PURE__ */ e("span", { className: z.labelSpan, children: o })
+] }), Z = (o) => {
+  const l = v();
+  return /* @__PURE__ */ c(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...o,
+      children: [
+        /* @__PURE__ */ e("g", { clipPath: `url(#${l})`, children: /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M5.51416 9.45842C5.5137 9.22477 5.59508 8.99834 5.74416 8.81842C5.82811 8.71717 5.93121 8.63346 6.04756 8.57211C6.1639 8.51076 6.29121 8.47296 6.42219 8.46089C6.55316 8.44881 6.68524 8.46269 6.81084 8.50174C6.93644 8.54078 7.05311 8.60422 7.15416 8.68842L12.5142 13.1684L17.8842 8.84843C17.9864 8.76536 18.1041 8.70333 18.2305 8.6659C18.3568 8.62846 18.4893 8.61637 18.6203 8.63031C18.7514 8.64425 18.8784 8.68395 18.994 8.74712C19.1096 8.81029 19.2116 8.8957 19.2942 8.99843C19.3852 9.10189 19.4539 9.22306 19.4959 9.35432C19.5378 9.48558 19.5522 9.62411 19.5382 9.7612C19.5241 9.89829 19.4818 10.031 19.414 10.151C19.3462 10.271 19.2543 10.3756 19.1442 10.4584L13.1442 15.2884C12.9652 15.4355 12.7408 15.5159 12.5092 15.5159C12.2775 15.5159 12.0531 15.4355 11.8742 15.2884L5.87416 10.2884C5.75314 10.1881 5.65748 10.0607 5.59493 9.91646C5.53238 9.77225 5.50471 9.61533 5.51416 9.45842Z",
+            fill: "currentColor"
+          }
+        ) }),
+        /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e("clipPath", { id: l, children: /* @__PURE__ */ e("rect", { width: "24", height: "24", fill: "white" }) }) })
+      ]
+    }
+  );
+}, F = "_container_zuge2_1", G = "_label_zuge2_7", J = "_select_zuge2_14", K = "_trigger_zuge2_19", Q = "_triggerOpen_zuge2_46", U = "_placeholder_zuge2_67", V = "_selectedContent_zuge2_71", W = "_optionIcon_zuge2_81", X = "_arrow_zuge2_87", Y = "_open_zuge2_98", ee = "_dropdown_zuge2_102", te = "_option_zuge2_81", ne = "_selected_zuge2_71", n = {
+  container: F,
+  label: G,
+  select: J,
+  trigger: K,
+  triggerOpen: Q,
+  placeholder: U,
+  selectedContent: V,
+  optionIcon: W,
+  arrow: X,
+  open: Y,
+  dropdown: ee,
+  option: te,
+  selected: ne
+}, xe = (o) => {
+  const { className: l, disabled: a = !1, label: r, onChange: s, options: d, placeholder: p, value: u } = o, [i, h] = w(!1), m = S(null), b = d.find((t) => t.value === u), N = () => {
+    a || h(!i);
+  }, k = (t) => {
+    s?.(t), h(!1);
+  };
+  return q(() => {
+    const t = (y) => {
+      m.current && !m.current.contains(y.target) && h(!1);
+    };
+    return i && document.addEventListener("mousedown", t), () => {
+      document.removeEventListener("mousedown", t);
+    };
+  }, [i]), /* @__PURE__ */ c("div", { className: _(n.container, l), children: [
+    r && /* @__PURE__ */ e("label", { className: n.label, children: r }),
+    /* @__PURE__ */ c("div", { className: n.select, ref: m, children: [
+      /* @__PURE__ */ c(
+        "button",
+        {
+          className: _(n.trigger, i && n.triggerOpen),
+          disabled: a,
+          onClick: N,
+          type: "button",
+          "aria-haspopup": "listbox",
+          "aria-expanded": i,
+          children: [
+            /* @__PURE__ */ c("span", { className: b ? n.selectedContent : n.placeholder, children: [
+              b?.icon && /* @__PURE__ */ e("span", { className: n.optionIcon, children: b.icon }),
+              b ? b.label : p || "Select an option"
+            ] }),
+            /* @__PURE__ */ e("span", { className: _(n.arrow, i && n.open), children: /* @__PURE__ */ e(Z, {}) })
+          ]
+        }
+      ),
+      i && /* @__PURE__ */ e(f, { className: n.dropdown, role: "listbox", style: { maxHeight: 191 }, children: d.map((t) => /* @__PURE__ */ c(
+        "button",
+        {
+          className: _(n.option, t.value === u && n.selected),
+          onClick: () => k(t.value),
+          type: "button",
+          role: "option",
+          "aria-selected": t.value === u,
+          children: [
+            t.icon && /* @__PURE__ */ e("span", { className: n.optionIcon, children: t.icon }),
+            t.label
+          ]
+        },
+        t.value
+      )) })
+    ] })
+  ] });
+}, oe = "_typography_11tbz_1", se = "_icon_11tbz_8", le = "_large_11tbz_14", ce = "_h1_11tbz_20", ae = "_h2_11tbz_26", re = "_h3_11tbz_32", ie = "_small_11tbz_68", _e = "_link_11tbz_80", C = {
+  typography: oe,
+  icon: se,
+  large: le,
+  h1: ce,
+  h2: ae,
+  h3: re,
+  "text-16": "_text-16_11tbz_38",
+  "text-16-bold": "_text-16-bold_11tbz_44",
+  "text-14": "_text-14_11tbz_50",
+  "text-14-bold": "_text-14-bold_11tbz_56",
+  "text-14-medium": "_text-14-medium_11tbz_62",
+  small: ie,
+  "small-semibold": "_small-semibold_11tbz_74",
+  link: _e,
+  "small-link": "_small-link_11tbz_89"
+}, ze = (o) => {
+  const { as: l = "span", children: a, className: r, icon: s, variant: d, ...p } = o;
+  return /* @__PURE__ */ c(l, { className: _(C.typography, C[d], r), ...p, children: [
+    s && /* @__PURE__ */ e("span", { className: C.icon, children: s }),
+    a
+  ] });
 };
 export {
-  f as Button,
-  j as clsx
+  me as Button,
+  be as Checkbox,
+  ge as Radio,
+  xe as Select,
+  fe as SimpleBar,
+  ze as Typography,
+  ke as clsx
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef } from 'react'\n\nimport { clsx } from 'clsx'\n\nimport s from './Button.module.css'\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'outlined' | 'text'\n\ntype CommonProps = {\n  variant?: ButtonVariant\n}\n\ntype AsButtonProps = {\n  asLink?: false\n} & CommonProps &\n  ComponentPropsWithoutRef<'button'>\n\ntype AsLinkProps = {\n  asLink: true\n} & CommonProps &\n  ComponentPropsWithoutRef<'a'>\n\nexport type ButtonProps = AsButtonProps | AsLinkProps\n\nexport const Button = (props: ButtonProps) => {\n  const { className, variant = 'primary', asLink, ...rest } = props\n  const classes = clsx(s.button, s[variant], className)\n\n  if (asLink) {\n    const { ...linkProps } = rest as AsLinkProps\n    return <a className={classes} {...linkProps} />\n  }\n\n  const { ...buttonProps } = rest as AsButtonProps\n  return <button className={classes} {...buttonProps} />\n}\n"],"names":["Button","props","className","variant","asLink","rest","classes","clsx","linkProps","jsx","buttonProps"],"mappings":";;;;;;;;;;;GAwBaA,IAAS,CAACC,MAAuB;AAC5C,QAAM,EAAE,WAAAC,GAAW,SAAAC,IAAU,WAAW,QAAAC,GAAQ,GAAGC,MAASJ,GACtDK,IAAUC,EAAK,EAAE,QAAQ,EAAEJ,CAAO,GAAGD,CAAS;AAEpD,MAAIE,GAAQ;AACV,UAAM,EAAE,GAAGI,EAAA,IAAcH;AACzB,WAAO,gBAAAI,EAAC,KAAA,EAAE,WAAWH,GAAU,GAAGE,GAAW;AAAA,EAC/C;AAEA,QAAM,EAAE,GAAGE,EAAA,IAAgBL;AAC3B,SAAO,gBAAAI,EAAC,UAAA,EAAO,WAAWH,GAAU,GAAGI,GAAa;AACtD;"}
+{"version":3,"file":"index.js","sources":["../src/components/Button/Button.tsx","../src/components/Checkbox/Checkbox.tsx","../src/components/Radio/Radio.tsx","../src/icons/ArrowDownIcon/ArrowDownIcon.tsx","../src/components/Select/Select.tsx","../src/components/Typography/Typography.tsx"],"sourcesContent":["import { clsx } from 'clsx'\n\nimport s from './Button.module.css'\nimport { ButtonProps } from './Button.types'\n\ntype AsButtonProps = ButtonProps & { asLink?: false }\ntype AsLinkProps = ButtonProps & { asLink: true }\n\nexport const Button = (props: ButtonProps) => {\n  const { className, variant = 'primary', asLink, icon, ...rest } = props\n  const classes = clsx(s.button, s[variant], className)\n\n  if (asLink) {\n    const { children, ...linkProps } = rest as AsLinkProps\n    return (\n      <a className={classes} {...linkProps}>\n        {icon && <span className={s.icon}>{icon}</span>}\n        {children}\n      </a>\n    )\n  }\n\n  const { children, ...buttonProps } = rest as AsButtonProps\n  return (\n    <button className={classes} {...buttonProps}>\n      {icon && <span className={s.icon}>{icon}</span>}\n      {children}\n    </button>\n  )\n}\n","import { clsx } from 'clsx'\nimport s from './Checkbox.module.css'\nimport { CheckboxProps } from './Checkbox.types'\n\nexport const Checkbox = ({ children, className, checked, onChange, ...rest }: CheckboxProps) => {\n  return (\n    <label className={clsx(s.checkbox, className)}>\n      <input type=\"checkbox\" className={s.input} checked={checked} onChange={onChange} {...rest} />\n\n      <span className={s.control} />\n      {children && <span className={s.labelSpan}>{children}</span>}\n    </label>\n  )\n}\n","import { clsx } from 'clsx'\nimport s from './Radio.module.css'\nimport { RadioProps } from './Radio.types'\n\nexport const Radio = ({ children, className, checked, onChange, ...rest }: RadioProps) => {\n  return (\n    <label className={clsx(s.radio, className)}>\n      <input type=\"radio\" className={s.input} checked={checked} onChange={onChange} {...rest} />\n\n      <span className={s.control} />\n      {children && <span className={s.labelSpan}>{children}</span>}\n    </label>\n  )\n}\n","import { useId, type SVGProps } from 'react'\n\nexport const ArrowDownIcon = (props: SVGProps<SVGSVGElement>) => {\n  const id = useId()\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <g clipPath={`url(#${id})`}>\n        <path\n          d=\"M5.51416 9.45842C5.5137 9.22477 5.59508 8.99834 5.74416 8.81842C5.82811 8.71717 5.93121 8.63346 6.04756 8.57211C6.1639 8.51076 6.29121 8.47296 6.42219 8.46089C6.55316 8.44881 6.68524 8.46269 6.81084 8.50174C6.93644 8.54078 7.05311 8.60422 7.15416 8.68842L12.5142 13.1684L17.8842 8.84843C17.9864 8.76536 18.1041 8.70333 18.2305 8.6659C18.3568 8.62846 18.4893 8.61637 18.6203 8.63031C18.7514 8.64425 18.8784 8.68395 18.994 8.74712C19.1096 8.81029 19.2116 8.8957 19.2942 8.99843C19.3852 9.10189 19.4539 9.22306 19.4959 9.35432C19.5378 9.48558 19.5522 9.62411 19.5382 9.7612C19.5241 9.89829 19.4818 10.031 19.414 10.151C19.3462 10.271 19.2543 10.3756 19.1442 10.4584L13.1442 15.2884C12.9652 15.4355 12.7408 15.5159 12.5092 15.5159C12.2775 15.5159 12.0531 15.4355 11.8742 15.2884L5.87416 10.2884C5.75314 10.1881 5.65748 10.0607 5.59493 9.91646C5.53238 9.77225 5.50471 9.61533 5.51416 9.45842Z\"\n          fill=\"currentColor\"\n        />\n      </g>\n      <defs>\n        <clipPath id={id}>\n          <rect width=\"24\" height=\"24\" fill=\"white\" />\n        </clipPath>\n      </defs>\n    </svg>\n  )\n}\n","import { useEffect, useRef, useState } from 'react'\n\nimport { clsx } from 'clsx'\n\nimport SimpleBar from 'simplebar-react'\nimport 'simplebar-react/dist/simplebar.min.css'\n\nimport { ArrowDownIcon } from '@/icons'\n\nimport s from './Select.module.css'\nimport { SelectProps } from './'\n\nexport const Select = (props: SelectProps) => {\n  const { className, disabled = false, label, onChange, options, placeholder, value } = props\n\n  const [isOpen, setIsOpen] = useState(false)\n  const selectRef = useRef<HTMLDivElement>(null)\n\n  const selectedOption = options.find((option) => option.value === value)\n\n  const handleToggle = () => {\n    if (!disabled) {\n      setIsOpen(!isOpen)\n    }\n  }\n\n  const handleSelect = (optionValue: string) => {\n    onChange?.(optionValue)\n    setIsOpen(false)\n  }\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (selectRef.current && !selectRef.current.contains(event.target as Node)) {\n        setIsOpen(false)\n      }\n    }\n\n    if (isOpen) {\n      document.addEventListener('mousedown', handleClickOutside)\n    }\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [isOpen])\n\n  return (\n    <div className={clsx(s.container, className)}>\n      {label && <label className={s.label}>{label}</label>}\n\n      <div className={s.select} ref={selectRef}>\n        <button\n          className={clsx(s.trigger, isOpen && s.triggerOpen)}\n          disabled={disabled}\n          onClick={handleToggle}\n          type=\"button\"\n          aria-haspopup=\"listbox\"\n          aria-expanded={isOpen}\n        >\n          <span className={selectedOption ? s.selectedContent : s.placeholder}>\n            {selectedOption?.icon && <span className={s.optionIcon}>{selectedOption.icon}</span>}\n            {selectedOption ? selectedOption.label : placeholder || 'Select an option'}\n          </span>\n          <span className={clsx(s.arrow, isOpen && s.open)}>\n            <ArrowDownIcon />\n          </span>\n        </button>\n\n        {isOpen && (\n          <SimpleBar className={s.dropdown} role=\"listbox\" style={{ maxHeight: 191 }}>\n            {options.map((option) => (\n              <button\n                key={option.value}\n                className={clsx(s.option, option.value === value && s.selected)}\n                onClick={() => handleSelect(option.value)}\n                type=\"button\"\n                role=\"option\"\n                aria-selected={option.value === value}\n              >\n                {option.icon && <span className={s.optionIcon}>{option.icon}</span>}\n                {option.label}\n              </button>\n            ))}\n          </SimpleBar>\n        )}\n      </div>\n    </div>\n  )\n}\n","import { ElementType } from 'react'\n\nimport { clsx } from 'clsx'\n\nimport s from './Typography.module.css'\nimport { TypographyProps } from './Typography.types'\n\nexport const Typography = <T extends ElementType = 'span'>(props: TypographyProps<T>) => {\n  const { as: Component = 'span', children, className, icon, variant, ...rest } = props\n\n  return (\n    <Component className={clsx(s.typography, s[variant], className)} {...rest}>\n      {icon && <span className={s.icon}>{icon}</span>}\n      {children}\n    </Component>\n  )\n}\n"],"names":["Button","props","className","variant","asLink","icon","rest","classes","clsx","s","children","linkProps","jsxs","jsx","buttonProps","Checkbox","checked","onChange","Radio","ArrowDownIcon","id","useId","Select","disabled","label","options","placeholder","value","isOpen","setIsOpen","useState","selectRef","useRef","selectedOption","option","handleToggle","handleSelect","optionValue","useEffect","handleClickOutside","event","SimpleBar","Typography","Component"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "snapflow-ui-kit",
   "private": false,
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -34,15 +34,17 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "clsx": "^2.1.1"
+    "clsx": "2.1.1",
+    "simplebar": "6.3.3",
+    "simplebar-react": "3.3.2"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.2",
+    "@eslint/js": "9.39.2",
     "@storybook/addon-docs": "10.2.0",
     "@storybook/react-vite": "10.2.0",
-    "@types/node": "^25.0.10",
-    "@types/react": "^19.2.9",
-    "@types/react-dom": "^19.2.3",
+    "@types/node": "25.0.10",
+    "@types/react": "19.2.9",
+    "@types/react-dom": "19.2.3",
     "@typescript-eslint/eslint-plugin": "8.53.1",
     "@typescript-eslint/parser": "8.53.1",
     "eslint": "9.39.2",
@@ -50,23 +52,24 @@
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "7.0.1",
     "eslint-plugin-storybook": "10.2.0",
-    "husky": "^9.1.7",
-    "lint-staged": "^16.2.7",
+    "husky": "9.1.7",
+    "lint-staged": "16.2.7",
     "prettier": "3.8.1",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "storybook": "10.2.0",
-    "stylelint": "^17.0.0",
+    "storybook-addon-pseudo-states": "10.2.0",
+    "stylelint": "17.0.0",
     "stylelint-config-clean-order": "8.0.0",
-    "stylelint-config-standard": "^40.0.0",
-    "stylelint-order": "^7.0.1",
-    "typescript": "^5.9.3",
-    "typescript-eslint": "^8.53.1",
-    "vite": "^7.3.1"
+    "stylelint-config-standard": "40.0.0",
+    "stylelint-order": "7.0.1",
+    "typescript": "5.9.3",
+    "typescript-eslint": "8.53.1",
+    "vite": "7.3.1"
   },
   "peerDependencies": {
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3"
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
   },
   "lint-staged": {
     "*.{ts,tsx}": [
@@ -76,7 +79,7 @@
       "stylelint"
     ],
     "*": [
-      "prettier --check --ignore-unknown"
+      "prettier --write --ignore-unknown"
     ]
   }
 }

package/dist/icons/RadioButtonIcon/RadioButtonIcon.d.ts

@@ -1,6 +0,0 @@
-import { type SVGProps } from 'react';
-type Props = {
-    checked?: boolean;
-};
-export declare const RadioButtonIcon: ({ checked, ...rest }: SVGProps<SVGSVGElement> & Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/icons/RadioButtonIcon/index.d.ts

@@ -1 +0,0 @@
-export { RadioButtonIcon } from './RadioButtonIcon';