@iyulab/components 0.3.0 → 1.0.0

package/dist/react/USplitPanel.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { USplitPanel as USplitPanelElement } from '../components/split-panel/USplitPanel';
+import { type ShiftEventDetail } from '../events/ShiftEvent';
+
+export declare const USplitPanel: React.ForwardRefExoticComponent<
+  Partial<USplitPanelElement> & React.HTMLAttributes<USplitPanelElement> & {
+  onShiftStart?: (event: CustomEvent<ShiftEventDetail>) => void;
+  onShift?: (event: CustomEvent<ShiftEventDetail>) => void;
+  onShiftEnd?: (event: CustomEvent<ShiftEventDetail>) => void;
+  }
+>;
+
+export type USplitPanelProps = React.ComponentProps<typeof USplitPanel>;

package/dist/{react-components → react}/USplitPanel.js

@@ -1,10 +1,14 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { USplitPanel } from '../components/split-panel/USplitPanel';
+import { USplitPanel } from '../components/split-panel/USplitPanel.js';
 
 export const USplitPanel = createComponent({
   react: React,
   tagName: 'u-split-panel',
   elementClass: USplitPanel,
-  events: {}
+  events: {
+    onShiftStart: 'shift-start',
+    onShift: 'shift',
+    onShiftEnd: 'shift-end',
+  },
 });

package/dist/react/USwitch.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { USwitch as USwitchElement } from '../components/switch/USwitch';
+
+export declare const USwitch: React.ForwardRefExoticComponent<
+  Partial<USwitchElement> & React.HTMLAttributes<USwitchElement> & {
+  onChange?: (event: CustomEvent) => void;
+  }
+>;
+
+export type USwitchProps = React.ComponentProps<typeof USwitch>;

package/dist/react/USwitch.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { USwitch } from '../components/switch/USwitch.js';
+
+export const USwitch = createComponent({
+  react: React,
+  tagName: 'u-switch',
+  elementClass: USwitch,
+  events: {
+    onChange: 'change',
+  },
+});

package/dist/react/UTab.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { UTab as UTabElement } from '../components/tab/UTab';
+import { type RemoveEventDetail } from '../events/RemoveEvent';
+
+export declare const UTab: React.ForwardRefExoticComponent<
+  Partial<UTabElement> & React.HTMLAttributes<UTabElement> & {
+  onRemove?: (event: CustomEvent<RemoveEventDetail>) => void;
+  }
+>;
+
+export type UTabProps = React.ComponentProps<typeof UTab>;

package/dist/react/UTab.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { UTab } from '../components/tab/UTab.js';
+
+export const UTab = createComponent({
+  react: React,
+  tagName: 'u-tab',
+  elementClass: UTab,
+  events: {
+    onRemove: 'remove',
+  },
+});

package/dist/react/UTabPanel.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { UTabPanel as UTabPanelElement } from '../components/tab-panel/UTabPanel';
+
+export declare const UTabPanel: React.ForwardRefExoticComponent<
+  Partial<UTabPanelElement> & React.HTMLAttributes<UTabPanelElement> & {
+  }
+>;
+
+export type UTabPanelProps = React.ComponentProps<typeof UTabPanel>;

package/dist/react/UTabPanel.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { UTabPanel } from '../components/tab-panel/UTabPanel.js';
+
+export const UTabPanel = createComponent({
+  react: React,
+  tagName: 'u-tab-panel',
+  elementClass: UTabPanel,
+  events: {},
+});

package/dist/{react-components → react}/UTag.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import { UTag } from '../components/tag/UTag';
+import { UTag as UTagElement } from '../components/tag/UTag';
 
 export declare const UTag: React.ForwardRefExoticComponent<
-  Partial<UTag> & React.HTMLAttributes<UTag>
+  Partial<UTagElement> & React.HTMLAttributes<UTagElement> & {
+  }
 >;
 
 export type UTagProps = React.ComponentProps<typeof UTag>;

package/dist/{react-components → react}/UTag.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UTag } from '../components/tag/UTag';
+import { UTag } from '../components/tag/UTag.js';
 
 export const UTag = createComponent({
   react: React,
   tagName: 'u-tag',
   elementClass: UTag,
-  events: {}
+  events: {},
 });

package/dist/react/UTextarea.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { UTextarea as UTextareaElement } from '../components/textarea/UTextarea';
+
+export declare const UTextarea: React.ForwardRefExoticComponent<
+  Partial<UTextareaElement> & React.HTMLAttributes<UTextareaElement> & {
+  onInput?: (event: CustomEvent) => void;
+  onChange?: (event: CustomEvent) => void;
+  }
+>;
+
+export type UTextareaProps = React.ComponentProps<typeof UTextarea>;

package/dist/react/UTextarea.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { UTextarea } from '../components/textarea/UTextarea.js';
+
+export const UTextarea = createComponent({
+  react: React,
+  tagName: 'u-textarea',
+  elementClass: UTextarea,
+  events: {
+    onInput: 'input',
+    onChange: 'change',
+  },
+});

package/dist/react/UTooltip.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { UTooltip as UTooltipElement } from '../components/tooltip/UTooltip';
+
+export declare const UTooltip: React.ForwardRefExoticComponent<
+  Partial<UTooltipElement> & React.HTMLAttributes<UTooltipElement> & {
+  onShow?: (event: CustomEvent) => void;
+  onHide?: (event: CustomEvent) => void;
+  }
+>;
+
+export type UTooltipProps = React.ComponentProps<typeof UTooltip>;

package/dist/{react-components → react}/UTooltip.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UTooltip } from '../components/tooltip/UTooltip';
+import { UTooltip } from '../components/tooltip/UTooltip.js';
 
 export const UTooltip = createComponent({
   react: React,
   tagName: 'u-tooltip',
   elementClass: UTooltip,
-  events: {}
+  events: {
+    onShow: 'show',
+    onHide: 'hide',
+  },
 });

package/dist/react/UTree.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { UTree as UTreeElement } from '../components/tree/UTree';
+
+export declare const UTree: React.ForwardRefExoticComponent<
+  Partial<UTreeElement> & React.HTMLAttributes<UTreeElement> & {
+  onChange?: (event: CustomEvent) => void;
+  }
+>;
+
+export type UTreeProps = React.ComponentProps<typeof UTree>;

package/dist/{react-components → react}/UTree.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UTree } from '../components/tree/UTree';
+import { UTree } from '../components/tree/UTree.js';
 
 export const UTree = createComponent({
   react: React,
   tagName: 'u-tree',
   elementClass: UTree,
-  events: {}
+  events: {
+    onChange: 'change',
+  },
 });

package/dist/react/UTreeItem.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { UTreeItem as UTreeItemElement } from '../components/tree-item/UTreeItem';
+import { type ExpandEventDetail } from '../events/ExpandEvent';
+import { type CollapseEventDetail } from '../events/CollapseEvent';
+import { type PickEventDetail } from '../events/PickEvent';
+import { type CheckEventDetail } from '../events/CheckEvent';
+
+export declare const UTreeItem: React.ForwardRefExoticComponent<
+  Partial<UTreeItemElement> & React.HTMLAttributes<UTreeItemElement> & {
+  onExpand?: (event: CustomEvent<ExpandEventDetail>) => void;
+  onCollapse?: (event: CustomEvent<CollapseEventDetail>) => void;
+  onPick?: (event: CustomEvent<PickEventDetail>) => void;
+  onCheck?: (event: CustomEvent<CheckEventDetail>) => void;
+  }
+>;
+
+export type UTreeItemProps = React.ComponentProps<typeof UTreeItem>;

package/dist/{react-components → react}/UTreeItem.js

@@ -1,10 +1,15 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UTreeItem } from '../components/tree-item/UTreeItem';
+import { UTreeItem } from '../components/tree-item/UTreeItem.js';
 
 export const UTreeItem = createComponent({
   react: React,
   tagName: 'u-tree-item',
   elementClass: UTreeItem,
-  events: {}
+  events: {
+    onExpand: 'expand',
+    onCollapse: 'collapse',
+    onPick: 'pick',
+    onCheck: 'check',
+  },
 });

package/dist/{react-components → react}/index.d.ts

@@ -1,28 +1,41 @@
-/**
- * React wrapper components for @iyulab/components
- * 
- * This file is automatically generated.
- * Each component is prefixed with 'U' (e.g., UButton, UInput, etc.)
- */
-
-export { UAlert, UAlertProps } from './UAlert';
-export { UButton, UButtonProps } from './UButton';
-export { UCard, UCardProps } from './UCard';
-export { UCarousel, UCarouselProps } from './UCarousel';
-export { UDialog, UDialogProps } from './UDialog';
-export { UDivider, UDividerProps } from './UDivider';
-export { UDrawer, UDrawerProps } from './UDrawer';
-export { UForm, UFormProps } from './UForm';
-export { UIcon, UIconProps } from './UIcon';
-export { UInput, UInputProps } from './UInput';
-export { UMenu, UMenuProps } from './UMenu';
-export { UMenuItem, UMenuItemProps } from './UMenuItem';
-export { UProgressBar, UProgressBarProps } from './UProgressBar';
-export { UProgressRing, UProgressRingProps } from './UProgressRing';
-export { USkeleton, USkeletonProps } from './USkeleton';
-export { USpinner, USpinnerProps } from './USpinner';
-export { USplitPanel, USplitPanelProps } from './USplitPanel';
-export { UTag, UTagProps } from './UTag';
-export { UTooltip, UTooltipProps } from './UTooltip';
-export { UTree, UTreeProps } from './UTree';
 export { UTreeItem, UTreeItemProps } from './UTreeItem';
+export { UTree, UTreeProps } from './UTree';
+export { UTooltip, UTooltipProps } from './UTooltip';
+export { UTextarea, UTextareaProps } from './UTextarea';
+export { UTag, UTagProps } from './UTag';
+export { UTabPanel, UTabPanelProps } from './UTabPanel';
+export { UTab, UTabProps } from './UTab';
+export { USwitch, USwitchProps } from './USwitch';
+export { USplitPanel, USplitPanelProps } from './USplitPanel';
+export { USpinner, USpinnerProps } from './USpinner';
+export { USlider, USliderProps } from './USlider';
+export { USkeleton, USkeletonProps } from './USkeleton';
+export { USelect, USelectProps } from './USelect';
+export { URating, URatingProps } from './URating';
+export { URadio, URadioProps } from './URadio';
+export { UProgressRing, UProgressRingProps } from './UProgressRing';
+export { UProgressBar, UProgressBarProps } from './UProgressBar';
+export { UPopover, UPopoverProps } from './UPopover';
+export { UPanel, UPanelProps } from './UPanel';
+export { UOption, UOptionProps } from './UOption';
+export { UMenuItem, UMenuItemProps } from './UMenuItem';
+export { UMenu, UMenuProps } from './UMenu';
+export { UInput, UInputProps } from './UInput';
+export { UIconButton, UIconButtonProps } from './UIconButton';
+export { UIcon, UIconProps } from './UIcon';
+export { UForm, UFormProps } from './UForm';
+export { UField, UFieldProps } from './UField';
+export { UDrawer, UDrawerProps } from './UDrawer';
+export { UDivider, UDividerProps } from './UDivider';
+export { UDialog, UDialogProps } from './UDialog';
+export { UChip, UChipProps } from './UChip';
+export { UCheckbox, UCheckboxProps } from './UCheckbox';
+export { UCarousel, UCarouselProps } from './UCarousel';
+export { UCard, UCardProps } from './UCard';
+export { UButtonGroup, UButtonGroupProps } from './UButtonGroup';
+export { UButton, UButtonProps } from './UButton';
+export { UBreadcrumbItem, UBreadcrumbItemProps } from './UBreadcrumbItem';
+export { UBreadcrumb, UBreadcrumbProps } from './UBreadcrumb';
+export { UBadge, UBadgeProps } from './UBadge';
+export { UAvatar, UAvatarProps } from './UAvatar';
+export { UAlert, UAlertProps } from './UAlert';

package/dist/{react-components → react}/index.js

@@ -1,21 +1,41 @@
-export { UAlert } from './UAlert.js';
-export { UButton } from './UButton.js';
-export { UCard } from './UCard.js';
-export { UCarousel } from './UCarousel.js';
-export { UDialog } from './UDialog.js';
-export { UDivider } from './UDivider.js';
-export { UDrawer } from './UDrawer.js';
-export { UForm } from './UForm.js';
-export { UIcon } from './UIcon.js';
-export { UInput } from './UInput.js';
-export { UMenu } from './UMenu.js';
-export { UMenuItem } from './UMenuItem.js';
-export { UProgressBar } from './UProgressBar.js';
-export { UProgressRing } from './UProgressRing.js';
-export { USkeleton } from './USkeleton.js';
-export { USpinner } from './USpinner.js';
-export { USplitPanel } from './USplitPanel.js';
-export { UTag } from './UTag.js';
-export { UTooltip } from './UTooltip.js';
-export { UTree } from './UTree.js';
 export { UTreeItem } from './UTreeItem.js';
+export { UTree } from './UTree.js';
+export { UTooltip } from './UTooltip.js';
+export { UTextarea } from './UTextarea.js';
+export { UTag } from './UTag.js';
+export { UTabPanel } from './UTabPanel.js';
+export { UTab } from './UTab.js';
+export { USwitch } from './USwitch.js';
+export { USplitPanel } from './USplitPanel.js';
+export { USpinner } from './USpinner.js';
+export { USlider } from './USlider.js';
+export { USkeleton } from './USkeleton.js';
+export { USelect } from './USelect.js';
+export { URating } from './URating.js';
+export { URadio } from './URadio.js';
+export { UProgressRing } from './UProgressRing.js';
+export { UProgressBar } from './UProgressBar.js';
+export { UPopover } from './UPopover.js';
+export { UPanel } from './UPanel.js';
+export { UOption } from './UOption.js';
+export { UMenuItem } from './UMenuItem.js';
+export { UMenu } from './UMenu.js';
+export { UInput } from './UInput.js';
+export { UIconButton } from './UIconButton.js';
+export { UIcon } from './UIcon.js';
+export { UForm } from './UForm.js';
+export { UField } from './UField.js';
+export { UDrawer } from './UDrawer.js';
+export { UDivider } from './UDivider.js';
+export { UDialog } from './UDialog.js';
+export { UChip } from './UChip.js';
+export { UCheckbox } from './UCheckbox.js';
+export { UCarousel } from './UCarousel.js';
+export { UCard } from './UCard.js';
+export { UButtonGroup } from './UButtonGroup.js';
+export { UButton } from './UButton.js';
+export { UBreadcrumbItem } from './UBreadcrumbItem.js';
+export { UBreadcrumb } from './UBreadcrumb.js';
+export { UBadge } from './UBadge.js';
+export { UAvatar } from './UAvatar.js';
+export { UAlert } from './UAlert.js';

package/dist/{assets/styles → styles}/dark.css

@@ -67,7 +67,72 @@
   --u-red-900:       #FFD2D2;
   --u-red-1000:      #FFF0F0;
 
-  /* text Colors */
+  /* Orange Colors */
+  --u-orange-0:      #2E1A00;
+  --u-orange-100:    #4D2E00;
+  --u-orange-200:    #6B4200;
+  --u-orange-300:    #8A5A00;
+  --u-orange-400:    #B07500;
+  --u-orange-500:    #D49212;
+  --u-orange-600:    #F5AE42;
+  --u-orange-700:    #FFC566;
+  --u-orange-800:    #FFD899;
+  --u-orange-900:    #FFEBCC;
+  --u-orange-1000:   #FFF5E6;
+
+  /* Teal Colors */
+  --u-teal-0:        #002018;
+  --u-teal-100:      #00382B;
+  --u-teal-200:      #005040;
+  --u-teal-300:      #006B55;
+  --u-teal-400:      #00886C;
+  --u-teal-500:      #1AA88A;
+  --u-teal-600:      #42C4A5;
+  --u-teal-700:      #6EDABD;
+  --u-teal-800:      #9EEAD5;
+  --u-teal-900:      #CFF5EA;
+  --u-teal-1000:     #EDFCF7;
+
+  /* Cyan Colors */
+  --u-cyan-0:        #002830;
+  --u-cyan-100:      #00404D;
+  --u-cyan-200:      #005A6B;
+  --u-cyan-300:      #00768A;
+  --u-cyan-400:      #0094B0;
+  --u-cyan-500:      #12B4D4;
+  --u-cyan-600:      #42CFF5;
+  --u-cyan-700:      #66DFFF;
+  --u-cyan-800:      #99EBFF;
+  --u-cyan-900:      #CCF5FF;
+  --u-cyan-1000:     #E6FAFF;
+
+  /* Purple Colors */
+  --u-purple-0:      #1A0A2E;
+  --u-purple-100:    #2E174D;
+  --u-purple-200:    #42246B;
+  --u-purple-300:    #5A358F;
+  --u-purple-400:    #7548B2;
+  --u-purple-500:    #9260D6;
+  --u-purple-600:    #AE78F5;
+  --u-purple-700:    #C494FF;
+  --u-purple-800:    #D8B3FF;
+  --u-purple-900:    #ECD2FF;
+  --u-purple-1000:   #F7F0FF;
+
+  /* Pink Colors */
+  --u-pink-0:        #2E0A1A;
+  --u-pink-100:      #4D172E;
+  --u-pink-200:      #6B2442;
+  --u-pink-300:      #8F355A;
+  --u-pink-400:      #B24875;
+  --u-pink-500:      #D66092;
+  --u-pink-600:      #F578AE;
+  --u-pink-700:      #FF94C4;
+  --u-pink-800:      #FFB3D8;
+  --u-pink-900:      #FFD2EB;
+  --u-pink-1000:     #FFF0F7;
+
+  /* Text Colors */
   --u-txt-color:             var(--u-neutral-900);
   --u-txt-color-inverse:     var(--u-neutral-100);
   --u-txt-color-hover:       var(--u-blue-600);
@@ -86,7 +151,7 @@
   --u-icon-color-active:     var(--u-blue-600);
   --u-icon-color-disabled:   var(--u-neutral-500);
 
-  /* border Colors */
+  /* Border Colors */
   --u-border-color:          var(--u-neutral-400);
   --u-border-color-weak:     var(--u-neutral-300);
   --u-border-color-strong:   var(--u-neutral-500);
@@ -96,7 +161,7 @@
   --u-input-border-color-focus:   var(--u-blue-600);
   --u-input-border-color-invalid: var(--u-red-600);
 
-  /* background Colors */
+  /* Background Colors */
   --u-bg-color:              var(--u-neutral-100);
   --u-bg-color-inverse:      var(--u-neutral-0);
   --u-bg-color-hover:        var(--u-neutral-300);

package/dist/{assets/styles → styles}/light.css

@@ -67,7 +67,72 @@
   --u-red-900:       #B71C1C;
   --u-red-1000:      #6B0F0F;
 
-  /* text Colors */
+  /* Orange Colors */
+  --u-orange-0:      #FFF3E0;
+  --u-orange-100:    #FFE0B2;
+  --u-orange-200:    #FFCC80;
+  --u-orange-300:    #FFB74D;
+  --u-orange-400:    #FFA726;
+  --u-orange-500:    #FF9800;
+  --u-orange-600:    #FB8C00;
+  --u-orange-700:    #F57C00;
+  --u-orange-800:    #EF6C00;
+  --u-orange-900:    #E65100;
+  --u-orange-1000:   #8C3100;
+
+  /* Teal Colors */
+  --u-teal-0:        #E0F2F1;
+  --u-teal-100:      #B2DFDB;
+  --u-teal-200:      #80CBC4;
+  --u-teal-300:      #4DB6AC;
+  --u-teal-400:      #26A69A;
+  --u-teal-500:      #009688;
+  --u-teal-600:      #00897B;
+  --u-teal-700:      #00796B;
+  --u-teal-800:      #00695C;
+  --u-teal-900:      #004D40;
+  --u-teal-1000:     #002E26;
+
+  /* Cyan Colors */
+  --u-cyan-0:        #E0F7FA;
+  --u-cyan-100:      #B2EBF2;
+  --u-cyan-200:      #80DEEA;
+  --u-cyan-300:      #4DD0E1;
+  --u-cyan-400:      #26C6DA;
+  --u-cyan-500:      #00BCD4;
+  --u-cyan-600:      #00ACC1;
+  --u-cyan-700:      #0097A7;
+  --u-cyan-800:      #00838F;
+  --u-cyan-900:      #006064;
+  --u-cyan-1000:     #003A3D;
+
+  /* Purple Colors */
+  --u-purple-0:      #F3E5F5;
+  --u-purple-100:    #E1BEE7;
+  --u-purple-200:    #CE93D8;
+  --u-purple-300:    #BA68C8;
+  --u-purple-400:    #AB47BC;
+  --u-purple-500:    #9C27B0;
+  --u-purple-600:    #8E24AA;
+  --u-purple-700:    #7B1FA2;
+  --u-purple-800:    #6A1B9A;
+  --u-purple-900:    #4A148C;
+  --u-purple-1000:   #2C0B54;
+
+  /* Pink Colors */
+  --u-pink-0:        #FCE4EC;
+  --u-pink-100:      #F8BBD0;
+  --u-pink-200:      #F48FB1;
+  --u-pink-300:      #F06292;
+  --u-pink-400:      #EC407A;
+  --u-pink-500:      #E91E63;
+  --u-pink-600:      #D81B60;
+  --u-pink-700:      #C2185B;
+  --u-pink-800:      #AD1457;
+  --u-pink-900:      #880E4F;
+  --u-pink-1000:     #520830;
+
+  /* Text Colors */
   --u-txt-color:             var(--u-neutral-900);
   --u-txt-color-inverse:     var(--u-neutral-0);
   --u-txt-color-hover:       var(--u-blue-600);
@@ -86,7 +151,7 @@
   --u-icon-color-active:     var(--u-blue-600);
   --u-icon-color-disabled:   var(--u-neutral-400);
 
-  /* border Colors */
+  /* Border Colors */
   --u-border-color:          var(--u-neutral-300);
   --u-border-color-weak:     var(--u-neutral-200);
   --u-border-color-strong:   var(--u-neutral-400);
@@ -96,7 +161,7 @@
   --u-input-border-color-focus:   var(--u-blue-600);
   --u-input-border-color-invalid: var(--u-red-600);
 
-  /* background Colors */
+  /* Background Colors */
   --u-bg-color:              var(--u-neutral-0);
   --u-bg-color-inverse:      var(--u-neutral-900);
   --u-bg-color-hover:        var(--u-neutral-100);

package/dist/utilities/BrowserStorage.d.ts

@@ -11,6 +11,7 @@ export interface CookieOptions {
     sameSite?: CookieSameSite;
     partitioned?: boolean;
 }
+/** 브라우저 저장소 설정 옵션 */
 export type BrowserStorageOptions = (LocalStorageOptions | CookieOptions) & {
     /** 키 앞에 붙일 접두사 (옵션) */
     prefix?: string;
@@ -22,7 +23,7 @@ export declare class BrowserStorage {
     private readonly options;
     constructor(options: BrowserStorageOptions);
     /** 키에 prefix를 붙인 실제 저장 키 */
-    private buildKey;
+    private makeKey;
     /**
      * 값 저장
      * @param key 키