@iyulab/components 0.4.0 → 1.0.0
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/CHANGELOG.md +44 -0
- package/README.md +42 -236
- package/dist/_virtual/_@oxc-project_runtime@0.122.0/helpers/decorate.js +9 -0
- package/dist/_virtual/_@oxc-project_runtime@0.122.0/helpers/decorateMetadata.js +6 -0
- package/dist/_virtual/_glob-assets_raw/bell-fill.svg.d37c41d9.js +4 -0
- package/dist/_virtual/_glob-assets_raw/check-circle-fill.svg.51c33a2a.js +4 -0
- package/dist/_virtual/_glob-assets_raw/check-lg.svg.371c5e78.js +4 -0
- package/dist/_virtual/_glob-assets_raw/chevron-down.svg.0ccd06ea.js +4 -0
- package/dist/_virtual/_glob-assets_raw/chevron-left.svg.b4601050.js +4 -0
- package/dist/_virtual/_glob-assets_raw/chevron-right.svg.0711bb67.js +4 -0
- package/dist/_virtual/_glob-assets_raw/chevron-up.svg.ed917211.js +4 -0
- package/dist/_virtual/_glob-assets_raw/dark.css.e8ac080d.js +4 -0
- package/dist/_virtual/_glob-assets_raw/dash-lg.svg.b40b8b3a.js +4 -0
- package/dist/_virtual/_glob-assets_raw/exclamation-circle-fill.svg.dc8c523e.js +4 -0
- package/dist/_virtual/_glob-assets_raw/exclamation-triangle-fill.svg.7949d2c7.js +4 -0
- package/dist/_virtual/_glob-assets_raw/eye-slash.svg.240afafa.js +4 -0
- package/dist/_virtual/_glob-assets_raw/eye.svg.2e5e9c4c.js +4 -0
- package/dist/_virtual/_glob-assets_raw/info-circle-fill.svg.6580071d.js +4 -0
- package/dist/_virtual/_glob-assets_raw/light.css.637cb2f8.js +4 -0
- package/dist/_virtual/_glob-assets_raw/plus-lg.svg.294e9073.js +4 -0
- package/dist/_virtual/_glob-assets_raw/search.svg.0ba2012d.js +4 -0
- package/dist/_virtual/_glob-assets_raw/star-fill.svg.f24b5a2d.js +4 -0
- package/dist/_virtual/_glob-assets_raw/star.svg.4af61468.js +4 -0
- package/dist/_virtual/_glob-assets_raw/three-dots-vertical.svg.9fee78c5.js +4 -0
- package/dist/_virtual/_glob-assets_raw/three-dots.svg.6a7a5b23.js +4 -0
- package/dist/_virtual/_glob-assets_raw/x-lg.svg.f34b882c.js +4 -0
- package/dist/components/{UJsonElement.d.ts → UDataElement.d.ts} +3 -5
- package/dist/components/UDataElement.js +101 -0
- package/dist/components/{UJsonElement.styles.js → UDataElement.styles.js} +4 -4
- package/dist/components/UElement.d.ts +18 -23
- package/dist/components/UElement.js +82 -95
- package/dist/components/UElement.styles.js +43 -4
- package/dist/components/UFloatingElement.d.ts +69 -48
- package/dist/components/UFloatingElement.js +236 -193
- package/dist/components/UFloatingElement.styles.d.ts +8 -0
- package/dist/components/UFloatingElement.styles.js +28 -5
- package/dist/components/UFormControlElement.d.ts +57 -0
- package/dist/components/UFormControlElement.js +68 -0
- package/dist/components/UFormControlElement.styles.js +14 -0
- package/dist/components/UOverlayElement.d.ts +66 -0
- package/dist/components/UOverlayElement.js +123 -0
- package/dist/components/UOverlayElement.styles.d.ts +1 -0
- package/dist/components/UOverlayElement.styles.js +35 -0
- package/dist/components/alert/UAlert.d.ts +58 -3
- package/dist/components/alert/UAlert.js +115 -4
- package/dist/components/alert/UAlert.styles.js +73 -48
- package/dist/components/avatar/UAvatar.d.ts +27 -0
- package/dist/components/avatar/UAvatar.js +42 -0
- package/dist/components/avatar/UAvatar.styles.d.ts +1 -0
- package/dist/components/avatar/UAvatar.styles.js +45 -0
- package/dist/components/badge/UBadge.d.ts +28 -0
- package/dist/components/badge/UBadge.js +40 -0
- package/dist/components/badge/UBadge.styles.d.ts +1 -0
- package/dist/components/badge/UBadge.styles.js +113 -0
- package/dist/components/breadcrumb/UBreadcrumb.d.ts +24 -0
- package/dist/components/breadcrumb/UBreadcrumb.js +65 -0
- package/dist/components/breadcrumb/UBreadcrumb.styles.d.ts +1 -0
- package/dist/components/breadcrumb/UBreadcrumb.styles.js +37 -0
- package/dist/components/breadcrumb-item/UBreadcrumbItem.d.ts +30 -0
- package/dist/components/breadcrumb-item/UBreadcrumbItem.js +52 -0
- package/dist/components/breadcrumb-item/UBreadcrumbItem.styles.d.ts +1 -0
- package/dist/components/breadcrumb-item/UBreadcrumbItem.styles.js +41 -0
- package/dist/components/button/UButton.d.ts +46 -3
- package/dist/components/button/UButton.js +104 -4
- package/dist/components/button/UButton.styles.js +121 -48
- package/dist/components/button-group/UButtonGroup.d.ts +28 -0
- package/dist/components/button-group/UButtonGroup.js +93 -0
- package/dist/components/button-group/UButtonGroup.styles.d.ts +1 -0
- package/dist/components/button-group/UButtonGroup.styles.js +34 -0
- package/dist/components/card/UCard.d.ts +30 -3
- package/dist/components/card/UCard.js +61 -4
- package/dist/components/card/UCard.styles.js +13 -12
- package/dist/components/carousel/UCarousel.d.ts +65 -3
- package/dist/components/carousel/UCarousel.js +219 -2
- package/dist/components/carousel/UCarousel.styles.js +17 -17
- package/dist/components/checkbox/UCheckbox.d.ts +39 -0
- package/dist/components/checkbox/UCheckbox.js +88 -0
- package/dist/components/checkbox/UCheckbox.styles.d.ts +1 -0
- package/dist/components/checkbox/UCheckbox.styles.js +211 -0
- package/dist/components/chip/UChip.d.ts +43 -0
- package/dist/components/chip/UChip.js +103 -0
- package/dist/components/chip/UChip.styles.d.ts +1 -0
- package/dist/components/chip/UChip.styles.js +31 -0
- package/dist/components/dialog/UDialog.d.ts +29 -2
- package/dist/components/dialog/UDialog.js +66 -4
- package/dist/components/dialog/UDialog.styles.js +90 -39
- package/dist/components/divider/UDivider.d.ts +27 -2
- package/dist/components/divider/UDivider.js +45 -4
- package/dist/components/divider/UDivider.styles.js +80 -10
- package/dist/components/drawer/UDrawer.d.ts +25 -3
- package/dist/components/drawer/UDrawer.js +54 -4
- package/dist/components/drawer/UDrawer.styles.js +67 -60
- package/dist/components/field/UField.d.ts +31 -0
- package/dist/components/field/UField.js +64 -0
- package/dist/components/field/UField.styles.d.ts +1 -0
- package/dist/components/field/UField.styles.js +47 -0
- package/dist/components/form/UForm.d.ts +38 -2
- package/dist/components/form/UForm.js +105 -4
- package/dist/components/form/UForm.styles.js +5 -5
- package/dist/components/icon/UIcon.d.ts +23 -4
- package/dist/components/icon/UIcon.js +55 -4
- package/dist/components/icon/UIcon.styles.js +5 -5
- package/dist/components/icon-button/UIconButton.d.ts +48 -0
- package/dist/components/icon-button/UIconButton.js +88 -0
- package/dist/components/icon-button/UIconButton.styles.d.ts +1 -0
- package/dist/components/icon-button/UIconButton.styles.js +24 -0
- package/dist/components/input/UInput.d.ts +95 -3
- package/dist/components/input/UInput.js +258 -2
- package/dist/components/input/UInput.styles.js +120 -86
- package/dist/components/menu/UMenu.d.ts +41 -3
- package/dist/components/menu/UMenu.js +178 -4
- package/dist/components/menu/UMenu.styles.js +16 -30
- package/dist/components/menu-item/UMenuItem.d.ts +48 -2
- package/dist/components/menu-item/UMenuItem.js +159 -2
- package/dist/components/menu-item/UMenuItem.styles.js +120 -34
- package/dist/components/option/UOption.d.ts +42 -0
- package/dist/components/option/UOption.js +64 -0
- package/dist/components/option/UOption.styles.d.ts +1 -0
- package/dist/components/option/UOption.styles.js +132 -0
- package/dist/components/panel/UPanel.d.ts +22 -0
- package/dist/components/panel/UPanel.js +36 -0
- package/dist/components/panel/UPanel.styles.d.ts +1 -0
- package/dist/components/panel/UPanel.styles.js +14 -0
- package/dist/components/popover/UPopover.d.ts +69 -0
- package/dist/components/popover/UPopover.js +235 -0
- package/dist/components/popover/UPopover.styles.d.ts +1 -0
- package/dist/components/popover/UPopover.styles.js +9 -0
- package/dist/components/progress-bar/UProgressBar.d.ts +46 -2
- package/dist/components/progress-bar/UProgressBar.js +94 -2
- package/dist/components/progress-bar/UProgressBar.styles.js +110 -36
- package/dist/components/progress-ring/UProgressRing.d.ts +46 -3
- package/dist/components/progress-ring/UProgressRing.js +152 -2
- package/dist/components/progress-ring/UProgressRing.styles.js +88 -25
- package/dist/components/radio/URadio.d.ts +41 -0
- package/dist/components/radio/URadio.js +151 -0
- package/dist/components/radio/URadio.styles.d.ts +1 -0
- package/dist/components/radio/URadio.styles.js +111 -0
- package/dist/components/rating/URating.d.ts +48 -0
- package/dist/components/rating/URating.js +196 -0
- package/dist/components/rating/URating.styles.d.ts +1 -0
- package/dist/components/rating/URating.styles.js +55 -0
- package/dist/components/select/USelect.d.ts +70 -0
- package/dist/components/select/USelect.js +315 -0
- package/dist/components/select/USelect.styles.d.ts +1 -0
- package/dist/components/select/USelect.styles.js +200 -0
- package/dist/components/skeleton/USkeleton.d.ts +27 -3
- package/dist/components/skeleton/USkeleton.js +37 -4
- package/dist/components/skeleton/USkeleton.styles.js +15 -18
- package/dist/components/slider/USlider.d.ts +88 -0
- package/dist/components/slider/USlider.js +286 -0
- package/dist/components/slider/USlider.styles.d.ts +1 -0
- package/dist/components/slider/USlider.styles.js +125 -0
- package/dist/components/spinner/USpinner.d.ts +23 -2
- package/dist/components/spinner/USpinner.js +37 -3
- package/dist/components/spinner/USpinner.styles.js +34 -13
- package/dist/components/split-panel/USplitPanel.d.ts +49 -2
- package/dist/components/split-panel/USplitPanel.js +239 -3
- package/dist/components/split-panel/USplitPanel.styles.js +47 -15
- package/dist/components/switch/USwitch.d.ts +43 -0
- package/dist/components/switch/USwitch.js +80 -0
- package/dist/components/switch/USwitch.styles.d.ts +1 -0
- package/dist/components/switch/USwitch.styles.js +191 -0
- package/dist/components/tab/UTab.d.ts +31 -0
- package/dist/components/tab/UTab.js +68 -0
- package/dist/components/tab/UTab.styles.d.ts +1 -0
- package/dist/components/tab/UTab.styles.js +46 -0
- package/dist/components/tab-panel/UTabPanel.d.ts +45 -0
- package/dist/components/tab-panel/UTabPanel.js +150 -0
- package/dist/components/tab-panel/UTabPanel.styles.d.ts +1 -0
- package/dist/components/tab-panel/UTabPanel.styles.js +201 -0
- package/dist/components/tag/UTag.d.ts +26 -3
- package/dist/components/tag/UTag.js +41 -4
- package/dist/components/tag/UTag.styles.js +206 -60
- package/dist/components/textarea/UTextarea.d.ts +65 -0
- package/dist/components/textarea/UTextarea.js +145 -0
- package/dist/components/textarea/UTextarea.styles.d.ts +1 -0
- package/dist/components/textarea/UTextarea.styles.js +157 -0
- package/dist/components/tooltip/UTooltip.d.ts +28 -2
- package/dist/components/tooltip/UTooltip.js +104 -4
- package/dist/components/tooltip/UTooltip.styles.js +10 -12
- package/dist/components/tree/UTree.d.ts +62 -2
- package/dist/components/tree/UTree.js +308 -3
- package/dist/components/tree/UTree.styles.js +13 -19
- package/dist/components/tree-item/UTreeItem.d.ts +61 -2
- package/dist/components/tree-item/UTreeItem.js +191 -2
- package/dist/components/tree-item/UTreeItem.styles.js +96 -37
- package/dist/events/CheckEvent.d.ts +7 -0
- package/dist/events/CollapseEvent.d.ts +7 -0
- package/dist/events/ExpandEvent.d.ts +7 -0
- package/dist/events/HideEvent.d.ts +7 -0
- package/dist/events/NavigateEvent.d.ts +7 -0
- package/dist/events/PickEvent.d.ts +18 -0
- package/dist/events/RemoveEvent.d.ts +7 -0
- package/dist/events/ShiftEvent.d.ts +16 -0
- package/dist/events/ShowEvent.d.ts +7 -0
- package/dist/index.d.ts +37 -10
- package/dist/index.js +56 -52
- package/dist/react/UAlert.d.ts +13 -0
- package/dist/{react-components → react}/UAlert.js +5 -2
- package/dist/react/UAvatar.d.ts +9 -0
- package/dist/react/UAvatar.js +10 -0
- package/dist/react/UBadge.d.ts +9 -0
- package/dist/react/UBadge.js +10 -0
- package/dist/react/UBreadcrumb.d.ts +9 -0
- package/dist/react/UBreadcrumb.js +10 -0
- package/dist/react/UBreadcrumbItem.d.ts +11 -0
- package/dist/react/UBreadcrumbItem.js +12 -0
- package/dist/{react-components → react}/UButton.d.ts +3 -2
- package/dist/{react-components → react}/UButton.js +2 -2
- package/dist/react/UButtonGroup.d.ts +9 -0
- package/dist/react/UButtonGroup.js +10 -0
- package/dist/{react-components → react}/UCard.d.ts +3 -2
- package/dist/{react-components → react}/UCard.js +2 -2
- package/dist/{react-components → react}/UCarousel.d.ts +3 -2
- package/dist/{react-components → react}/UCarousel.js +2 -2
- package/dist/react/UCheckbox.d.ts +9 -0
- package/dist/react/UCheckbox.js +10 -0
- package/dist/react/UChip.d.ts +13 -0
- package/dist/react/UChip.js +13 -0
- package/dist/{react-components → react}/UDialog.d.ts +3 -2
- package/dist/{react-components → react}/UDialog.js +2 -2
- package/dist/{react-components → react}/UDivider.d.ts +3 -2
- package/dist/{react-components → react}/UDivider.js +2 -2
- package/dist/{react-components → react}/UDrawer.d.ts +3 -2
- package/dist/{react-components → react}/UDrawer.js +2 -2
- package/dist/react/UField.d.ts +9 -0
- package/dist/react/UField.js +10 -0
- package/dist/react/UForm.d.ts +10 -0
- package/dist/{react-components → react}/UForm.js +4 -2
- package/dist/{react-components → react}/UIcon.d.ts +3 -2
- package/dist/{react-components → react}/UIcon.js +2 -2
- package/dist/react/UIconButton.d.ts +9 -0
- package/dist/react/UIconButton.js +10 -0
- package/dist/react/UInput.d.ts +11 -0
- package/dist/{react-components → react}/UInput.js +5 -2
- package/dist/react/UMenu.d.ts +10 -0
- package/dist/{react-components → react}/UMenu.js +4 -2
- package/dist/react/UMenuItem.d.ts +11 -0
- package/dist/{react-components → react}/UMenuItem.js +4 -2
- package/dist/react/UOption.d.ts +9 -0
- package/dist/react/UOption.js +10 -0
- package/dist/react/UPanel.d.ts +9 -0
- package/dist/react/UPanel.js +10 -0
- package/dist/react/UPopover.d.ts +11 -0
- package/dist/react/UPopover.js +13 -0
- package/dist/react/UProgressBar.d.ts +9 -0
- package/dist/{react-components → react}/UProgressBar.js +2 -2
- package/dist/react/UProgressRing.d.ts +9 -0
- package/dist/{react-components → react}/UProgressRing.js +2 -2
- package/dist/react/URadio.d.ts +10 -0
- package/dist/react/URadio.js +12 -0
- package/dist/react/URating.d.ts +10 -0
- package/dist/react/URating.js +12 -0
- package/dist/react/USelect.d.ts +10 -0
- package/dist/react/USelect.js +12 -0
- package/dist/{react-components → react}/USkeleton.d.ts +3 -2
- package/dist/{react-components → react}/USkeleton.js +2 -2
- package/dist/react/USlider.d.ts +10 -0
- package/dist/react/USlider.js +12 -0
- package/dist/{react-components → react}/USpinner.d.ts +3 -2
- package/dist/{react-components → react}/USpinner.js +2 -2
- package/dist/react/USplitPanel.d.ts +13 -0
- package/dist/{react-components → react}/USplitPanel.js +6 -2
- package/dist/react/USwitch.d.ts +10 -0
- package/dist/react/USwitch.js +12 -0
- package/dist/react/UTab.d.ts +11 -0
- package/dist/react/UTab.js +12 -0
- package/dist/react/UTabPanel.d.ts +9 -0
- package/dist/react/UTabPanel.js +10 -0
- package/dist/{react-components → react}/UTag.d.ts +3 -2
- package/dist/{react-components → react}/UTag.js +2 -2
- package/dist/react/UTextarea.d.ts +11 -0
- package/dist/react/UTextarea.js +13 -0
- package/dist/react/UTooltip.d.ts +11 -0
- package/dist/{react-components → react}/UTooltip.js +5 -2
- package/dist/react/UTree.d.ts +10 -0
- package/dist/{react-components → react}/UTree.js +4 -2
- package/dist/react/UTreeItem.d.ts +17 -0
- package/dist/{react-components → react}/UTreeItem.js +7 -2
- package/dist/{react-components → react}/index.d.ts +40 -27
- package/dist/{react-components → react}/index.js +40 -20
- package/dist/{assets/styles → styles}/dark.css +68 -3
- package/dist/{assets/styles → styles}/light.css +68 -3
- package/dist/utilities/BrowserStorage.d.ts +2 -1
- package/dist/utilities/BrowserStorage.js +69 -86
- package/dist/utilities/Dialog.d.ts +83 -0
- package/dist/utilities/Dialog.js +141 -0
- package/dist/utilities/OverlayManager.d.ts +37 -0
- package/dist/utilities/OverlayManager.js +68 -0
- package/dist/utilities/Theme.js +134 -141
- package/dist/utilities/Toast.d.ts +45 -0
- package/dist/utilities/Toast.js +114 -0
- package/dist/utilities/converters.d.ts +44 -1
- package/dist/utilities/converters.js +112 -14
- package/dist/utilities/elements.js +62 -33
- package/dist/utilities/icons.d.ts +67 -0
- package/dist/utilities/icons.js +200 -0
- package/dist/utilities/sanitizers.js +64 -32
- package/package.json +24 -20
- package/plugins/vite-plugin-glob-resolve.d.ts +12 -0
- package/plugins/vite-plugin-glob-resolve.js +66 -0
- package/plugins/vite-plugin-react-wrapper.d.ts +12 -0
- package/plugins/vite-plugin-react-wrapper.js +206 -0
- package/skills/iyulab-components/SKILL.md +138 -0
- package/skills/iyulab-components/references/components/alert.md +74 -0
- package/skills/iyulab-components/references/components/avatar.md +41 -0
- package/skills/iyulab-components/references/components/badge.md +38 -0
- package/skills/iyulab-components/references/components/breadcrumb.md +75 -0
- package/skills/iyulab-components/references/components/button-group.md +38 -0
- package/skills/iyulab-components/references/components/button.md +56 -0
- package/skills/iyulab-components/references/components/card.md +53 -0
- package/skills/iyulab-components/references/components/carousel.md +63 -0
- package/skills/iyulab-components/references/components/checkbox.md +70 -0
- package/skills/iyulab-components/references/components/chip.md +64 -0
- package/skills/iyulab-components/references/components/dialog.md +71 -0
- package/skills/iyulab-components/references/components/divider.md +56 -0
- package/skills/iyulab-components/references/components/drawer.md +63 -0
- package/skills/iyulab-components/references/components/field.md +42 -0
- package/skills/iyulab-components/references/components/form.md +68 -0
- package/skills/iyulab-components/references/components/icon-button.md +56 -0
- package/skills/iyulab-components/references/components/icon.md +49 -0
- package/skills/iyulab-components/references/components/input.md +95 -0
- package/skills/iyulab-components/references/components/menu.md +106 -0
- package/skills/iyulab-components/references/components/option.md +70 -0
- package/skills/iyulab-components/references/components/panel.md +38 -0
- package/skills/iyulab-components/references/components/popover.md +62 -0
- package/skills/iyulab-components/references/components/progress-bar.md +61 -0
- package/skills/iyulab-components/references/components/progress-ring.md +58 -0
- package/skills/iyulab-components/references/components/radio.md +67 -0
- package/skills/iyulab-components/references/components/rating.md +74 -0
- package/skills/iyulab-components/references/components/select.md +86 -0
- package/skills/iyulab-components/references/components/skeleton.md +46 -0
- package/skills/iyulab-components/references/components/slider.md +89 -0
- package/skills/iyulab-components/references/components/spinner.md +47 -0
- package/skills/iyulab-components/references/components/split-panel.md +65 -0
- package/skills/iyulab-components/references/components/switch.md +81 -0
- package/skills/iyulab-components/references/components/tab-panel.md +93 -0
- package/skills/iyulab-components/references/components/tag.md +55 -0
- package/skills/iyulab-components/references/components/textarea.md +67 -0
- package/skills/iyulab-components/references/components/tooltip.md +58 -0
- package/skills/iyulab-components/references/components/tree.md +128 -0
- package/skills/iyulab-components/references/extensions/data.md +60 -0
- package/skills/iyulab-components/references/extensions/element.md +57 -0
- package/skills/iyulab-components/references/extensions/floating.md +60 -0
- package/skills/iyulab-components/references/extensions/form-control.md +79 -0
- package/skills/iyulab-components/references/extensions/overlay.md +76 -0
- package/skills/iyulab-components/references/usage.md +216 -0
- package/skills/iyulab-components/references/utilities/browser-storage.md +54 -0
- package/skills/iyulab-components/references/utilities/converters.md +42 -0
- package/skills/iyulab-components/references/utilities/dialog.md +75 -0
- package/skills/iyulab-components/references/utilities/elements.md +55 -0
- package/skills/iyulab-components/references/utilities/icons.md +53 -0
- package/skills/iyulab-components/references/utilities/overlay-manager.md +34 -0
- package/skills/iyulab-components/references/utilities/sanitizers.md +32 -0
- package/skills/iyulab-components/references/utilities/theme.md +45 -0
- package/skills/iyulab-components/references/utilities/toast.md +58 -0
- package/dist/assets/icons/arrow-down-up.svg.js +0 -3
- package/dist/assets/icons/arrow-down.svg.js +0 -3
- package/dist/assets/icons/arrow-repeat.svg.js +0 -3
- package/dist/assets/icons/arrow-up.svg.js +0 -3
- package/dist/assets/icons/ban.svg.js +0 -3
- package/dist/assets/icons/bell-fill.svg.js +0 -3
- package/dist/assets/icons/box-arrow-up-right.svg.js +0 -3
- package/dist/assets/icons/check-circle-fill.svg.js +0 -3
- package/dist/assets/icons/check-lg.svg.js +0 -3
- package/dist/assets/icons/chevron-down.svg.js +0 -3
- package/dist/assets/icons/chevron-left.svg.js +0 -3
- package/dist/assets/icons/chevron-right.svg.js +0 -3
- package/dist/assets/icons/chevron-up.svg.js +0 -3
- package/dist/assets/icons/code-slash.svg.js +0 -3
- package/dist/assets/icons/copy.svg.js +0 -3
- package/dist/assets/icons/dash-lg.svg.js +0 -3
- package/dist/assets/icons/download.svg.js +0 -3
- package/dist/assets/icons/exclamation-circle-fill.svg.js +0 -3
- package/dist/assets/icons/exclamation-triangle-fill.svg.js +0 -3
- package/dist/assets/icons/eye-slash.svg.js +0 -3
- package/dist/assets/icons/eye.svg.js +0 -3
- package/dist/assets/icons/file-earmark.svg.js +0 -3
- package/dist/assets/icons/flag.svg.js +0 -3
- package/dist/assets/icons/globe.svg.js +0 -3
- package/dist/assets/icons/hand-thumbs-down-fill.svg.js +0 -3
- package/dist/assets/icons/hand-thumbs-down.svg.js +0 -3
- package/dist/assets/icons/hand-thumbs-up-fill.svg.js +0 -3
- package/dist/assets/icons/hand-thumbs-up.svg.js +0 -3
- package/dist/assets/icons/info-circle-fill.svg.js +0 -3
- package/dist/assets/icons/lightbulb-fill.svg.js +0 -3
- package/dist/assets/icons/lightbulb-off.svg.js +0 -3
- package/dist/assets/icons/lightbulb.svg.js +0 -3
- package/dist/assets/icons/mic-fill.svg.js +0 -3
- package/dist/assets/icons/mic-mute-fill.svg.js +0 -3
- package/dist/assets/icons/paperclip.svg.js +0 -3
- package/dist/assets/icons/pencil-square.svg.js +0 -3
- package/dist/assets/icons/plus-lg.svg.js +0 -3
- package/dist/assets/icons/search.svg.js +0 -3
- package/dist/assets/icons/share.svg.js +0 -3
- package/dist/assets/icons/sort-alpha-down.svg.js +0 -3
- package/dist/assets/icons/sort-alpha-up.svg.js +0 -3
- package/dist/assets/icons/stop-circle.svg.js +0 -3
- package/dist/assets/icons/tools.svg.js +0 -3
- package/dist/assets/icons/x-lg.svg.js +0 -3
- package/dist/assets/styles/dark.css.js +0 -3
- package/dist/assets/styles/light.css.js +0 -3
- package/dist/components/UJsonElement.js +0 -93
- package/dist/components/UModalElement.d.ts +0 -70
- package/dist/components/UModalElement.js +0 -144
- package/dist/components/UModalElement.styles.js +0 -29
- package/dist/components/alert/UAlert.component.d.ts +0 -40
- package/dist/components/alert/UAlert.component.js +0 -146
- package/dist/components/button/UButton.component.d.ts +0 -23
- package/dist/components/button/UButton.component.js +0 -72
- package/dist/components/card/UCard.component.d.ts +0 -21
- package/dist/components/card/UCard.component.js +0 -66
- package/dist/components/carousel/UCarousel.component.d.ts +0 -78
- package/dist/components/carousel/UCarousel.component.js +0 -264
- package/dist/components/dialog/UDialog.component.d.ts +0 -17
- package/dist/components/dialog/UDialog.component.js +0 -70
- package/dist/components/divider/UDivider.component.d.ts +0 -10
- package/dist/components/divider/UDivider.component.js +0 -30
- package/dist/components/drawer/UDrawer.component.d.ts +0 -18
- package/dist/components/drawer/UDrawer.component.js +0 -64
- package/dist/components/form/UForm.component.d.ts +0 -24
- package/dist/components/form/UForm.component.js +0 -76
- package/dist/components/icon/UIcon.component.d.ts +0 -29
- package/dist/components/icon/UIcon.component.js +0 -57
- package/dist/components/input/UInput.component.d.ts +0 -92
- package/dist/components/input/UInput.component.js +0 -267
- package/dist/components/menu/UMenu.component.d.ts +0 -67
- package/dist/components/menu/UMenu.component.js +0 -338
- package/dist/components/menu-item/UMenuItem.component.d.ts +0 -25
- package/dist/components/menu-item/UMenuItem.component.js +0 -111
- package/dist/components/progress-bar/UProgressBar.component.d.ts +0 -27
- package/dist/components/progress-bar/UProgressBar.component.js +0 -99
- package/dist/components/progress-ring/UProgressRing.component.d.ts +0 -33
- package/dist/components/progress-ring/UProgressRing.component.js +0 -114
- package/dist/components/skeleton/USkeleton.component.d.ts +0 -22
- package/dist/components/skeleton/USkeleton.component.js +0 -58
- package/dist/components/spinner/USpinner.component.d.ts +0 -9
- package/dist/components/spinner/USpinner.component.js +0 -22
- package/dist/components/split-panel/USplitPanel.component.d.ts +0 -44
- package/dist/components/split-panel/USplitPanel.component.js +0 -185
- package/dist/components/tag/UTag.component.d.ts +0 -23
- package/dist/components/tag/UTag.component.js +0 -72
- package/dist/components/tooltip/UTooltip.component.d.ts +0 -27
- package/dist/components/tooltip/UTooltip.component.js +0 -88
- package/dist/components/tree/UTree.component.d.ts +0 -37
- package/dist/components/tree/UTree.component.js +0 -120
- package/dist/components/tree-item/UTreeItem.component.d.ts +0 -41
- package/dist/components/tree-item/UTreeItem.component.js +0 -161
- package/dist/events/UChangeEvent.d.ts +0 -6
- package/dist/events/UHideEvent.d.ts +0 -6
- package/dist/events/UInputEvent.d.ts +0 -6
- package/dist/events/UResizeEvent.d.ts +0 -6
- package/dist/events/USelectEvent.d.ts +0 -6
- package/dist/events/UShowEvent.d.ts +0 -6
- package/dist/react-components/UAlert.d.ts +0 -8
- package/dist/react-components/UForm.d.ts +0 -8
- package/dist/react-components/UInput.d.ts +0 -8
- package/dist/react-components/UMenu.d.ts +0 -8
- package/dist/react-components/UMenuItem.d.ts +0 -8
- package/dist/react-components/UProgressBar.d.ts +0 -8
- package/dist/react-components/UProgressRing.d.ts +0 -8
- package/dist/react-components/USplitPanel.d.ts +0 -8
- package/dist/react-components/UTooltip.d.ts +0 -8
- package/dist/react-components/UTree.d.ts +0 -8
- package/dist/react-components/UTreeItem.d.ts +0 -8
- package/dist/utilities/IconRegistry.d.ts +0 -40
- package/dist/utilities/IconRegistry.js +0 -134
- package/dist/utilities/Notifier.d.ts +0 -31
- package/dist/utilities/Notifier.js +0 -79
- package/dist/utilities/decorators.d.ts +0 -28
- /package/dist/components/{UJsonElement.styles.d.ts → UDataElement.styles.d.ts} +0 -0
- /package/dist/components/{UModalElement.styles.d.ts → UFormControlElement.styles.d.ts} +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,49 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 1.0.0 (2026-04-01)
|
|
4
|
+
|
|
5
|
+
### Breaking Changes
|
|
6
|
+
|
|
7
|
+
- **Event type renames**: Removed `U`-prefixed event types (`UChangeEvent`, `UInputEvent`, `UShowEvent`, `UHideEvent`, `USelectEvent`, `UResizeEvent`) in favour of action-based names
|
|
8
|
+
- `ShowEvent` / `HideEvent` / `PickEvent` / `CheckEvent` / `ExpandEvent` / `CollapseEvent` / `NavigateEvent` / `RemoveEvent` / `ShiftEvent`
|
|
9
|
+
- **Utility API overhaul**: `Notifier` replaced by `Toast`; `IconRegistry` rewritten as `icons.ts` — existing API is not compatible, migration required
|
|
10
|
+
- **`UModalElement` removed**: Merged into `UOverlayElement`. Components that extended `UModalElement` must now extend `UOverlayElement`
|
|
11
|
+
|
|
12
|
+
### New Components
|
|
13
|
+
|
|
14
|
+
- `u-avatar` — user avatar with image or initials fallback
|
|
15
|
+
- `u-badge` — numeric or status badge
|
|
16
|
+
- `u-breadcrumb` / `u-breadcrumb-item` — navigation breadcrumb trail
|
|
17
|
+
- `u-chip` — selectable chip with `pick` and `remove` events
|
|
18
|
+
- `u-field` — form field layout wrapper (label, description, validation message)
|
|
19
|
+
- `u-icon-button` — icon-only button
|
|
20
|
+
- `u-option` — option item for `u-select` and combobox inputs
|
|
21
|
+
- `u-panel` — general-purpose container panel
|
|
22
|
+
- `u-radio` — single-choice radio button
|
|
23
|
+
- `u-rating` — star/score input
|
|
24
|
+
- `u-select` — dropdown select control
|
|
25
|
+
- `u-slider` — range slider
|
|
26
|
+
- `u-switch` — toggle switch
|
|
27
|
+
- `u-tab` / `u-tab-panel` — tab navigation
|
|
28
|
+
|
|
29
|
+
### Improvements
|
|
30
|
+
|
|
31
|
+
- **Component file split**: Heavy components extract render logic into a separate `U<Name>.component.ts`, keeping the class declaration lean
|
|
32
|
+
- **`Toast` utility**: Replaces `Notifier.toast()` with a semantic API — `Toast.show()`, `Toast.success()`, `Toast.error()`, etc.
|
|
33
|
+
- **`Dialog` utility**: Imperative dialog API added — `Dialog.confirm()`, `Dialog.prompt()`, etc.
|
|
34
|
+
- **`OverlayManager`**: Built-in overlay stack management and ESC key handling
|
|
35
|
+
- **`icons.ts`**: Full rewrite of `IconRegistry` with bundled SVG support via Vite `import.meta.glob` and built-in CDN resolvers for Tabler, Heroicons, Lucide, and Bootstrap Icons
|
|
36
|
+
- **`converters.ts`**: Extended type conversion utilities
|
|
37
|
+
- **Vite plugins**: Added `vite-plugin-glob-resolve` and `vite-plugin-react-wrapper` for automatic React wrapper generation
|
|
38
|
+
|
|
39
|
+
### Documentation
|
|
40
|
+
|
|
41
|
+
- `skills/iyulab-components/` — full agent skill added with 39 component references, 9 utility references, and 5 extension references
|
|
42
|
+
- `docs/` — developer documentation added (architecture, guidelines, events, theming, form-controls, icons)
|
|
43
|
+
- `README.md` overhauled with Agent Skills installation guide
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
3
47
|
## 0.4.0 (2026-03-02)
|
|
4
48
|
|
|
5
49
|
### Breaking Changes
|
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
# @iyulab/components
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Lit 기반 웹 컴포넌트 라이브러리.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[데모 사이트](https://components.iyulab.com)에서 모든 컴포넌트를 직접 확인할 수 있습니다.
|
|
6
6
|
|
|
7
7
|
## Installation
|
|
8
8
|
|
|
@@ -12,271 +12,77 @@ npm install @iyulab/components
|
|
|
12
12
|
|
|
13
13
|
## Usage
|
|
14
14
|
|
|
15
|
-
```
|
|
16
|
-
import
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
## Components
|
|
20
|
-
|
|
21
|
-
| Component | Tag | Description |
|
|
22
|
-
|-----------|-----|-------------|
|
|
23
|
-
| UAlert | `u-alert` | Alert messages with variants |
|
|
24
|
-
| UButton | `u-button` | Button with variants, loading state |
|
|
25
|
-
| UDialog | `u-dialog` | Modal dialog |
|
|
26
|
-
| UDrawer | `u-drawer` | Slide-in drawer panel |
|
|
27
|
-
| UDivider | `u-divider` | Visual divider |
|
|
28
|
-
| UForm | `u-form` | Form container with validation |
|
|
29
|
-
| UIcon | `u-icon` | Icon display |
|
|
30
|
-
| UInput | `u-input` | Text input with validation |
|
|
31
|
-
| UMenu | `u-menu` | Dropdown/context menu |
|
|
32
|
-
| UMenuItem | `u-menu-item` | Menu item |
|
|
33
|
-
| UProgressBar | `u-progress-bar` | Progress bar |
|
|
34
|
-
| UProgressRing | `u-progress-ring` | Circular progress indicator |
|
|
35
|
-
| USkeleton | `u-skeleton` | Loading placeholder |
|
|
36
|
-
| USpinner | `u-spinner` | Loading spinner |
|
|
37
|
-
| USplitPanel | `u-split-panel` | Resizable split panel |
|
|
38
|
-
| UTag | `u-tag` | Label/status tag |
|
|
39
|
-
| UTooltip | `u-tooltip` | Tooltip |
|
|
40
|
-
| UTree | `u-tree` | Tree view |
|
|
41
|
-
| UTreeItem | `u-tree-item` | Tree view item |
|
|
42
|
-
|
|
43
|
-
## Events
|
|
44
|
-
|
|
45
|
-
All custom events use the `u-<action>` naming convention. Events bubble across Shadow DOM boundaries (`bubbles: true`, `composed: true`).
|
|
46
|
-
|
|
47
|
-
### Event Reference
|
|
48
|
-
|
|
49
|
-
| Event | Emitted By | Detail | Description |
|
|
50
|
-
|-------|-----------|--------|-------------|
|
|
51
|
-
| `u-input` | `u-input` | `{ value: string }` | Fires on every keystroke (real-time input) |
|
|
52
|
-
| `u-change` | `u-input` | `{ value: string }` | Fires when value is committed (blur/enter) |
|
|
53
|
-
| `u-select` | `u-tree-item` | `{ value: string, item: UTreeItem }` | Fires when a leaf item is selected |
|
|
54
|
-
| `u-show` | `u-dialog`, `u-drawer`, `u-tooltip` | — | Fires when the element becomes visible |
|
|
55
|
-
| `u-hide` | `u-dialog`, `u-drawer`, `u-tooltip` | — | Fires when the element is hidden |
|
|
56
|
-
| `u-toggle` | `u-tree-item` | `{ expanded: boolean, item: UTreeItem }` | Fires when a branch item expands/collapses |
|
|
57
|
-
| `u-resize` | `u-split-panel` | — | Fires when the panel is resized |
|
|
58
|
-
|
|
59
|
-
### TypeScript Support
|
|
15
|
+
```ts
|
|
16
|
+
// 전체 import
|
|
17
|
+
import '@iyulab/components';
|
|
60
18
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
import type { UInputEvent, UChangeEvent, USelectEvent, UShowEvent, UHideEvent, UResizeEvent } from '@iyulab/components';
|
|
65
|
-
|
|
66
|
-
element.addEventListener('u-input', (e: UInputEvent) => {
|
|
67
|
-
console.log(e.detail.value);
|
|
68
|
-
});
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
### Listening to Events
|
|
72
|
-
|
|
73
|
-
```html
|
|
74
|
-
<!-- Lit template -->
|
|
75
|
-
<u-input @u-input=${this.handleInput} @u-change=${this.handleChange}></u-input>
|
|
19
|
+
// 개별 import
|
|
20
|
+
import '@iyulab/components/u-button';
|
|
21
|
+
import '@iyulab/components/u-input';
|
|
76
22
|
```
|
|
77
23
|
|
|
78
|
-
|
|
79
|
-
// Vanilla JS
|
|
80
|
-
document.querySelector('u-input').addEventListener('u-input', (e) => {
|
|
81
|
-
console.log('Real-time value:', e.detail.value);
|
|
82
|
-
});
|
|
83
|
-
|
|
84
|
-
document.querySelector('u-input').addEventListener('u-change', (e) => {
|
|
85
|
-
console.log('Committed value:', e.detail.value);
|
|
86
|
-
});
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
## CSS Custom Properties
|
|
90
|
-
|
|
91
|
-
All CSS custom properties use the `--u-` prefix and are defined on `:root`. They respond to light/dark theme changes automatically.
|
|
92
|
-
|
|
93
|
-
### Semantic Colors
|
|
94
|
-
|
|
95
|
-
These variables reference the color palette and should be used in most cases:
|
|
96
|
-
|
|
97
|
-
#### Text
|
|
98
|
-
|
|
99
|
-
| Variable | Light | Dark |
|
|
100
|
-
|----------|-------|------|
|
|
101
|
-
| `--u-txt-color` | neutral-900 | neutral-900 |
|
|
102
|
-
| `--u-txt-color-inverse` | neutral-0 | neutral-100 |
|
|
103
|
-
| `--u-txt-color-hover` | blue-600 | blue-600 |
|
|
104
|
-
| `--u-txt-color-active` | blue-600 | blue-600 |
|
|
105
|
-
| `--u-txt-color-disabled` | neutral-400 | neutral-500 |
|
|
106
|
-
| `--u-txt-color-weak` | neutral-700 | neutral-700 |
|
|
107
|
-
| `--u-txt-color-strong` | neutral-1000 | neutral-1000 |
|
|
108
|
-
| `--u-link-txt-color` | blue-700 | blue-700 |
|
|
109
|
-
| `--u-tooltip-txt-color` | neutral-0 | neutral-100 |
|
|
110
|
-
|
|
111
|
-
#### Icon
|
|
112
|
-
|
|
113
|
-
| Variable | Light | Dark |
|
|
114
|
-
|----------|-------|------|
|
|
115
|
-
| `--u-icon-color` | neutral-700 | neutral-800 |
|
|
116
|
-
| `--u-icon-color-inverse` | neutral-0 | neutral-100 |
|
|
117
|
-
| `--u-icon-color-hover` | blue-600 | blue-600 |
|
|
118
|
-
| `--u-icon-color-active` | blue-600 | blue-600 |
|
|
119
|
-
| `--u-icon-color-disabled` | neutral-400 | neutral-500 |
|
|
120
|
-
|
|
121
|
-
#### Border
|
|
122
|
-
|
|
123
|
-
| Variable | Light | Dark |
|
|
124
|
-
|----------|-------|------|
|
|
125
|
-
| `--u-border-color` | neutral-300 | neutral-400 |
|
|
126
|
-
| `--u-border-color-weak` | neutral-200 | neutral-300 |
|
|
127
|
-
| `--u-border-color-strong` | neutral-400 | neutral-500 |
|
|
128
|
-
| `--u-input-border-color` | neutral-300 | neutral-400 |
|
|
129
|
-
| `--u-input-border-color-hover` | neutral-400 | neutral-500 |
|
|
130
|
-
| `--u-input-border-color-focus` | blue-600 | blue-600 |
|
|
131
|
-
| `--u-input-border-color-invalid` | red-600 | red-600 |
|
|
132
|
-
|
|
133
|
-
#### Background
|
|
134
|
-
|
|
135
|
-
| Variable | Light | Dark |
|
|
136
|
-
|----------|-------|------|
|
|
137
|
-
| `--u-bg-color` | neutral-0 | neutral-100 |
|
|
138
|
-
| `--u-bg-color-inverse` | neutral-900 | neutral-0 |
|
|
139
|
-
| `--u-bg-color-hover` | neutral-100 | neutral-300 |
|
|
140
|
-
| `--u-bg-color-active` | neutral-200 | neutral-400 |
|
|
141
|
-
| `--u-bg-color-disabled` | neutral-50 | neutral-100 |
|
|
142
|
-
| `--u-input-bg-color` | neutral-0 | neutral-200 |
|
|
143
|
-
| `--u-panel-bg-color` | neutral-0 | neutral-200 |
|
|
144
|
-
| `--u-overlay-bg-color` | `rgba(0,0,0,0.5)` | `rgba(0,0,0,0.7)` |
|
|
145
|
-
| `--u-tooltip-bg-color` | `rgba(0,0,0,0.75)` | `rgba(255,255,255,0.85)` |
|
|
146
|
-
|
|
147
|
-
#### Shadow
|
|
148
|
-
|
|
149
|
-
| Variable | Light | Dark |
|
|
150
|
-
|----------|-------|------|
|
|
151
|
-
| `--u-shadow-color-weaker` | `rgba(0,0,0,0.04)` | `rgba(0,0,0,0.15)` |
|
|
152
|
-
| `--u-shadow-color-weak` | `rgba(0,0,0,0.08)` | `rgba(0,0,0,0.25)` |
|
|
153
|
-
| `--u-shadow-color-normal` | `rgba(0,0,0,0.12)` | `rgba(0,0,0,0.35)` |
|
|
154
|
-
| `--u-shadow-color-strong` | `rgba(0,0,0,0.16)` | `rgba(0,0,0,0.45)` |
|
|
155
|
-
| `--u-shadow-color-stronger` | `rgba(0,0,0,0.24)` | `rgba(0,0,0,0.60)` |
|
|
24
|
+
## Skills Usage
|
|
156
25
|
|
|
157
|
-
|
|
26
|
+
LLM 코딩 에이전트(Claude Code, GitHub Copilot, Cursor 등)를 위한 스킬을 제공합니다.
|
|
158
27
|
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
| `--u-scrollbar-color-hover` | neutral-500 | neutral-600 |
|
|
163
|
-
| `--u-scrollbar-track-color` | `transparent` | `transparent` |
|
|
164
|
-
|
|
165
|
-
### Typography
|
|
166
|
-
|
|
167
|
-
| Variable | Value |
|
|
168
|
-
|----------|-------|
|
|
169
|
-
| `--u-font-base` | -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif |
|
|
170
|
-
| `--u-font-mono` | ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, monospace |
|
|
171
|
-
| `--u-font-serif` | 'Georgia', 'Times New Roman', Times, serif |
|
|
172
|
-
| `--u-font-display` | 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif |
|
|
173
|
-
| `--u-font-modern` | 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif |
|
|
174
|
-
| `--u-font-rounded` | 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, sans-serif |
|
|
175
|
-
|
|
176
|
-
### Color Palette
|
|
177
|
-
|
|
178
|
-
The base color palettes (`neutral`, `blue`, `green`, `yellow`, `red`) range from `0` (lightest) to `1000` (darkest) in light mode, and are inverted for dark mode.
|
|
28
|
+
```bash
|
|
29
|
+
# GitHub에서 설치
|
|
30
|
+
npx skills add iyulab/node-components
|
|
179
31
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
--u-blue-{0|100|200|300|400|500|600|700|800|900|1000}
|
|
183
|
-
--u-green-{0|100|200|300|400|500|600|700|800|900|1000}
|
|
184
|
-
--u-yellow-{0|100|200|300|400|500|600|700|800|900|1000}
|
|
185
|
-
--u-red-{0|100|200|300|400|500|600|700|800|900|1000}
|
|
32
|
+
# 패키지 설치 후 로컬에서 참조
|
|
33
|
+
npx skills add ./node_modules/@iyulab/components
|
|
186
34
|
```
|
|
187
35
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
Override any `--u-*` variable on `:root` or on specific elements:
|
|
36
|
+
## Components
|
|
191
37
|
|
|
192
|
-
|
|
193
|
-
/* Global override */
|
|
194
|
-
:root {
|
|
195
|
-
--u-blue-600: #3B82F6;
|
|
196
|
-
--u-font-base: 'Pretendard', sans-serif;
|
|
197
|
-
}
|
|
38
|
+
**Feedback** — `u-alert`, `u-badge`, `u-spinner`, `u-skeleton`, `u-progress-bar`, `u-progress-ring`
|
|
198
39
|
|
|
199
|
-
|
|
200
|
-
u-button {
|
|
201
|
-
--u-bg-color: var(--my-brand-primary);
|
|
202
|
-
--u-txt-color: var(--my-brand-on-primary);
|
|
203
|
-
}
|
|
204
|
-
```
|
|
40
|
+
**Buttons & Actions** — `u-button`, `u-button-group`, `u-icon-button`, `u-chip`
|
|
205
41
|
|
|
206
|
-
|
|
42
|
+
**Form Controls** — `u-input`, `u-textarea`, `u-select`, `u-checkbox`, `u-radio`, `u-switch`, `u-slider`, `u-rating`, `u-field`, `u-form`, `u-option`
|
|
207
43
|
|
|
208
|
-
|
|
44
|
+
**Overlay & Floating** — `u-dialog`, `u-drawer`, `u-popover`, `u-tooltip`
|
|
209
45
|
|
|
210
|
-
|
|
211
|
-
/* Tailwind CSS bridge */
|
|
212
|
-
:root {
|
|
213
|
-
--u-blue-500: var(--color-blue-500);
|
|
214
|
-
--u-blue-600: var(--color-blue-600);
|
|
215
|
-
--u-neutral-0: var(--color-white);
|
|
216
|
-
--u-neutral-900: var(--color-gray-900);
|
|
217
|
-
--u-font-base: var(--font-sans);
|
|
218
|
-
}
|
|
46
|
+
**Navigation** — `u-menu`, `u-menu-item`, `u-tab-panel`, `u-breadcrumb`, `u-breadcrumb-item`, `u-tree`, `u-tree-item`
|
|
219
47
|
|
|
220
|
-
|
|
221
|
-
:root {
|
|
222
|
-
--u-blue-600: var(--md-sys-color-primary);
|
|
223
|
-
--u-bg-color: var(--md-sys-color-surface);
|
|
224
|
-
--u-txt-color: var(--md-sys-color-on-surface);
|
|
225
|
-
}
|
|
226
|
-
```
|
|
48
|
+
**Layout & Display** — `u-avatar`, `u-card`, `u-carousel`, `u-divider`, `u-icon`, `u-panel`, `u-split-panel`, `u-tag`
|
|
227
49
|
|
|
228
50
|
## Theming
|
|
229
51
|
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
```typescript
|
|
52
|
+
```ts
|
|
233
53
|
import { Theme } from '@iyulab/components';
|
|
234
54
|
|
|
235
55
|
await Theme.init({
|
|
236
|
-
default: 'system',
|
|
237
|
-
useBuiltIn: true, //
|
|
238
|
-
store: {
|
|
239
|
-
type: 'localStorage',
|
|
240
|
-
prefix: 'my-app',
|
|
241
|
-
},
|
|
56
|
+
default: 'system', // 'light' | 'dark' | 'system'
|
|
57
|
+
useBuiltIn: true, // 내장 light/dark CSS 사용
|
|
58
|
+
store: { type: 'localStorage', prefix: 'my-app' },
|
|
242
59
|
});
|
|
243
|
-
```
|
|
244
|
-
|
|
245
|
-
### Switching Themes
|
|
246
60
|
|
|
247
|
-
|
|
248
|
-
Theme.set('
|
|
249
|
-
Theme.set('light'); // apply light theme
|
|
250
|
-
Theme.set('system'); // follow OS preference
|
|
251
|
-
const current = Theme.get(); // get current theme
|
|
61
|
+
Theme.set('dark');
|
|
62
|
+
Theme.set('system');
|
|
252
63
|
```
|
|
253
64
|
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
When using an external dark mode toggle (e.g., Tailwind's `dark:` class), disable built-in styles and bridge the variables:
|
|
257
|
-
|
|
258
|
-
```typescript
|
|
259
|
-
// Disable built-in theme styles
|
|
260
|
-
await Theme.init({ useBuiltIn: false });
|
|
261
|
-
```
|
|
65
|
+
모든 CSS 변수는 `--u-` 접두사를 사용하며 `:root`에서 재정의할 수 있습니다.
|
|
262
66
|
|
|
263
67
|
```css
|
|
264
|
-
/* Provide your own light/dark values */
|
|
265
68
|
:root {
|
|
266
|
-
--u-
|
|
267
|
-
--u-
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
[data-theme="dark"] {
|
|
271
|
-
--u-bg-color: #121212;
|
|
272
|
-
--u-txt-color: #d4d4d4;
|
|
69
|
+
--u-blue-600: #3B82F6;
|
|
70
|
+
--u-font-base: 'Pretendard', sans-serif;
|
|
273
71
|
}
|
|
274
72
|
```
|
|
275
73
|
|
|
276
|
-
|
|
74
|
+
자세한 내용은 [docs/theming.md](./docs/theming.md)를 참고하세요.
|
|
75
|
+
|
|
76
|
+
## Documentation
|
|
277
77
|
|
|
278
|
-
|
|
279
|
-
|
|
78
|
+
| 문서 | 내용 |
|
|
79
|
+
|------|------|
|
|
80
|
+
| [docs/architecture.md](./docs/architecture.md) | 패키지 구조 및 클래스 계층 |
|
|
81
|
+
| [docs/guidelines.md](./docs/guidelines.md) | 컴포넌트 개발 가이드라인 |
|
|
82
|
+
| [docs/events.md](./docs/events.md) | 이벤트 시스템 카탈로그 |
|
|
83
|
+
| [docs/theming.md](./docs/theming.md) | 테마 및 CSS 변수 |
|
|
84
|
+
| [docs/form-controls.md](./docs/form-controls.md) | 폼 연동 및 검증 API |
|
|
85
|
+
| [docs/icons.md](./docs/icons.md) | 아이콘 등록 및 사용 |
|
|
280
86
|
|
|
281
87
|
## License
|
|
282
88
|
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
//#region \0@oxc-project+runtime@0.122.0/helpers/decorate.js
|
|
2
|
+
function __decorate(decorators, target, key, desc) {
|
|
3
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
4
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
5
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
6
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
7
|
+
}
|
|
8
|
+
//#endregion
|
|
9
|
+
export { __decorate };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region \0glob-assets_raw/bell-fill.svg.d37c41d9
|
|
2
|
+
var bell_fill_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2m.995-14.901a1 1 0 1 0-1.99 0A5 5 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901\"/>\n</svg>";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { bell_fill_svg_default as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region \0glob-assets_raw/check-circle-fill.svg.51c33a2a
|
|
2
|
+
var check_circle_fill_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z\"/>\n</svg>";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { check_circle_fill_svg_default as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region \0glob-assets_raw/check-lg.svg.371c5e78
|
|
2
|
+
var check_lg_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z\"/>\n</svg>";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { check_lg_svg_default as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region \0glob-assets_raw/chevron-down.svg.0ccd06ea
|
|
2
|
+
var chevron_down_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708\"></path>\n</svg>";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { chevron_down_svg_default as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region \0glob-assets_raw/chevron-left.svg.b4601050
|
|
2
|
+
var chevron_left_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0\"/>\n</svg>";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { chevron_left_svg_default as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region \0glob-assets_raw/chevron-right.svg.0711bb67
|
|
2
|
+
var chevron_right_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708\"/>\n</svg>";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { chevron_right_svg_default as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region \0glob-assets_raw/chevron-up.svg.ed917211
|
|
2
|
+
var chevron_up_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z\"></path>\n</svg>";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { chevron_up_svg_default as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region \0glob-assets_raw/dark.css.e8ac080d
|
|
2
|
+
var dark_css_default = ":root[theme=\"dark\"] {\n color-scheme: dark;\n\n /* Neutral Colors */\n --u-neutral-0: #000000;\n --u-neutral-50: #0A0A0A;\n --u-neutral-100: #121212;\n --u-neutral-200: #1E1E1E;\n --u-neutral-300: #2A2A2A;\n --u-neutral-400: #3D3D3D;\n --u-neutral-500: #525252;\n --u-neutral-600: #6E6E6E;\n --u-neutral-700: #8A8A8A;\n --u-neutral-800: #B0B0B0;\n --u-neutral-900: #D4D4D4;\n --u-neutral-1000: #FFFFFF;\n\n /* Blue Colors */\n --u-blue-0: #0A1E3D;\n --u-blue-100: #1E3A5F;\n --u-blue-200: #2B4F7E;\n --u-blue-300: #3D6B9E;\n --u-blue-400: #5284BE;\n --u-blue-500: #6BA3E3;\n --u-blue-600: #87B8F5;\n --u-blue-700: #A5CDFF;\n --u-blue-800: #C2DEFF;\n --u-blue-900: #DDEEFF;\n --u-blue-1000: #F0F7FF;\n\n /* Green Colors */\n --u-green-0: #0D2818;\n --u-green-100: #1A3F2A;\n --u-green-200: #285639;\n --u-green-300: #3A7450;\n --u-green-400: #4E9268;\n --u-green-500: #66B584;\n --u-green-600: #81D19D;\n --u-green-700: #9FE5B5;\n --u-green-800: #BEF2CD;\n --u-green-900: #DDF9E5;\n --u-green-1000: #F0FDF5;\n\n /* Yellow Colors */\n --u-yellow-0: #2E2200;\n --u-yellow-100: #4D3A00;\n --u-yellow-200: #6B5200;\n --u-yellow-300: #8A6B00;\n --u-yellow-400: #B08900;\n --u-yellow-500: #D4A712;\n --u-yellow-600: #F5C842;\n --u-yellow-700: #FFE066;\n --u-yellow-800: #FFED99;\n --u-yellow-900: #FFF5CC;\n --u-yellow-1000: #FFFBE6;\n\n /* Red Colors */\n --u-red-0: #2E0A0A;\n --u-red-100: #4D1717;\n --u-red-200: #6B2424;\n --u-red-300: #8F3535;\n --u-red-400: #B24848;\n --u-red-500: #D66060;\n --u-red-600: #F57878;\n --u-red-700: #FF9494;\n --u-red-800: #FFB3B3;\n --u-red-900: #FFD2D2;\n --u-red-1000: #FFF0F0;\n\n /* Orange Colors */\n --u-orange-0: #2E1A00;\n --u-orange-100: #4D2E00;\n --u-orange-200: #6B4200;\n --u-orange-300: #8A5A00;\n --u-orange-400: #B07500;\n --u-orange-500: #D49212;\n --u-orange-600: #F5AE42;\n --u-orange-700: #FFC566;\n --u-orange-800: #FFD899;\n --u-orange-900: #FFEBCC;\n --u-orange-1000: #FFF5E6;\n\n /* Teal Colors */\n --u-teal-0: #002018;\n --u-teal-100: #00382B;\n --u-teal-200: #005040;\n --u-teal-300: #006B55;\n --u-teal-400: #00886C;\n --u-teal-500: #1AA88A;\n --u-teal-600: #42C4A5;\n --u-teal-700: #6EDABD;\n --u-teal-800: #9EEAD5;\n --u-teal-900: #CFF5EA;\n --u-teal-1000: #EDFCF7;\n\n /* Cyan Colors */\n --u-cyan-0: #002830;\n --u-cyan-100: #00404D;\n --u-cyan-200: #005A6B;\n --u-cyan-300: #00768A;\n --u-cyan-400: #0094B0;\n --u-cyan-500: #12B4D4;\n --u-cyan-600: #42CFF5;\n --u-cyan-700: #66DFFF;\n --u-cyan-800: #99EBFF;\n --u-cyan-900: #CCF5FF;\n --u-cyan-1000: #E6FAFF;\n\n /* Purple Colors */\n --u-purple-0: #1A0A2E;\n --u-purple-100: #2E174D;\n --u-purple-200: #42246B;\n --u-purple-300: #5A358F;\n --u-purple-400: #7548B2;\n --u-purple-500: #9260D6;\n --u-purple-600: #AE78F5;\n --u-purple-700: #C494FF;\n --u-purple-800: #D8B3FF;\n --u-purple-900: #ECD2FF;\n --u-purple-1000: #F7F0FF;\n\n /* Pink Colors */\n --u-pink-0: #2E0A1A;\n --u-pink-100: #4D172E;\n --u-pink-200: #6B2442;\n --u-pink-300: #8F355A;\n --u-pink-400: #B24875;\n --u-pink-500: #D66092;\n --u-pink-600: #F578AE;\n --u-pink-700: #FF94C4;\n --u-pink-800: #FFB3D8;\n --u-pink-900: #FFD2EB;\n --u-pink-1000: #FFF0F7;\n\n /* Text Colors */\n --u-txt-color: var(--u-neutral-900);\n --u-txt-color-inverse: var(--u-neutral-100);\n --u-txt-color-hover: var(--u-blue-600);\n --u-txt-color-active: var(--u-blue-600);\n --u-txt-color-disabled: var(--u-neutral-500);\n --u-txt-color-weak: var(--u-neutral-700);\n --u-txt-color-strong: var(--u-neutral-1000);\n\n --u-link-txt-color: var(--u-blue-700);\n --u-tooltip-txt-color: var(--u-neutral-100);\n\n /* Icon Colors */\n --u-icon-color: var(--u-neutral-800);\n --u-icon-color-inverse: var(--u-neutral-100);\n --u-icon-color-hover: var(--u-blue-600);\n --u-icon-color-active: var(--u-blue-600);\n --u-icon-color-disabled: var(--u-neutral-500);\n\n /* Border Colors */\n --u-border-color: var(--u-neutral-400);\n --u-border-color-weak: var(--u-neutral-300);\n --u-border-color-strong: var(--u-neutral-500);\n\n --u-input-border-color: var(--u-neutral-400);\n --u-input-border-color-hover: var(--u-neutral-500);\n --u-input-border-color-focus: var(--u-blue-600);\n --u-input-border-color-invalid: var(--u-red-600);\n\n /* Background Colors */\n --u-bg-color: var(--u-neutral-100);\n --u-bg-color-inverse: var(--u-neutral-0);\n --u-bg-color-hover: var(--u-neutral-300);\n --u-bg-color-active: var(--u-neutral-400);\n --u-bg-color-disabled: var(--u-neutral-100);\n \n --u-input-bg-color: var(--u-neutral-200);\n --u-panel-bg-color: var(--u-neutral-200);\n --u-overlay-bg-color: rgba(0, 0, 0, 0.7);\n --u-tooltip-bg-color: rgba(255, 255, 255, 0.85);\n\n /* Shadow Colors */\n --u-shadow-color-weaker: rgba(0, 0, 0, 0.15);\n --u-shadow-color-weak: rgba(0, 0, 0, 0.25);\n --u-shadow-color-normal: rgba(0, 0, 0, 0.35);\n --u-shadow-color-strong: rgba(0, 0, 0, 0.45);\n --u-shadow-color-stronger: rgba(0, 0, 0, 0.60);\n\n /* Scrollbar Colors */\n --u-scrollbar-color: var(--u-neutral-500);\n --u-scrollbar-color-hover: var(--u-neutral-600);\n --u-scrollbar-track-color: transparent;\n\n /* Font Styles */\n --u-font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';\n --u-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace;\n --u-font-serif: 'Georgia', 'Times New Roman', Times, serif;\n --u-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;\n --u-font-modern: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n --u-font-rounded: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { dark_css_default as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region \0glob-assets_raw/dash-lg.svg.b40b8b3a
|
|
2
|
+
var dash_lg_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8\"/>\n</svg>";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { dash_lg_svg_default as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region \0glob-assets_raw/exclamation-circle-fill.svg.dc8c523e
|
|
2
|
+
var exclamation_circle_fill_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2\"/>\n</svg>";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { exclamation_circle_fill_svg_default as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region \0glob-assets_raw/exclamation-triangle-fill.svg.7949d2c7
|
|
2
|
+
var exclamation_triangle_fill_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2\"/>\n</svg>";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { exclamation_triangle_fill_svg_default as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region \0glob-assets_raw/eye-slash.svg.240afafa
|
|
2
|
+
var eye_slash_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z\"/>\n <path d=\"M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829\"/>\n <path d=\"M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z\"/>\n</svg>";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { eye_slash_svg_default as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region \0glob-assets_raw/eye.svg.2e5e9c4c
|
|
2
|
+
var eye_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z\"/>\n <path d=\"M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0\"/>\n</svg>";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { eye_svg_default as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region \0glob-assets_raw/info-circle-fill.svg.6580071d
|
|
2
|
+
var info_circle_fill_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2\"/>\n</svg>";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { info_circle_fill_svg_default as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region \0glob-assets_raw/light.css.637cb2f8
|
|
2
|
+
var light_css_default = ":root {\n color-scheme: light;\n\n /* Neutral Colors */\n --u-neutral-0: #FFFFFF;\n --u-neutral-50: #FAFAFA;\n --u-neutral-100: #F5F5F5;\n --u-neutral-200: #EEEEEE;\n --u-neutral-300: #E0E0E0;\n --u-neutral-400: #BDBDBD;\n --u-neutral-500: #9E9E9E;\n --u-neutral-600: #757575;\n --u-neutral-700: #616161;\n --u-neutral-800: #424242;\n --u-neutral-900: #212121;\n --u-neutral-1000: #000000;\n\n /* Blue Colors */\n --u-blue-0: #E3F2FD;\n --u-blue-100: #BBDEFB;\n --u-blue-200: #90CAF9;\n --u-blue-300: #64B5F6;\n --u-blue-400: #42A5F5;\n --u-blue-500: #2196F3;\n --u-blue-600: #1E88E5;\n --u-blue-700: #1976D2;\n --u-blue-800: #1565C0;\n --u-blue-900: #0D47A1;\n --u-blue-1000: #062A5E;\n\n /* Green Colors */\n --u-green-0: #E8F5E9;\n --u-green-100: #C8E6C9;\n --u-green-200: #A5D6A7;\n --u-green-300: #81C784;\n --u-green-400: #66BB6A;\n --u-green-500: #4CAF50;\n --u-green-600: #43A047;\n --u-green-700: #388E3C;\n --u-green-800: #2E7D32;\n --u-green-900: #1B5E20;\n --u-green-1000: #0F3A12;\n\n /* Yellow Colors */\n --u-yellow-0: #FFFDE7;\n --u-yellow-100: #FFF9C4;\n --u-yellow-200: #FFF59D;\n --u-yellow-300: #FFF176;\n --u-yellow-400: #FFEE58;\n --u-yellow-500: #FFEB3B;\n --u-yellow-600: #FDD835;\n --u-yellow-700: #FBC02D;\n --u-yellow-800: #F9A825;\n --u-yellow-900: #F57F17;\n --u-yellow-1000: #8A4A00;\n\n /* Red Colors */\n --u-red-0: #FFEBEE;\n --u-red-100: #FFCDD2;\n --u-red-200: #EF9A9A;\n --u-red-300: #E57373;\n --u-red-400: #EF5350;\n --u-red-500: #F44336;\n --u-red-600: #E53935;\n --u-red-700: #D32F2F;\n --u-red-800: #C62828;\n --u-red-900: #B71C1C;\n --u-red-1000: #6B0F0F;\n\n /* Orange Colors */\n --u-orange-0: #FFF3E0;\n --u-orange-100: #FFE0B2;\n --u-orange-200: #FFCC80;\n --u-orange-300: #FFB74D;\n --u-orange-400: #FFA726;\n --u-orange-500: #FF9800;\n --u-orange-600: #FB8C00;\n --u-orange-700: #F57C00;\n --u-orange-800: #EF6C00;\n --u-orange-900: #E65100;\n --u-orange-1000: #8C3100;\n\n /* Teal Colors */\n --u-teal-0: #E0F2F1;\n --u-teal-100: #B2DFDB;\n --u-teal-200: #80CBC4;\n --u-teal-300: #4DB6AC;\n --u-teal-400: #26A69A;\n --u-teal-500: #009688;\n --u-teal-600: #00897B;\n --u-teal-700: #00796B;\n --u-teal-800: #00695C;\n --u-teal-900: #004D40;\n --u-teal-1000: #002E26;\n\n /* Cyan Colors */\n --u-cyan-0: #E0F7FA;\n --u-cyan-100: #B2EBF2;\n --u-cyan-200: #80DEEA;\n --u-cyan-300: #4DD0E1;\n --u-cyan-400: #26C6DA;\n --u-cyan-500: #00BCD4;\n --u-cyan-600: #00ACC1;\n --u-cyan-700: #0097A7;\n --u-cyan-800: #00838F;\n --u-cyan-900: #006064;\n --u-cyan-1000: #003A3D;\n\n /* Purple Colors */\n --u-purple-0: #F3E5F5;\n --u-purple-100: #E1BEE7;\n --u-purple-200: #CE93D8;\n --u-purple-300: #BA68C8;\n --u-purple-400: #AB47BC;\n --u-purple-500: #9C27B0;\n --u-purple-600: #8E24AA;\n --u-purple-700: #7B1FA2;\n --u-purple-800: #6A1B9A;\n --u-purple-900: #4A148C;\n --u-purple-1000: #2C0B54;\n\n /* Pink Colors */\n --u-pink-0: #FCE4EC;\n --u-pink-100: #F8BBD0;\n --u-pink-200: #F48FB1;\n --u-pink-300: #F06292;\n --u-pink-400: #EC407A;\n --u-pink-500: #E91E63;\n --u-pink-600: #D81B60;\n --u-pink-700: #C2185B;\n --u-pink-800: #AD1457;\n --u-pink-900: #880E4F;\n --u-pink-1000: #520830;\n\n /* Text Colors */\n --u-txt-color: var(--u-neutral-900);\n --u-txt-color-inverse: var(--u-neutral-0);\n --u-txt-color-hover: var(--u-blue-600);\n --u-txt-color-active: var(--u-blue-600);\n --u-txt-color-disabled: var(--u-neutral-400);\n --u-txt-color-weak: var(--u-neutral-700);\n --u-txt-color-strong: var(--u-neutral-1000);\n\n --u-link-txt-color: var(--u-blue-700);\n --u-tooltip-txt-color: var(--u-neutral-0);\n\n /* Icon Colors */\n --u-icon-color: var(--u-neutral-700);\n --u-icon-color-inverse: var(--u-neutral-0);\n --u-icon-color-hover: var(--u-blue-600);\n --u-icon-color-active: var(--u-blue-600);\n --u-icon-color-disabled: var(--u-neutral-400);\n\n /* Border Colors */\n --u-border-color: var(--u-neutral-300);\n --u-border-color-weak: var(--u-neutral-200);\n --u-border-color-strong: var(--u-neutral-400);\n\n --u-input-border-color: var(--u-neutral-300);\n --u-input-border-color-hover: var(--u-neutral-400);\n --u-input-border-color-focus: var(--u-blue-600);\n --u-input-border-color-invalid: var(--u-red-600);\n\n /* Background Colors */\n --u-bg-color: var(--u-neutral-0);\n --u-bg-color-inverse: var(--u-neutral-900);\n --u-bg-color-hover: var(--u-neutral-100);\n --u-bg-color-active: var(--u-neutral-200);\n --u-bg-color-disabled: var(--u-neutral-50);\n \n --u-input-bg-color: var(--u-neutral-0);\n --u-panel-bg-color: var(--u-neutral-0);\n --u-overlay-bg-color: rgba(0, 0, 0, 0.5);\n --u-tooltip-bg-color: rgba(0, 0, 0, 0.75);\n\n /* Shadow Colors */\n --u-shadow-color-weaker: rgba(0, 0, 0, 0.04);\n --u-shadow-color-weak: rgba(0, 0, 0, 0.08);\n --u-shadow-color-normal: rgba(0, 0, 0, 0.12);\n --u-shadow-color-strong: rgba(0, 0, 0, 0.16);\n --u-shadow-color-stronger: rgba(0, 0, 0, 0.24);\n\n /* Scrollbar Colors */\n --u-scrollbar-color: var(--u-neutral-400);\n --u-scrollbar-color-hover: var(--u-neutral-500);\n --u-scrollbar-track-color: transparent;\n\n /* Font Styles */\n --u-font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';\n --u-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace;\n --u-font-serif: 'Georgia', 'Times New Roman', Times, serif;\n --u-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;\n --u-font-modern: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n --u-font-rounded: 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n}";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { light_css_default as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region \0glob-assets_raw/plus-lg.svg.294e9073
|
|
2
|
+
var plus_lg_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path fill-rule=\"evenodd\" d=\"M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2\"/>\n</svg>";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { plus_lg_svg_default as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region \0glob-assets_raw/search.svg.0ba2012d
|
|
2
|
+
var search_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0\"/>\n</svg>";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { search_svg_default as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region \0glob-assets_raw/star-fill.svg.f24b5a2d
|
|
2
|
+
var star_fill_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z\"/>\n</svg>";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { star_fill_svg_default as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region \0glob-assets_raw/star.svg.4af61468
|
|
2
|
+
var star_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z\"/>\n</svg>";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { star_svg_default as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region \0glob-assets_raw/three-dots-vertical.svg.9fee78c5
|
|
2
|
+
var three_dots_vertical_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0\"/>\n</svg>";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { three_dots_vertical_svg_default as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region \0glob-assets_raw/three-dots.svg.6a7a5b23
|
|
2
|
+
var three_dots_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3\"/>\n</svg>";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { three_dots_svg_default as default };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
//#region \0glob-assets_raw/x-lg.svg.f34b882c
|
|
2
|
+
var x_lg_svg_default = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n <path d=\"M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z\"/>\n</svg>";
|
|
3
|
+
//#endregion
|
|
4
|
+
export { x_lg_svg_default as default };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { UElement } from './UElement.js';
|
|
2
2
|
/**
|
|
3
|
-
* `
|
|
3
|
+
* `UDataElement`는 light DOM 내 `<script type="application/json">` 태그에서
|
|
4
4
|
* JSON 데이터를 읽어 컴포넌트 프로퍼티에 자동으로 매핑하는 기반 클래스입니다.
|
|
5
5
|
*
|
|
6
6
|
* 사용 예시:
|
|
@@ -12,21 +12,19 @@ import { UElement } from './UElement.js';
|
|
|
12
12
|
*
|
|
13
13
|
* JSON 최상위 키가 컴포넌트의 프로퍼티 이름과 일치하면 자동으로 할당됩니다.
|
|
14
14
|
*/
|
|
15
|
-
export declare class
|
|
15
|
+
export declare class UDataElement extends UElement {
|
|
16
16
|
static styles: import('lit').CSSResultGroup[];
|
|
17
|
-
static dependencies: Record<string, typeof UElement>;
|
|
18
17
|
connectedCallback(): void;
|
|
19
18
|
/**
|
|
20
19
|
* 지정한 태그와 데이터로 커스텀 엘리먼트 HTML 문자열을 생성합니다.
|
|
21
20
|
* 데이터는 `<script type="application/json">` 태그로 주입됩니다.
|
|
22
21
|
* 태그이름이 등록되지 않은 경우 빈 문자열을 반환합니다.
|
|
23
22
|
*
|
|
24
|
-
* @param tag - 커스텀 엘리먼트 태그 이름 (예: `"u-table-block"`)
|
|
25
23
|
* @param json - JSON 데이터 객체 또는 문자열
|
|
26
24
|
* @param attrs - 추가 속성 객체 (선택적, `buildElementHTML` 규칙 적용)
|
|
27
25
|
* @returns 생성된 HTML 문자열
|
|
28
26
|
*/
|
|
29
|
-
static buildHTML(
|
|
27
|
+
static buildHTML(json: object | string, attrs?: Record<string, string | boolean | object | null | undefined>): string;
|
|
30
28
|
/**
|
|
31
29
|
* `data` 객체를 컴포넌트 프로퍼티에 할당합니다.
|
|
32
30
|
* `data`가 제공되지 않은 경우 light DOM 내 `<script type="application/json">` 태그에서 JSON 데이터를 읽어 프로퍼티에 자동으로 할당합니다.
|