@moduix/react 1.1.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/LICENSE.md +21 -0
- package/README.md +252 -0
- package/dist/components/accordion/Accordion.css +190 -0
- package/dist/components/accordion/Accordion.d.ts +13 -0
- package/dist/components/accordion/Accordion.js +67 -0
- package/dist/components/accordion/Accordion.module.js +15 -0
- package/dist/components/accordion/index.d.ts +2 -0
- package/dist/components/alert/Alert.css +108 -0
- package/dist/components/alert/Alert.d.ts +14 -0
- package/dist/components/alert/Alert.js +69 -0
- package/dist/components/alert/Alert.module.js +11 -0
- package/dist/components/angle-slider/AngleSlider.css +192 -0
- package/dist/components/angle-slider/AngleSlider.d.ts +16 -0
- package/dist/components/angle-slider/AngleSlider.js +92 -0
- package/dist/components/angle-slider/AngleSlider.module.js +13 -0
- package/dist/components/angle-slider/index.d.ts +2 -0
- package/dist/components/aspect-ratio/AspectRatio.css +14 -0
- package/dist/components/aspect-ratio/AspectRatio.d.ts +10 -0
- package/dist/components/aspect-ratio/AspectRatio.js +24 -0
- package/dist/components/aspect-ratio/AspectRatio.module.js +5 -0
- package/dist/components/avatar/Avatar.css +75 -0
- package/dist/components/avatar/Avatar.d.ts +19 -0
- package/dist/components/avatar/Avatar.js +49 -0
- package/dist/components/avatar/Avatar.module.js +9 -0
- package/dist/components/avatar/index.d.ts +2 -0
- package/dist/components/badge/Badge.css +66 -0
- package/dist/components/badge/Badge.d.ts +11 -0
- package/dist/components/badge/Badge.js +35 -0
- package/dist/components/badge/Badge.module.js +8 -0
- package/dist/components/bleed/Bleed.css +51 -0
- package/dist/components/bleed/Bleed.d.ts +12 -0
- package/dist/components/bleed/Bleed.js +22 -0
- package/dist/components/bleed/Bleed.module.js +5 -0
- package/dist/components/breadcrumbs/Breadcrumbs.css +90 -0
- package/dist/components/breadcrumbs/Breadcrumbs.d.ts +12 -0
- package/dist/components/breadcrumbs/Breadcrumbs.js +95 -0
- package/dist/components/breadcrumbs/Breadcrumbs.module.js +13 -0
- package/dist/components/button/Button.css +193 -0
- package/dist/components/button/Button.d.ts +14 -0
- package/dist/components/button/Button.js +28 -0
- package/dist/components/button/Button.module.js +5 -0
- package/dist/components/card/Card.css +148 -0
- package/dist/components/card/Card.d.ts +19 -0
- package/dist/components/card/Card.js +101 -0
- package/dist/components/card/Card.module.js +14 -0
- package/dist/components/carousel/Carousel.css +198 -0
- package/dist/components/carousel/Carousel.d.ts +19 -0
- package/dist/components/carousel/Carousel.js +128 -0
- package/dist/components/carousel/Carousel.module.js +18 -0
- package/dist/components/carousel/index.d.ts +2 -0
- package/dist/components/checkbox/Checkbox.css +135 -0
- package/dist/components/checkbox/Checkbox.d.ts +22 -0
- package/dist/components/checkbox/Checkbox.js +84 -0
- package/dist/components/checkbox/Checkbox.module.js +12 -0
- package/dist/components/checkbox/index.d.ts +2 -0
- package/dist/components/clipboard/Clipboard.css +145 -0
- package/dist/components/clipboard/Clipboard.d.ts +15 -0
- package/dist/components/clipboard/Clipboard.js +96 -0
- package/dist/components/clipboard/Clipboard.module.js +14 -0
- package/dist/components/clipboard/index.d.ts +2 -0
- package/dist/components/close-button/CloseButton.css +49 -0
- package/dist/components/close-button/CloseButton.d.ts +6 -0
- package/dist/components/close-button/CloseButton.js +39 -0
- package/dist/components/close-button/CloseButton.module.js +5 -0
- package/dist/components/collapsible/Collapsible.css +138 -0
- package/dist/components/collapsible/Collapsible.d.ts +12 -0
- package/dist/components/collapsible/Collapsible.js +59 -0
- package/dist/components/collapsible/Collapsible.module.js +12 -0
- package/dist/components/collapsible/index.d.ts +2 -0
- package/dist/components/color-picker/ColorPicker.css +433 -0
- package/dist/components/color-picker/ColorPicker.d.ts +39 -0
- package/dist/components/color-picker/ColorPicker.js +275 -0
- package/dist/components/color-picker/ColorPicker.module.js +33 -0
- package/dist/components/color-picker/index.d.ts +2 -0
- package/dist/components/combobox/Combobox.css +315 -0
- package/dist/components/combobox/Combobox.d.ts +24 -0
- package/dist/components/combobox/Combobox.js +169 -0
- package/dist/components/combobox/Combobox.module.js +23 -0
- package/dist/components/combobox/index.d.ts +2 -0
- package/dist/components/command-palette/CommandPalette.css +492 -0
- package/dist/components/command-palette/CommandPalette.d.ts +71 -0
- package/dist/components/command-palette/CommandPalette.js +383 -0
- package/dist/components/command-palette/CommandPalette.module.js +43 -0
- package/dist/components/command-palette/index.d.ts +2 -0
- package/dist/components/container/Container.css +45 -0
- package/dist/components/container/Container.d.ts +14 -0
- package/dist/components/container/Container.js +22 -0
- package/dist/components/container/Container.module.js +5 -0
- package/dist/components/date-input/DateInput.css +104 -0
- package/dist/components/date-input/DateInput.d.ts +22 -0
- package/dist/components/date-input/DateInput.js +83 -0
- package/dist/components/date-input/DateInput.module.js +12 -0
- package/dist/components/date-input/index.d.ts +2 -0
- package/dist/components/date-picker/DatePicker.css +420 -0
- package/dist/components/date-picker/DatePicker.d.ts +39 -0
- package/dist/components/date-picker/DatePicker.js +284 -0
- package/dist/components/date-picker/DatePicker.module.js +29 -0
- package/dist/components/date-picker/index.d.ts +2 -0
- package/dist/components/dialog/Dialog.css +221 -0
- package/dist/components/dialog/Dialog.d.ts +46 -0
- package/dist/components/dialog/Dialog.js +133 -0
- package/dist/components/dialog/Dialog.module.js +21 -0
- package/dist/components/dialog/index.d.ts +2 -0
- package/dist/components/drawer/Drawer.css +482 -0
- package/dist/components/drawer/Drawer.d.ts +56 -0
- package/dist/components/drawer/Drawer.js +188 -0
- package/dist/components/drawer/Drawer.module.js +32 -0
- package/dist/components/drawer/index.d.ts +2 -0
- package/dist/components/editable/Editable.css +171 -0
- package/dist/components/editable/Editable.d.ts +17 -0
- package/dist/components/editable/Editable.js +106 -0
- package/dist/components/editable/Editable.module.js +13 -0
- package/dist/components/editable/index.d.ts +2 -0
- package/dist/components/empty/Empty.css +78 -0
- package/dist/components/empty/Empty.d.ts +11 -0
- package/dist/components/empty/Empty.js +77 -0
- package/dist/components/empty/Empty.module.js +12 -0
- package/dist/components/field/Field.css +113 -0
- package/dist/components/field/Field.d.ts +25 -0
- package/dist/components/field/Field.js +104 -0
- package/dist/components/field/Field.module.js +15 -0
- package/dist/components/field/index.d.ts +2 -0
- package/dist/components/fieldset/Fieldset.css +52 -0
- package/dist/components/fieldset/Fieldset.d.ts +12 -0
- package/dist/components/fieldset/Fieldset.js +56 -0
- package/dist/components/fieldset/Fieldset.module.js +10 -0
- package/dist/components/fieldset/index.d.ts +2 -0
- package/dist/components/file-upload/FileUpload.css +290 -0
- package/dist/components/file-upload/FileUpload.d.ts +28 -0
- package/dist/components/file-upload/FileUpload.js +149 -0
- package/dist/components/file-upload/FileUpload.module.js +19 -0
- package/dist/components/file-upload/index.d.ts +2 -0
- package/dist/components/floating-panel/FloatingPanel.css +319 -0
- package/dist/components/floating-panel/FloatingPanel.d.ts +45 -0
- package/dist/components/floating-panel/FloatingPanel.js +194 -0
- package/dist/components/floating-panel/FloatingPanel.module.js +20 -0
- package/dist/components/floating-panel/index.d.ts +2 -0
- package/dist/components/heading/Heading.css +58 -0
- package/dist/components/heading/Heading.d.ts +17 -0
- package/dist/components/heading/Heading.js +32 -0
- package/dist/components/heading/Heading.module.js +5 -0
- package/dist/components/highlight/Highlight.css +15 -0
- package/dist/components/highlight/Highlight.d.ts +13 -0
- package/dist/components/highlight/Highlight.js +18 -0
- package/dist/components/highlight/Highlight.module.js +5 -0
- package/dist/components/highlight/index.d.ts +2 -0
- package/dist/components/hover-card/HoverCard.css +107 -0
- package/dist/components/hover-card/HoverCard.d.ts +28 -0
- package/dist/components/hover-card/HoverCard.js +81 -0
- package/dist/components/hover-card/HoverCard.module.js +13 -0
- package/dist/components/hover-card/index.d.ts +2 -0
- package/dist/components/image-cropper/ImageCropper.css +147 -0
- package/dist/components/image-cropper/ImageCropper.d.ts +15 -0
- package/dist/components/image-cropper/ImageCropper.js +75 -0
- package/dist/components/image-cropper/ImageCropper.module.js +12 -0
- package/dist/components/image-cropper/index.d.ts +2 -0
- package/dist/components/input/Input.css +83 -0
- package/dist/components/input/Input.d.ts +15 -0
- package/dist/components/input/Input.js +22 -0
- package/dist/components/input/Input.module.js +5 -0
- package/dist/components/input/index.d.ts +2 -0
- package/dist/components/input-group/InputGroup.css +158 -0
- package/dist/components/input-group/InputGroup.d.ts +25 -0
- package/dist/components/input-group/InputGroup.js +76 -0
- package/dist/components/input-group/InputGroup.module.js +11 -0
- package/dist/components/input-group/index.d.ts +2 -0
- package/dist/components/kbd/Kbd.css +45 -0
- package/dist/components/kbd/Kbd.d.ts +7 -0
- package/dist/components/kbd/Kbd.js +33 -0
- package/dist/components/kbd/Kbd.module.js +8 -0
- package/dist/components/lightbox/Lightbox.css +242 -0
- package/dist/components/lightbox/Lightbox.d.ts +71 -0
- package/dist/components/lightbox/Lightbox.js +219 -0
- package/dist/components/lightbox/Lightbox.module.js +22 -0
- package/dist/components/lightbox/index.d.ts +2 -0
- package/dist/components/list/List.css +118 -0
- package/dist/components/list/List.d.ts +24 -0
- package/dist/components/list/List.js +48 -0
- package/dist/components/list/List.module.js +5 -0
- package/dist/components/list/index.d.ts +2 -0
- package/dist/components/listbox/Listbox.css +255 -0
- package/dist/components/listbox/Listbox.d.ts +35 -0
- package/dist/components/listbox/Listbox.js +145 -0
- package/dist/components/listbox/Listbox.module.js +20 -0
- package/dist/components/listbox/index.d.ts +2 -0
- package/dist/components/marquee/Marquee.css +114 -0
- package/dist/components/marquee/Marquee.d.ts +13 -0
- package/dist/components/marquee/Marquee.js +65 -0
- package/dist/components/marquee/Marquee.module.js +13 -0
- package/dist/components/marquee/index.d.ts +2 -0
- package/dist/components/menu/Menu.css +371 -0
- package/dist/components/menu/Menu.d.ts +83 -0
- package/dist/components/menu/Menu.js +240 -0
- package/dist/components/menu/Menu.module.js +33 -0
- package/dist/components/menu/index.d.ts +2 -0
- package/dist/components/native-select/NativeSelect.css +104 -0
- package/dist/components/native-select/NativeSelect.d.ts +8 -0
- package/dist/components/native-select/NativeSelect.js +32 -0
- package/dist/components/native-select/NativeSelect.module.js +9 -0
- package/dist/components/native-select/index.d.ts +2 -0
- package/dist/components/number-input/NumberInput.css +162 -0
- package/dist/components/number-input/NumberInput.d.ts +16 -0
- package/dist/components/number-input/NumberInput.js +95 -0
- package/dist/components/number-input/NumberInput.module.js +14 -0
- package/dist/components/number-input/index.d.ts +2 -0
- package/dist/components/pagination/Pagination.css +99 -0
- package/dist/components/pagination/Pagination.d.ts +16 -0
- package/dist/components/pagination/Pagination.js +101 -0
- package/dist/components/pagination/Pagination.module.js +12 -0
- package/dist/components/pagination/index.d.ts +2 -0
- package/dist/components/password-input/PasswordInput.css +155 -0
- package/dist/components/password-input/PasswordInput.d.ts +14 -0
- package/dist/components/password-input/PasswordInput.js +77 -0
- package/dist/components/password-input/PasswordInput.module.js +12 -0
- package/dist/components/password-input/index.d.ts +2 -0
- package/dist/components/pin-input/PinInput.css +96 -0
- package/dist/components/pin-input/PinInput.d.ts +23 -0
- package/dist/components/pin-input/PinInput.js +85 -0
- package/dist/components/pin-input/PinInput.module.js +11 -0
- package/dist/components/pin-input/index.d.ts +2 -0
- package/dist/components/popover/Popover.css +162 -0
- package/dist/components/popover/Popover.d.ts +50 -0
- package/dist/components/popover/Popover.js +167 -0
- package/dist/components/popover/Popover.module.js +20 -0
- package/dist/components/popover/index.d.ts +2 -0
- package/dist/components/progress-circular/ProgressCircular.css +68 -0
- package/dist/components/progress-circular/ProgressCircular.d.ts +15 -0
- package/dist/components/progress-circular/ProgressCircular.js +83 -0
- package/dist/components/progress-circular/ProgressCircular.module.js +14 -0
- package/dist/components/progress-circular/index.d.ts +2 -0
- package/dist/components/progress-linear/ProgressLinear.css +106 -0
- package/dist/components/progress-linear/ProgressLinear.d.ts +14 -0
- package/dist/components/progress-linear/ProgressLinear.js +74 -0
- package/dist/components/progress-linear/ProgressLinear.module.js +14 -0
- package/dist/components/progress-linear/index.d.ts +2 -0
- package/dist/components/qr-code/QrCode.css +100 -0
- package/dist/components/qr-code/QrCode.d.ts +13 -0
- package/dist/components/qr-code/QrCode.js +65 -0
- package/dist/components/qr-code/QrCode.module.js +11 -0
- package/dist/components/qr-code/index.d.ts +2 -0
- package/dist/components/radio-group/RadioGroup.css +147 -0
- package/dist/components/radio-group/RadioGroup.d.ts +20 -0
- package/dist/components/radio-group/RadioGroup.js +83 -0
- package/dist/components/radio-group/RadioGroup.module.js +12 -0
- package/dist/components/radio-group/index.d.ts +2 -0
- package/dist/components/rating-group/RatingGroup.css +133 -0
- package/dist/components/rating-group/RatingGroup.d.ts +23 -0
- package/dist/components/rating-group/RatingGroup.js +86 -0
- package/dist/components/rating-group/RatingGroup.module.js +13 -0
- package/dist/components/rating-group/index.d.ts +2 -0
- package/dist/components/scroll-area/ScrollArea.css +162 -0
- package/dist/components/scroll-area/ScrollArea.d.ts +21 -0
- package/dist/components/scroll-area/ScrollArea.js +76 -0
- package/dist/components/scroll-area/ScrollArea.module.js +12 -0
- package/dist/components/scroll-area/index.d.ts +2 -0
- package/dist/components/segment-group/SegmentGroup.css +120 -0
- package/dist/components/segment-group/SegmentGroup.d.ts +15 -0
- package/dist/components/segment-group/SegmentGroup.js +83 -0
- package/dist/components/segment-group/SegmentGroup.module.js +12 -0
- package/dist/components/segment-group/index.d.ts +2 -0
- package/dist/components/select/Select.css +351 -0
- package/dist/components/select/Select.d.ts +48 -0
- package/dist/components/select/Select.js +210 -0
- package/dist/components/select/Select.module.js +27 -0
- package/dist/components/select/index.d.ts +2 -0
- package/dist/components/separator/Separator.css +45 -0
- package/dist/components/separator/Separator.d.ts +14 -0
- package/dist/components/separator/Separator.js +27 -0
- package/dist/components/separator/Separator.module.js +5 -0
- package/dist/components/sidebar/Sidebar.css +341 -0
- package/dist/components/sidebar/Sidebar.d.ts +48 -0
- package/dist/components/sidebar/Sidebar.js +279 -0
- package/dist/components/sidebar/Sidebar.module.js +23 -0
- package/dist/components/sidebar/index.d.ts +2 -0
- package/dist/components/signature-pad/SignaturePad.css +123 -0
- package/dist/components/signature-pad/SignaturePad.d.ts +15 -0
- package/dist/components/signature-pad/SignaturePad.js +82 -0
- package/dist/components/signature-pad/SignaturePad.module.js +12 -0
- package/dist/components/signature-pad/index.d.ts +2 -0
- package/dist/components/simple-grid/SimpleGrid.d.ts +18 -0
- package/dist/components/simple-grid/SimpleGrid.js +32 -0
- package/dist/components/skeleton/Skeleton.css +29 -0
- package/dist/components/skeleton/Skeleton.d.ts +20 -0
- package/dist/components/skeleton/Skeleton.js +32 -0
- package/dist/components/skeleton/Skeleton.module.js +5 -0
- package/dist/components/slider/Slider.css +167 -0
- package/dist/components/slider/Slider.d.ts +19 -0
- package/dist/components/slider/Slider.js +119 -0
- package/dist/components/slider/Slider.module.js +16 -0
- package/dist/components/slider/index.d.ts +2 -0
- package/dist/components/spinner/Spinner.css +60 -0
- package/dist/components/spinner/Spinner.d.ts +12 -0
- package/dist/components/spinner/Spinner.js +40 -0
- package/dist/components/spinner/Spinner.module.js +9 -0
- package/dist/components/split-button/SplitButton.css +51 -0
- package/dist/components/split-button/SplitButton.d.ts +36 -0
- package/dist/components/split-button/SplitButton.js +93 -0
- package/dist/components/split-button/SplitButton.module.js +9 -0
- package/dist/components/split-button/index.d.ts +2 -0
- package/dist/components/splitter/Splitter.css +170 -0
- package/dist/components/splitter/Splitter.d.ts +12 -0
- package/dist/components/splitter/Splitter.js +68 -0
- package/dist/components/splitter/Splitter.module.js +10 -0
- package/dist/components/splitter/index.d.ts +2 -0
- package/dist/components/stack/Stack.css +13 -0
- package/dist/components/stack/Stack.d.ts +31 -0
- package/dist/components/stack/Stack.js +36 -0
- package/dist/components/stack/Stack.module.js +5 -0
- package/dist/components/stack/index.d.ts +2 -0
- package/dist/components/steps/Steps.css +283 -0
- package/dist/components/steps/Steps.d.ts +19 -0
- package/dist/components/steps/Steps.js +122 -0
- package/dist/components/steps/Steps.module.js +17 -0
- package/dist/components/steps/index.d.ts +2 -0
- package/dist/components/switch/Switch.css +130 -0
- package/dist/components/switch/Switch.d.ts +21 -0
- package/dist/components/switch/Switch.js +67 -0
- package/dist/components/switch/Switch.module.js +10 -0
- package/dist/components/switch/index.d.ts +2 -0
- package/dist/components/table/Table.css +162 -0
- package/dist/components/table/Table.d.ts +41 -0
- package/dist/components/table/Table.js +173 -0
- package/dist/components/table/Table.module.js +18 -0
- package/dist/components/tabs/Tabs.css +186 -0
- package/dist/components/tabs/Tabs.d.ts +20 -0
- package/dist/components/tabs/Tabs.js +67 -0
- package/dist/components/tabs/Tabs.module.js +11 -0
- package/dist/components/tabs/index.d.ts +2 -0
- package/dist/components/tag/Tag.css +128 -0
- package/dist/components/tag/Tag.d.ts +18 -0
- package/dist/components/tag/Tag.js +87 -0
- package/dist/components/tag/Tag.module.js +11 -0
- package/dist/components/tags-input/TagsInput.css +248 -0
- package/dist/components/tags-input/TagsInput.d.ts +20 -0
- package/dist/components/tags-input/TagsInput.js +139 -0
- package/dist/components/tags-input/TagsInput.module.js +16 -0
- package/dist/components/tags-input/index.d.ts +2 -0
- package/dist/components/text/Text.css +87 -0
- package/dist/components/text/Text.d.ts +27 -0
- package/dist/components/text/Text.js +43 -0
- package/dist/components/text/Text.module.js +5 -0
- package/dist/components/textarea/Textarea.css +55 -0
- package/dist/components/textarea/Textarea.d.ts +6 -0
- package/dist/components/textarea/Textarea.js +21 -0
- package/dist/components/textarea/Textarea.module.js +5 -0
- package/dist/components/textarea/index.d.ts +2 -0
- package/dist/components/timer/Timer.css +95 -0
- package/dist/components/timer/Timer.d.ts +14 -0
- package/dist/components/timer/Timer.js +74 -0
- package/dist/components/timer/Timer.module.js +12 -0
- package/dist/components/timer/index.d.ts +2 -0
- package/dist/components/toast/Toast.css +154 -0
- package/dist/components/toast/Toast.d.ts +17 -0
- package/dist/components/toast/Toast.js +92 -0
- package/dist/components/toast/Toast.module.js +12 -0
- package/dist/components/toast/index.d.ts +2 -0
- package/dist/components/toggle/Toggle.css +167 -0
- package/dist/components/toggle/Toggle.d.ts +16 -0
- package/dist/components/toggle/Toggle.js +31 -0
- package/dist/components/toggle/Toggle.module.js +8 -0
- package/dist/components/toggle/index.d.ts +2 -0
- package/dist/components/toggle-group/ToggleGroup.css +42 -0
- package/dist/components/toggle-group/ToggleGroup.d.ts +25 -0
- package/dist/components/toggle-group/ToggleGroup.js +62 -0
- package/dist/components/toggle-group/ToggleGroup.module.js +8 -0
- package/dist/components/toggle-group/index.d.ts +2 -0
- package/dist/components/tooltip/Tooltip.css +125 -0
- package/dist/components/tooltip/Tooltip.d.ts +28 -0
- package/dist/components/tooltip/Tooltip.js +75 -0
- package/dist/components/tooltip/Tooltip.module.js +13 -0
- package/dist/components/tooltip/index.d.ts +2 -0
- package/dist/components/tour/Tour.css +286 -0
- package/dist/components/tour/Tour.d.ts +30 -0
- package/dist/components/tour/Tour.js +149 -0
- package/dist/components/tour/Tour.module.js +23 -0
- package/dist/components/tour/index.d.ts +2 -0
- package/dist/components/tree-view/TreeView.css +261 -0
- package/dist/components/tree-view/TreeView.d.ts +32 -0
- package/dist/components/tree-view/TreeView.js +171 -0
- package/dist/components/tree-view/TreeView.module.js +26 -0
- package/dist/components/tree-view/index.d.ts +2 -0
- package/dist/index.d.ts +83 -0
- package/dist/index.js +83 -0
- package/dist/lib/moduix/icons/ui/Icons.d.ts +51 -0
- package/dist/lib/moduix/icons/ui/Icons.js +759 -0
- package/dist/lib/moduix/icons/ui/index.d.ts +2 -0
- package/dist/lib/moduix/normalizeClassName.js +4 -0
- package/dist/lib/moduix/overlayPortal.d.ts +9 -0
- package/dist/lib/moduix/overlayPortal.js +21 -0
- package/dist/lib/moduix/styles/reset.css +175 -0
- package/dist/lib/moduix/styles/style.css +288 -0
- package/dist/reset.d.ts +1 -0
- package/dist/reset.js +1 -0
- package/dist/style.d.ts +1 -0
- package/dist/style.js +1 -0
- package/package.json +76 -0
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
@layer ui.components {
|
|
2
|
+
.m4smHW_root {
|
|
3
|
+
box-sizing: border-box;
|
|
4
|
+
width: var(--input-width, 100%);
|
|
5
|
+
max-width: var(--input-max-width, none);
|
|
6
|
+
min-height: var(--input-height, var(--input-height-md, var(--size-lg)));
|
|
7
|
+
border: var(--input-border-width, var(--border-width-sm)) var(--input-border-style, solid)
|
|
8
|
+
var(--input-border-color, var(--color-border));
|
|
9
|
+
border-radius: var(--input-radius, var(--radius-md));
|
|
10
|
+
padding: var(--input-padding-y, var(--input-padding-y-md, var(--spacing-2)))
|
|
11
|
+
var(--input-padding-x, var(--input-padding-x-md, var(--spacing-3)));
|
|
12
|
+
background-color: var(--input-bg, var(--color-background));
|
|
13
|
+
color: var(--input-color, var(--color-foreground));
|
|
14
|
+
font: inherit;
|
|
15
|
+
font-size: var(--input-font-size, var(--input-font-size-md, var(--text-md)));
|
|
16
|
+
line-height: var(--input-line-height, var(--input-line-height-md, var(--line-height-text-md)));
|
|
17
|
+
outline: var(--input-focus-ring-width, var(--input-border-width, var(--border-width-sm))) solid
|
|
18
|
+
transparent;
|
|
19
|
+
outline-offset: var(--input-focus-ring-offset, calc(0px - var(--input-border-width, var(--border-width-sm))));
|
|
20
|
+
transition: border-color var(--input-transition, var(--transition-default)),
|
|
21
|
+
outline-color var(--input-transition, var(--transition-default)),
|
|
22
|
+
opacity var(--input-transition, var(--transition-default));
|
|
23
|
+
margin: 0;
|
|
24
|
+
|
|
25
|
+
&::placeholder {
|
|
26
|
+
color: var(--input-placeholder-color, var(--color-muted-foreground));
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&:focus-visible {
|
|
30
|
+
outline-color: var(--input-focus-ring-color, var(--color-ring));
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&:is([data-invalid], [aria-invalid="true"]) {
|
|
34
|
+
border-color: var(--input-border-color-invalid, var(--color-destructive));
|
|
35
|
+
|
|
36
|
+
&:focus-visible {
|
|
37
|
+
outline-color: var(--input-border-color-invalid, var(--color-destructive));
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&:is([data-disabled], :disabled) {
|
|
42
|
+
pointer-events: none;
|
|
43
|
+
opacity: var(--input-disabled-opacity, var(--opacity-disabled));
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&:is(:read-only, [data-readonly]) {
|
|
47
|
+
background-color: var(--input-readonly-bg, var(--input-bg, var(--color-background)));
|
|
48
|
+
color: var(--input-readonly-color, var(--input-color, var(--color-foreground)));
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&[data-size="xs"] {
|
|
52
|
+
--input-height: var(--input-height-xs, var(--size-xs));
|
|
53
|
+
--input-padding-x: var(--input-padding-x-xs, var(--spacing-2));
|
|
54
|
+
--input-padding-y: var(--input-padding-y-xs, var(--spacing-1));
|
|
55
|
+
--input-font-size: var(--input-font-size-xs, var(--text-xs));
|
|
56
|
+
--input-line-height: var(--input-line-height-xs, var(--line-height-text-xs));
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&[data-size="sm"] {
|
|
60
|
+
--input-height: var(--input-height-sm, var(--size-sm));
|
|
61
|
+
--input-padding-x: var(--input-padding-x-sm, var(--spacing-2));
|
|
62
|
+
--input-padding-y: var(--input-padding-y-sm, var(--spacing-1));
|
|
63
|
+
--input-font-size: var(--input-font-size-sm, var(--text-sm));
|
|
64
|
+
--input-line-height: var(--input-line-height-sm, var(--line-height-text-sm));
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&[data-size="lg"] {
|
|
68
|
+
--input-height: var(--input-height-lg, var(--size-xl));
|
|
69
|
+
--input-padding-x: var(--input-padding-x-lg, var(--spacing-4));
|
|
70
|
+
--input-padding-y: var(--input-padding-y-lg, var(--spacing-2));
|
|
71
|
+
--input-font-size: var(--input-font-size-lg, var(--text-lg));
|
|
72
|
+
--input-line-height: var(--input-line-height-lg, var(--line-height-text-lg));
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&[data-size="xl"] {
|
|
76
|
+
--input-height: var(--input-height-xl, 3.5rem);
|
|
77
|
+
--input-padding-x: var(--input-padding-x-xl, var(--spacing-4));
|
|
78
|
+
--input-padding-y: var(--input-padding-y-xl, var(--spacing-3));
|
|
79
|
+
--input-font-size: var(--input-font-size-xl, var(--text-lg));
|
|
80
|
+
--input-line-height: var(--input-line-height-xl, var(--line-height-text-lg));
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ComponentProps } from "react";
|
|
2
|
+
import { Field } from "@ark-ui/react/field";
|
|
3
|
+
|
|
4
|
+
//#region src/components/input/Input.d.ts
|
|
5
|
+
declare const Input: import("react").ForwardRefExoticComponent<Omit<Omit<Field.InputProps & import("react").RefAttributes<HTMLInputElement>, "size"> & {
|
|
6
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl";
|
|
7
|
+
htmlSize?: ComponentProps<"input">["size"];
|
|
8
|
+
}, "ref"> & import("react").RefAttributes<HTMLInputElement>> & {
|
|
9
|
+
Root: import("react").ForwardRefExoticComponent<Omit<Omit<Field.InputProps & import("react").RefAttributes<HTMLInputElement>, "size"> & {
|
|
10
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl";
|
|
11
|
+
htmlSize?: ComponentProps<"input">["size"];
|
|
12
|
+
}, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
|
|
13
|
+
};
|
|
14
|
+
//#endregion
|
|
15
|
+
export { Input };
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
|
|
2
|
+
import Input_module_default from "./Input.module.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { clsx } from "clsx";
|
|
5
|
+
import { forwardRef } from "react";
|
|
6
|
+
import { Field } from "@ark-ui/react/field";
|
|
7
|
+
//#region src/components/input/Input.tsx
|
|
8
|
+
const InputRoot = forwardRef(function InputRoot({ className, size = "md", htmlSize, ...props }, ref) {
|
|
9
|
+
return /* @__PURE__ */ jsx(Field.Input, {
|
|
10
|
+
ref,
|
|
11
|
+
"data-scope": "field",
|
|
12
|
+
"data-part": "input",
|
|
13
|
+
"data-slot": "input-root",
|
|
14
|
+
"data-size": size,
|
|
15
|
+
className: clsx(Input_module_default.root, normalizeClassName(className)),
|
|
16
|
+
size: htmlSize,
|
|
17
|
+
...props
|
|
18
|
+
});
|
|
19
|
+
});
|
|
20
|
+
const Input = Object.assign(InputRoot, { Root: InputRoot });
|
|
21
|
+
//#endregion
|
|
22
|
+
export { Input };
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
@layer ui.components {
|
|
2
|
+
.nnf1CW_root {
|
|
3
|
+
box-sizing: border-box;
|
|
4
|
+
width: var(--input-group-width, 100%);
|
|
5
|
+
max-width: var(--input-group-max-width, none);
|
|
6
|
+
min-height: var(--input-group-height, var(--input-group-height-md, var(--size-lg)));
|
|
7
|
+
border: var(--input-group-border-width, var(--border-width-sm))
|
|
8
|
+
var(--input-group-border-style, solid) var(--input-group-border-color, var(--color-border));
|
|
9
|
+
border-radius: var(--input-group-radius, var(--radius-md));
|
|
10
|
+
background-color: var(--input-group-bg, var(--color-background));
|
|
11
|
+
color: var(--input-group-color, var(--color-foreground));
|
|
12
|
+
outline: var(--input-group-focus-ring-width, var(--input-group-border-width, var(--border-width-sm)))
|
|
13
|
+
solid transparent;
|
|
14
|
+
outline-offset: var(--input-group-focus-ring-offset, -1px);
|
|
15
|
+
transition: border-color var(--input-group-transition, var(--transition-default)),
|
|
16
|
+
outline-color var(--input-group-transition, var(--transition-default)),
|
|
17
|
+
opacity var(--input-group-transition, var(--transition-default));
|
|
18
|
+
align-items: stretch;
|
|
19
|
+
display: flex;
|
|
20
|
+
overflow: hidden;
|
|
21
|
+
|
|
22
|
+
&:focus-within {
|
|
23
|
+
outline-color: var(--input-group-focus-ring-color, var(--color-ring));
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
&:has([data-slot="input-group-input"][data-invalid], [data-slot="input-group-input"][aria-invalid="true"]) {
|
|
27
|
+
border-color: var(--input-group-border-color-invalid, var(--color-destructive));
|
|
28
|
+
|
|
29
|
+
&:focus-within {
|
|
30
|
+
outline-color: var(--input-group-border-color-invalid, var(--color-destructive));
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
&:has([data-slot="input-group-input"][data-disabled], [data-slot="input-group-input"]:disabled) {
|
|
35
|
+
opacity: var(--input-group-disabled-opacity, var(--opacity-disabled));
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&:has([data-slot="input-group-input"][data-readonly], [data-slot="input-group-input"]:read-only) {
|
|
39
|
+
border-color: var(--input-group-readonly-border-color, var(--input-group-border-color, var(--color-border)));
|
|
40
|
+
background-color: var(--input-group-readonly-bg, var(--input-group-bg, var(--color-background)));
|
|
41
|
+
color: var(--input-group-readonly-color, var(--input-group-color, var(--color-foreground)));
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&[data-size="xs"] {
|
|
45
|
+
--input-group-height: var(--input-group-height-xs, var(--size-sm));
|
|
46
|
+
--input-group-addon-padding-x: var(--input-group-addon-padding-x-xs, .625rem);
|
|
47
|
+
--input-group-font-size: var(--input-group-font-size-xs, var(--text-xs));
|
|
48
|
+
--input-group-line-height: var(--input-group-line-height-xs, var(--line-height-text-xs));
|
|
49
|
+
--input-group-input-padding-x: var(--input-group-input-padding-x-xs, .625rem);
|
|
50
|
+
--input-group-input-padding-y: var(--input-group-input-padding-y-xs, .25rem);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
&[data-size="sm"] {
|
|
54
|
+
--input-group-height: var(--input-group-height-sm, 2rem);
|
|
55
|
+
--input-group-addon-padding-x: var(--input-group-addon-padding-x-sm, .75rem);
|
|
56
|
+
--input-group-font-size: var(--input-group-font-size-sm, var(--text-sm));
|
|
57
|
+
--input-group-line-height: var(--input-group-line-height-sm, var(--line-height-text-sm));
|
|
58
|
+
--input-group-input-padding-x: var(--input-group-input-padding-x-sm, .75rem);
|
|
59
|
+
--input-group-input-padding-y: var(--input-group-input-padding-y-sm, .3125rem);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&[data-size="md"] {
|
|
63
|
+
--input-group-height: var(--input-group-height-md, var(--size-lg));
|
|
64
|
+
--input-group-addon-padding-x: var(--input-group-addon-padding-x-md, .875rem);
|
|
65
|
+
--input-group-font-size: var(--input-group-font-size-md, var(--text-md));
|
|
66
|
+
--input-group-line-height: var(--input-group-line-height-md, var(--line-height-text-md));
|
|
67
|
+
--input-group-input-padding-x: var(--input-group-input-padding-x-md, .875rem);
|
|
68
|
+
--input-group-input-padding-y: var(--input-group-input-padding-y-md, .5rem);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&[data-size="lg"] {
|
|
72
|
+
--input-group-height: var(--input-group-height-lg, var(--size-xl));
|
|
73
|
+
--input-group-addon-padding-x: var(--input-group-addon-padding-x-lg, 1rem);
|
|
74
|
+
--input-group-font-size: var(--input-group-font-size-lg, var(--text-lg));
|
|
75
|
+
--input-group-line-height: var(--input-group-line-height-lg, var(--line-height-text-lg));
|
|
76
|
+
--input-group-input-padding-x: var(--input-group-input-padding-x-lg, 1rem);
|
|
77
|
+
--input-group-input-padding-y: var(--input-group-input-padding-y-lg, .625rem);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&[data-size="xl"] {
|
|
81
|
+
--input-group-height: var(--input-group-height-xl, 3rem);
|
|
82
|
+
--input-group-addon-padding-x: var(--input-group-addon-padding-x-xl, 1.125rem);
|
|
83
|
+
--input-group-font-size: var(--input-group-font-size-xl, var(--text-lg));
|
|
84
|
+
--input-group-line-height: var(--input-group-line-height-xl, var(--line-height-text-lg));
|
|
85
|
+
--input-group-input-padding-x: var(--input-group-input-padding-x-xl, 1.125rem);
|
|
86
|
+
--input-group-input-padding-y: var(--input-group-input-padding-y-xl, .75rem);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.nnf1CW_input {
|
|
91
|
+
min-width: 0;
|
|
92
|
+
min-height: 0;
|
|
93
|
+
font-size: var(--input-group-font-size, var(--text-md));
|
|
94
|
+
line-height: var(--input-group-line-height, var(--line-height-text-md));
|
|
95
|
+
padding-block: var(--input-group-input-padding-y, .5rem);
|
|
96
|
+
padding-inline: var(--input-group-input-padding-x, .875rem);
|
|
97
|
+
background-color: #0000;
|
|
98
|
+
border: 0;
|
|
99
|
+
border-radius: 0;
|
|
100
|
+
outline: 0;
|
|
101
|
+
flex: auto;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.nnf1CW_addon, .nnf1CW_text {
|
|
105
|
+
box-sizing: border-box;
|
|
106
|
+
justify-content: center;
|
|
107
|
+
align-items: center;
|
|
108
|
+
gap: var(--input-group-addon-gap, var(--spacing-2));
|
|
109
|
+
min-width: max-content;
|
|
110
|
+
padding-inline: var(--input-group-addon-padding-x, .875rem);
|
|
111
|
+
background-color: var(--input-group-addon-bg, var(--color-muted));
|
|
112
|
+
color: var(--input-group-addon-color, var(--color-muted-foreground));
|
|
113
|
+
font-size: var(--input-group-font-size, var(--text-md));
|
|
114
|
+
line-height: var(--input-group-line-height, var(--line-height-text-md));
|
|
115
|
+
white-space: nowrap;
|
|
116
|
+
display: inline-flex;
|
|
117
|
+
|
|
118
|
+
& > svg {
|
|
119
|
+
width: var(--input-group-icon-size, 1rem);
|
|
120
|
+
height: var(--input-group-icon-size, 1rem);
|
|
121
|
+
flex-shrink: 0;
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.nnf1CW_addon {
|
|
126
|
+
border-inline: var(--input-group-separator-width, var(--border-width-sm)) solid
|
|
127
|
+
var(--input-group-separator-color, var(--color-border));
|
|
128
|
+
|
|
129
|
+
&:first-child {
|
|
130
|
+
border-inline-start: 0;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
&:last-child {
|
|
134
|
+
border-inline-end: 0;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.nnf1CW_text {
|
|
139
|
+
background-color: #0000;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.nnf1CW_button {
|
|
143
|
+
height: auto;
|
|
144
|
+
min-height: auto;
|
|
145
|
+
padding-block: 0;
|
|
146
|
+
padding-inline: var(--input-group-addon-padding-x, .875rem);
|
|
147
|
+
color: var(--input-group-button-color, var(--color-foreground));
|
|
148
|
+
font-size: var(--input-group-font-size, var(--text-sm));
|
|
149
|
+
line-height: var(--input-group-line-height, var(--line-height-text-sm));
|
|
150
|
+
border: 0;
|
|
151
|
+
border-radius: 0;
|
|
152
|
+
align-self: stretch;
|
|
153
|
+
|
|
154
|
+
&:focus-visible {
|
|
155
|
+
outline-offset: var(--input-group-button-focus-ring-offset, -1px);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Input } from "../input/Input.js";
|
|
2
|
+
import { ComponentProps } from "react";
|
|
3
|
+
|
|
4
|
+
//#region src/components/input-group/InputGroup.d.ts
|
|
5
|
+
type InputGroupSize = NonNullable<ComponentProps<typeof Input>['size']>;
|
|
6
|
+
declare const InputGroup: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
|
|
7
|
+
size?: InputGroupSize;
|
|
8
|
+
} & import("react").RefAttributes<HTMLDivElement>> & {
|
|
9
|
+
Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
|
|
10
|
+
size?: InputGroupSize;
|
|
11
|
+
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
12
|
+
Input: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("@ark-ui/react/field").FieldInputProps & import("react").RefAttributes<HTMLInputElement>, "size"> & {
|
|
13
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl";
|
|
14
|
+
htmlSize?: ComponentProps<"input">["size"];
|
|
15
|
+
}, "ref"> & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
|
|
16
|
+
Addon: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
|
|
17
|
+
Text: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLSpanElement>>;
|
|
18
|
+
Button: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & {
|
|
19
|
+
variant?: "default" | "outline" | "secondary" | "destructive" | "destructive-outline" | "ghost" | "link";
|
|
20
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg";
|
|
21
|
+
'data-slot'?: string;
|
|
22
|
+
} & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
23
|
+
};
|
|
24
|
+
//#endregion
|
|
25
|
+
export { InputGroup };
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
|
|
2
|
+
import { Button } from "../button/Button.js";
|
|
3
|
+
import { Input } from "../input/Input.js";
|
|
4
|
+
import InputGroup_module_default from "./InputGroup.module.js";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
import { ark } from "@ark-ui/react/factory";
|
|
7
|
+
import { clsx } from "clsx";
|
|
8
|
+
import { createContext, forwardRef, useContext } from "react";
|
|
9
|
+
//#region src/components/input-group/InputGroup.tsx
|
|
10
|
+
const InputGroupSizeContext = createContext("md");
|
|
11
|
+
const InputGroupRoot = forwardRef(function InputGroupRoot({ children, className, size = "md", ...props }, ref) {
|
|
12
|
+
return /* @__PURE__ */ jsx(InputGroupSizeContext.Provider, {
|
|
13
|
+
value: size,
|
|
14
|
+
children: /* @__PURE__ */ jsx(ark.div, {
|
|
15
|
+
ref,
|
|
16
|
+
"data-scope": "input-group",
|
|
17
|
+
"data-part": "root",
|
|
18
|
+
"data-slot": "input-group-root",
|
|
19
|
+
"data-size": size,
|
|
20
|
+
className: clsx(InputGroup_module_default.root, normalizeClassName(className)),
|
|
21
|
+
...props,
|
|
22
|
+
children
|
|
23
|
+
})
|
|
24
|
+
});
|
|
25
|
+
});
|
|
26
|
+
const InputGroupInput = forwardRef(function InputGroupInput({ className, size, ...props }, ref) {
|
|
27
|
+
const groupSize = useContext(InputGroupSizeContext);
|
|
28
|
+
return /* @__PURE__ */ jsx(Input, {
|
|
29
|
+
ref,
|
|
30
|
+
"data-slot": "input-group-input",
|
|
31
|
+
className: clsx(InputGroup_module_default.input, normalizeClassName(className)),
|
|
32
|
+
size: size ?? groupSize,
|
|
33
|
+
...props
|
|
34
|
+
});
|
|
35
|
+
});
|
|
36
|
+
const InputGroupAddon = forwardRef(function InputGroupAddon({ className, ...props }, ref) {
|
|
37
|
+
return /* @__PURE__ */ jsx(ark.span, {
|
|
38
|
+
ref,
|
|
39
|
+
"data-scope": "input-group",
|
|
40
|
+
"data-part": "addon",
|
|
41
|
+
"data-slot": "input-group-addon",
|
|
42
|
+
className: clsx(InputGroup_module_default.addon, normalizeClassName(className)),
|
|
43
|
+
...props
|
|
44
|
+
});
|
|
45
|
+
});
|
|
46
|
+
const InputGroupText = forwardRef(function InputGroupText({ className, ...props }, ref) {
|
|
47
|
+
return /* @__PURE__ */ jsx(ark.span, {
|
|
48
|
+
ref,
|
|
49
|
+
"data-scope": "input-group",
|
|
50
|
+
"data-part": "text",
|
|
51
|
+
"data-slot": "input-group-text",
|
|
52
|
+
className: clsx(InputGroup_module_default.text, normalizeClassName(className)),
|
|
53
|
+
...props
|
|
54
|
+
});
|
|
55
|
+
});
|
|
56
|
+
const InputGroupButton = forwardRef(function InputGroupButton({ className, variant = "ghost", size, type = "button", ...props }, ref) {
|
|
57
|
+
const groupSize = useContext(InputGroupSizeContext);
|
|
58
|
+
return /* @__PURE__ */ jsx(Button, {
|
|
59
|
+
ref,
|
|
60
|
+
"data-slot": "input-group-button",
|
|
61
|
+
className: clsx(InputGroup_module_default.button, normalizeClassName(className)),
|
|
62
|
+
variant,
|
|
63
|
+
size: size ?? groupSize,
|
|
64
|
+
type,
|
|
65
|
+
...props
|
|
66
|
+
});
|
|
67
|
+
});
|
|
68
|
+
const InputGroup = Object.assign(InputGroupRoot, {
|
|
69
|
+
Root: InputGroupRoot,
|
|
70
|
+
Input: InputGroupInput,
|
|
71
|
+
Addon: InputGroupAddon,
|
|
72
|
+
Text: InputGroupText,
|
|
73
|
+
Button: InputGroupButton
|
|
74
|
+
});
|
|
75
|
+
//#endregion
|
|
76
|
+
export { InputGroup };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import './InputGroup.css';
|
|
2
|
+
//#region src/components/input-group/InputGroup.module.css
|
|
3
|
+
var InputGroup_module_default = {
|
|
4
|
+
"addon": "nnf1CW_addon",
|
|
5
|
+
"button": "nnf1CW_button",
|
|
6
|
+
"input": "nnf1CW_input",
|
|
7
|
+
"root": "nnf1CW_root",
|
|
8
|
+
"text": "nnf1CW_text"
|
|
9
|
+
};
|
|
10
|
+
//#endregion
|
|
11
|
+
export { InputGroup_module_default as default };
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
@layer ui.components {
|
|
2
|
+
.-gSPbW_root[data-scope="kbd"][data-part="root"] {
|
|
3
|
+
box-sizing: border-box;
|
|
4
|
+
min-width: var(--kbd-min-width, var(--kbd-height, 1.5rem));
|
|
5
|
+
max-width: 100%;
|
|
6
|
+
height: var(--kbd-height, 1.5rem);
|
|
7
|
+
border: var(--kbd-border-width, var(--border-width-sm)) solid
|
|
8
|
+
var(--kbd-border-color, var(--color-border));
|
|
9
|
+
border-radius: var(--kbd-radius, var(--radius-sm));
|
|
10
|
+
padding: var(--kbd-padding-y, 0) var(--kbd-padding-x, var(--spacing-2));
|
|
11
|
+
background-color: var(--kbd-bg, var(--color-muted));
|
|
12
|
+
box-shadow: var(--kbd-shadow, inset 0 -1px 0 color-mix(in oklab, var(--color-foreground) 12%, transparent));
|
|
13
|
+
color: var(--kbd-color, var(--color-foreground));
|
|
14
|
+
font-family: var(--kbd-font-family, var(--font-mono)), monospace;
|
|
15
|
+
font-size: var(--kbd-font-size, var(--text-xs));
|
|
16
|
+
font-weight: var(--kbd-font-weight, var(--weight-medium));
|
|
17
|
+
line-height: var(--kbd-line-height, var(--line-height-text-xs));
|
|
18
|
+
font-variant-numeric: tabular-nums;
|
|
19
|
+
text-align: center;
|
|
20
|
+
vertical-align: middle;
|
|
21
|
+
white-space: nowrap;
|
|
22
|
+
user-select: none;
|
|
23
|
+
flex: none;
|
|
24
|
+
justify-content: center;
|
|
25
|
+
align-items: center;
|
|
26
|
+
display: inline-flex;
|
|
27
|
+
overflow: hidden;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.-gSPbW_group[data-scope="kbd"][data-part="group"] {
|
|
31
|
+
box-sizing: border-box;
|
|
32
|
+
align-items: center;
|
|
33
|
+
gap: var(--kbd-group-gap, var(--spacing-1));
|
|
34
|
+
max-width: 100%;
|
|
35
|
+
box-shadow: none;
|
|
36
|
+
color: var(--kbd-group-separator-color, var(--color-muted-foreground));
|
|
37
|
+
font: inherit;
|
|
38
|
+
vertical-align: middle;
|
|
39
|
+
white-space: nowrap;
|
|
40
|
+
background: none;
|
|
41
|
+
border: 0;
|
|
42
|
+
padding: 0;
|
|
43
|
+
display: inline-flex;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
//#region src/components/kbd/Kbd.d.ts
|
|
2
|
+
declare const Kbd: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>> & {
|
|
3
|
+
Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
|
|
4
|
+
Group: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react/factory").PolymorphicProps & import("react").RefAttributes<HTMLElement>>;
|
|
5
|
+
};
|
|
6
|
+
//#endregion
|
|
7
|
+
export { Kbd };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
|
|
2
|
+
import Kbd_module_default from "./Kbd.module.js";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { ark } from "@ark-ui/react/factory";
|
|
5
|
+
import { clsx } from "clsx";
|
|
6
|
+
import { forwardRef } from "react";
|
|
7
|
+
//#region src/components/kbd/Kbd.tsx
|
|
8
|
+
const KbdRoot = forwardRef(function KbdRoot({ className, ...props }, ref) {
|
|
9
|
+
return /* @__PURE__ */ jsx(ark.kbd, {
|
|
10
|
+
ref,
|
|
11
|
+
"data-scope": "kbd",
|
|
12
|
+
"data-part": "root",
|
|
13
|
+
"data-slot": "kbd-root",
|
|
14
|
+
className: clsx(Kbd_module_default.root, normalizeClassName(className)),
|
|
15
|
+
...props
|
|
16
|
+
});
|
|
17
|
+
});
|
|
18
|
+
const KbdGroupPart = forwardRef(function KbdGroupPart({ className, ...props }, ref) {
|
|
19
|
+
return /* @__PURE__ */ jsx(ark.kbd, {
|
|
20
|
+
ref,
|
|
21
|
+
"data-scope": "kbd",
|
|
22
|
+
"data-part": "group",
|
|
23
|
+
"data-slot": "kbd-group",
|
|
24
|
+
className: clsx(Kbd_module_default.group, normalizeClassName(className)),
|
|
25
|
+
...props
|
|
26
|
+
});
|
|
27
|
+
});
|
|
28
|
+
const Kbd = Object.assign(KbdRoot, {
|
|
29
|
+
Root: KbdRoot,
|
|
30
|
+
Group: KbdGroupPart
|
|
31
|
+
});
|
|
32
|
+
//#endregion
|
|
33
|
+
export { Kbd };
|