@mks2508/mks-ui 0.5.7 → 0.5.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/react-ui/primitives/waapi/Gooey/Gooey.types.d.ts +2 -0
- package/dist/react-ui/primitives/waapi/Gooey/Gooey.types.d.ts.map +1 -1
- package/dist/react-ui/primitives/waapi/Gooey/GooeyCanvas.d.ts +1 -1
- package/dist/react-ui/primitives/waapi/Gooey/GooeyCanvas.d.ts.map +1 -1
- package/dist/react-ui/primitives/waapi/Gooey/GooeyCanvas.js +173 -43
- package/dist/react-ui/ui/DynamicToggle/{DynamicToggle-DOR3Ld-k.css → DynamicToggle-DJLwEkHr.css} +12 -19
- package/dist/react-ui/ui/DynamicToggle/DynamicToggle.css +12 -20
- package/dist/react-ui/ui/DynamicToggle/DynamicToggle.styles.d.ts +1 -0
- package/dist/react-ui/ui/DynamicToggle/DynamicToggle.styles.d.ts.map +1 -1
- package/dist/react-ui/ui/DynamicToggle/DynamicToggle.styles.js +7 -1
- package/dist/react-ui/ui/DynamicToggle/DynamicToggle.types.d.ts +55 -31
- package/dist/react-ui/ui/DynamicToggle/DynamicToggle.types.d.ts.map +1 -1
- package/dist/react-ui/ui/DynamicToggle/index.d.ts +9 -3
- package/dist/react-ui/ui/DynamicToggle/index.d.ts.map +1 -1
- package/dist/react-ui/ui/DynamicToggle/index.js +47 -34
- package/package.json +52 -13
- package/src/assets/react.svg +0 -1
- package/src/core/index.ts +0 -7
- package/src/core/types.ts +0 -82
- package/src/css.d.ts +0 -7
- package/src/index.css +0 -129
- package/src/index.ts +0 -29
- package/src/react-ui/blocks/Terminal/ResttyAdapter.ts +0 -278
- package/src/react-ui/blocks/Terminal/Terminal.adapter.ts +0 -97
- package/src/react-ui/blocks/Terminal/Terminal.theme.restty.ts +0 -155
- package/src/react-ui/blocks/Terminal/Terminal.theme.ts +0 -80
- package/src/react-ui/blocks/Terminal/Terminal.types.ts +0 -438
- package/src/react-ui/blocks/Terminal/TerminalDisplay.styles.ts +0 -38
- package/src/react-ui/blocks/Terminal/TerminalDisplay.tsx +0 -254
- package/src/react-ui/blocks/Terminal/TerminalDisplay.types.ts +0 -73
- package/src/react-ui/blocks/Terminal/TerminalPanel.tsx +0 -269
- package/src/react-ui/blocks/Terminal/TerminalRestty.tsx +0 -326
- package/src/react-ui/blocks/Terminal/TerminalXterm.tsx +0 -230
- package/src/react-ui/blocks/Terminal/XTermAdapter.ts +0 -163
- package/src/react-ui/blocks/Terminal/chrome.ts +0 -25
- package/src/react-ui/blocks/Terminal/components/LogLineBadges.tsx +0 -316
- package/src/react-ui/blocks/Terminal/components/SpecializedSyntaxHighlighter.tsx +0 -218
- package/src/react-ui/blocks/Terminal/components/SyntaxHighlight.tsx +0 -386
- package/src/react-ui/blocks/Terminal/components/TerminalLogBadge.tsx +0 -67
- package/src/react-ui/blocks/Terminal/components/index.ts +0 -10
- package/src/react-ui/blocks/Terminal/display.ts +0 -46
- package/src/react-ui/blocks/Terminal/hooks/index.ts +0 -22
- package/src/react-ui/blocks/Terminal/hooks/useTerminalSettings.ts +0 -229
- package/src/react-ui/blocks/Terminal/hooks/useTerminalWebSocket.ts +0 -292
- package/src/react-ui/blocks/Terminal/index.ts +0 -111
- package/src/react-ui/blocks/Terminal/panel/LogLinesViewer.tsx +0 -330
- package/src/react-ui/blocks/Terminal/panel/TerminalDebugPanel.tsx +0 -242
- package/src/react-ui/blocks/Terminal/panel/TerminalFilterDropdown.tsx +0 -202
- package/src/react-ui/blocks/Terminal/panel/TerminalFilterTabs.tsx +0 -140
- package/src/react-ui/blocks/Terminal/panel/TerminalInteractivePanel.tsx +0 -68
- package/src/react-ui/blocks/Terminal/panel/TerminalInteractivePanel.types.ts +0 -85
- package/src/react-ui/blocks/Terminal/panel/TerminalInteractivePanelRestty.tsx +0 -383
- package/src/react-ui/blocks/Terminal/panel/TerminalInteractivePanelXterm.tsx +0 -439
- package/src/react-ui/blocks/Terminal/panel/TerminalLogsPanel.tsx +0 -550
- package/src/react-ui/blocks/Terminal/panel/TerminalLogsPanel.types.ts +0 -259
- package/src/react-ui/blocks/Terminal/panel/TerminalPanelChrome.styles.ts +0 -75
- package/src/react-ui/blocks/Terminal/panel/TerminalPanelChrome.tsx +0 -266
- package/src/react-ui/blocks/Terminal/panel/TerminalPanelChrome.types.ts +0 -82
- package/src/react-ui/blocks/Terminal/panel/TerminalPanelFooter.tsx +0 -112
- package/src/react-ui/blocks/Terminal/panel/TerminalPanelHeader.tsx +0 -178
- package/src/react-ui/blocks/Terminal/panel/TerminalPanelToolbar.tsx +0 -203
- package/src/react-ui/blocks/Terminal/panel/TerminalSessionControl.tsx +0 -252
- package/src/react-ui/blocks/Terminal/panel/TerminalSessionTabs.tsx +0 -334
- package/src/react-ui/blocks/Terminal/panel/TerminalSettingsPopover.tsx +0 -261
- package/src/react-ui/blocks/Terminal/panel/TerminalThemeSelector.tsx +0 -248
- package/src/react-ui/blocks/Terminal/panel/index.ts +0 -72
- package/src/react-ui/blocks/Terminal/panel/terminal-filter-dropdown.module.css +0 -59
- package/src/react-ui/blocks/Terminal/panel/terminal-session-tabs.module.css +0 -59
- package/src/react-ui/blocks/Terminal/parsing/BadgeFormatter.ts +0 -180
- package/src/react-ui/blocks/Terminal/parsing/HttpLogParser.ts +0 -248
- package/src/react-ui/blocks/Terminal/parsing/LogParser.types.ts +0 -283
- package/src/react-ui/blocks/Terminal/parsing/LogParserService.ts +0 -686
- package/src/react-ui/blocks/Terminal/parsing/MultilineAggregator.ts +0 -466
- package/src/react-ui/blocks/Terminal/parsing/PersistentLogBuffer.ts +0 -343
- package/src/react-ui/blocks/Terminal/parsing/SyntaxHighlighter.ts +0 -167
- package/src/react-ui/blocks/Terminal/parsing/TableParser.ts +0 -348
- package/src/react-ui/blocks/Terminal/parsing/ansi/AnsiColorMapper.ts +0 -251
- package/src/react-ui/blocks/Terminal/parsing/ansi/AnsiParser.ts +0 -390
- package/src/react-ui/blocks/Terminal/parsing/ansi/ansi.constants.ts +0 -320
- package/src/react-ui/blocks/Terminal/parsing/ansi/index.ts +0 -20
- package/src/react-ui/blocks/Terminal/parsing/index.ts +0 -69
- package/src/react-ui/blocks/Terminal/parsing/levels/LogLevel.types.ts +0 -68
- package/src/react-ui/blocks/Terminal/parsing/levels/LogLevelDetector.ts +0 -436
- package/src/react-ui/blocks/Terminal/parsing/levels/index.ts +0 -14
- package/src/react-ui/blocks/index.ts +0 -11
- package/src/react-ui/components/MorphingPopover/MorphingPopover.types.ts +0 -49
- package/src/react-ui/components/MorphingPopover/index.tsx +0 -186
- package/src/react-ui/components/MorphingPopover/morphing-popover.module.css +0 -153
- package/src/react-ui/components/index.ts +0 -9
- package/src/react-ui/hooks/Animation/UseAutoHeight.tsx +0 -123
- package/src/react-ui/hooks/DOM/UseIsInView.tsx +0 -44
- package/src/react-ui/hooks/Formatting/UseListFormat.ts +0 -134
- package/src/react-ui/hooks/State/UseControlledState.tsx +0 -57
- package/src/react-ui/hooks/State/UseDataState.tsx +0 -76
- package/src/react-ui/hooks/index.ts +0 -20
- package/src/react-ui/icons/index.ts +0 -12
- package/src/react-ui/icons/lucide-animated/activity.tsx +0 -109
- package/src/react-ui/icons/lucide-animated/arrow-down-to-line.tsx +0 -51
- package/src/react-ui/icons/lucide-animated/arrow-up.tsx +0 -50
- package/src/react-ui/icons/lucide-animated/bell-electric.tsx +0 -124
- package/src/react-ui/icons/lucide-animated/bell.tsx +0 -93
- package/src/react-ui/icons/lucide-animated/bot.tsx +0 -122
- package/src/react-ui/icons/lucide-animated/box.tsx +0 -117
- package/src/react-ui/icons/lucide-animated/check.tsx +0 -21
- package/src/react-ui/icons/lucide-animated/circle-check.tsx +0 -107
- package/src/react-ui/icons/lucide-animated/delete.tsx +0 -133
- package/src/react-ui/icons/lucide-animated/download.tsx +0 -99
- package/src/react-ui/icons/lucide-animated/edit-2.tsx +0 -21
- package/src/react-ui/icons/lucide-animated/globe.tsx +0 -23
- package/src/react-ui/icons/lucide-animated/home.tsx +0 -103
- package/src/react-ui/icons/lucide-animated/index.ts +0 -38
- package/src/react-ui/icons/lucide-animated/layers.tsx +0 -23
- package/src/react-ui/icons/lucide-animated/layout-panel-top.tsx +0 -143
- package/src/react-ui/icons/lucide-animated/list.tsx +0 -54
- package/src/react-ui/icons/lucide-animated/package.tsx +0 -24
- package/src/react-ui/icons/lucide-animated/palette.tsx +0 -25
- package/src/react-ui/icons/lucide-animated/plus.tsx +0 -92
- package/src/react-ui/icons/lucide-animated/refresh-cw.tsx +0 -24
- package/src/react-ui/icons/lucide-animated/rocket.tsx +0 -24
- package/src/react-ui/icons/lucide-animated/save.tsx +0 -23
- package/src/react-ui/icons/lucide-animated/search.tsx +0 -94
- package/src/react-ui/icons/lucide-animated/settings.tsx +0 -92
- package/src/react-ui/icons/lucide-animated/terminal.tsx +0 -46
- package/src/react-ui/icons/lucide-animated/trash-2.tsx +0 -25
- package/src/react-ui/icons/lucide-animated/trending-down.tsx +0 -151
- package/src/react-ui/icons/lucide-animated/trending-up.tsx +0 -150
- package/src/react-ui/icons/lucide-animated/type.tsx +0 -23
- package/src/react-ui/icons/lucide-animated/upload.tsx +0 -23
- package/src/react-ui/icons/lucide-animated/x.tsx +0 -102
- package/src/react-ui/index.ts +0 -30
- package/src/react-ui/lib/get-strict-context.tsx +0 -56
- package/src/react-ui/lib/icon-wrapper.tsx +0 -70
- package/src/react-ui/lib/index.ts +0 -9
- package/src/react-ui/lib/utils.ts +0 -24
- package/src/react-ui/primitives/AutoHeight/index.tsx +0 -74
- package/src/react-ui/primitives/CountingNumber/index.tsx +0 -147
- package/src/react-ui/primitives/Highlight/Highlight.types.ts +0 -136
- package/src/react-ui/primitives/Highlight/index.tsx +0 -577
- package/src/react-ui/primitives/Slot/index.tsx +0 -128
- package/src/react-ui/primitives/index.ts +0 -16
- package/src/react-ui/primitives/waapi/Gooey/Gooey.types.ts +0 -141
- package/src/react-ui/primitives/waapi/Gooey/GooeyCanvas.tsx +0 -217
- package/src/react-ui/primitives/waapi/Gooey/GooeyFilter.tsx +0 -77
- package/src/react-ui/primitives/waapi/Gooey/MorphPath.tsx +0 -58
- package/src/react-ui/primitives/waapi/Gooey/gooey-utils.ts +0 -253
- package/src/react-ui/primitives/waapi/Gooey/index.ts +0 -50
- package/src/react-ui/primitives/waapi/Gooey/useMorphPath.ts +0 -48
- package/src/react-ui/primitives/waapi/Morph/Morph.types.ts +0 -106
- package/src/react-ui/primitives/waapi/Morph/MorphContext.tsx +0 -21
- package/src/react-ui/primitives/waapi/Morph/index.tsx +0 -56
- package/src/react-ui/primitives/waapi/Morph/techniques/index.ts +0 -12
- package/src/react-ui/primitives/waapi/Morph/techniques/useCSSGridMorph.ts +0 -89
- package/src/react-ui/primitives/waapi/Morph/techniques/useFLIPClipPath.ts +0 -176
- package/src/react-ui/primitives/waapi/Morph/techniques/useViewTransitions.ts +0 -87
- package/src/react-ui/primitives/waapi/Morph/useMorph.ts +0 -101
- package/src/react-ui/primitives/waapi/Reorder/Reorder.types.ts +0 -177
- package/src/react-ui/primitives/waapi/Reorder/index.tsx +0 -260
- package/src/react-ui/primitives/waapi/Reorder/useReorder.ts +0 -47
- package/src/react-ui/primitives/waapi/Reorder/useReorderPresence.ts +0 -209
- package/src/react-ui/primitives/waapi/Reorder/utils/separatorCoordination.ts +0 -104
- package/src/react-ui/primitives/waapi/SlidingNumber/SlidingNumber.styles.ts +0 -14
- package/src/react-ui/primitives/waapi/SlidingNumber/SlidingNumber.types.ts +0 -84
- package/src/react-ui/primitives/waapi/SlidingNumber/index.tsx +0 -474
- package/src/react-ui/primitives/waapi/SlidingText/SlidingText.styles.ts +0 -32
- package/src/react-ui/primitives/waapi/SlidingText/SlidingText.types.ts +0 -69
- package/src/react-ui/primitives/waapi/SlidingText/index.tsx +0 -140
- package/src/react-ui/primitives/waapi/core/animationConstants.ts +0 -215
- package/src/react-ui/primitives/waapi/core/index.ts +0 -53
- package/src/react-ui/primitives/waapi/core/types.ts +0 -200
- package/src/react-ui/primitives/waapi/core/useAnimationOrchestrator.ts +0 -430
- package/src/react-ui/primitives/waapi/core/useElementRegistry.ts +0 -81
- package/src/react-ui/primitives/waapi/core/useFLIPAnimation.ts +0 -138
- package/src/react-ui/primitives/waapi/core/usePositionCapture.ts +0 -106
- package/src/react-ui/primitives/waapi/index.ts +0 -139
- package/src/react-ui/styles/animations.css +0 -369
- package/src/react-ui/ui/Accordion/Accordion.styles.ts +0 -72
- package/src/react-ui/ui/Accordion/Accordion.types.ts +0 -199
- package/src/react-ui/ui/Accordion/index.tsx +0 -362
- package/src/react-ui/ui/AlertDialog/AlertDialog.styles.ts +0 -38
- package/src/react-ui/ui/AlertDialog/AlertDialog.types.ts +0 -296
- package/src/react-ui/ui/AlertDialog/index.tsx +0 -540
- package/src/react-ui/ui/Badge/Badge.styles.ts +0 -43
- package/src/react-ui/ui/Badge/Badge.types.ts +0 -26
- package/src/react-ui/ui/Badge/index.tsx +0 -34
- package/src/react-ui/ui/Button/Button.styles.ts +0 -57
- package/src/react-ui/ui/Button/Button.types.ts +0 -63
- package/src/react-ui/ui/Button/index.tsx +0 -155
- package/src/react-ui/ui/Card/Card.styles.ts +0 -32
- package/src/react-ui/ui/Card/Card.types.ts +0 -39
- package/src/react-ui/ui/Card/index.tsx +0 -130
- package/src/react-ui/ui/Checkbox/Checkbox.styles.ts +0 -40
- package/src/react-ui/ui/Checkbox/Checkbox.types.ts +0 -98
- package/src/react-ui/ui/Checkbox/index.tsx +0 -233
- package/src/react-ui/ui/Combobox/Combobox.styles.ts +0 -34
- package/src/react-ui/ui/Combobox/Combobox.types.ts +0 -89
- package/src/react-ui/ui/Combobox/index.tsx +0 -331
- package/src/react-ui/ui/CornerBracket/CornerBracket.styles.ts +0 -38
- package/src/react-ui/ui/CornerBracket/CornerBracket.types.ts +0 -15
- package/src/react-ui/ui/CornerBracket/index.tsx +0 -49
- package/src/react-ui/ui/DataCard/DataCard.styles.ts +0 -94
- package/src/react-ui/ui/DataCard/DataCard.types.ts +0 -125
- package/src/react-ui/ui/DataCard/index.tsx +0 -340
- package/src/react-ui/ui/Dialog/Dialog.styles.ts +0 -59
- package/src/react-ui/ui/Dialog/Dialog.types.ts +0 -284
- package/src/react-ui/ui/Dialog/index.tsx +0 -452
- package/src/react-ui/ui/DropdownMenu/DropdownMenu.styles.ts +0 -35
- package/src/react-ui/ui/DropdownMenu/DropdownMenu.types.ts +0 -81
- package/src/react-ui/ui/DropdownMenu/index.tsx +0 -300
- package/src/react-ui/ui/DynamicToggle/DynamicToggle.css +0 -376
- package/src/react-ui/ui/DynamicToggle/DynamicToggle.styles.ts +0 -85
- package/src/react-ui/ui/DynamicToggle/DynamicToggle.types.ts +0 -180
- package/src/react-ui/ui/DynamicToggle/index.tsx +0 -316
- package/src/react-ui/ui/DynamicToggle/prototype-v7-ios.html +0 -413
- package/src/react-ui/ui/DynamicToggle/prototype-v7.html +0 -615
- package/src/react-ui/ui/DynamicToggle/prototype-v8-gooey-safari.html +0 -560
- package/src/react-ui/ui/DynamicToggle/prototype-v8b-react-structure.html +0 -227
- package/src/react-ui/ui/DynamicToggle/prototype.html +0 -419
- package/src/react-ui/ui/Field/Field.styles.ts +0 -47
- package/src/react-ui/ui/Field/Field.types.ts +0 -60
- package/src/react-ui/ui/Field/index.tsx +0 -254
- package/src/react-ui/ui/Input/Input.styles.ts +0 -11
- package/src/react-ui/ui/Input/Input.types.ts +0 -10
- package/src/react-ui/ui/Input/index.tsx +0 -32
- package/src/react-ui/ui/InputGroup/InputGroup.styles.ts +0 -53
- package/src/react-ui/ui/InputGroup/InputGroup.types.ts +0 -44
- package/src/react-ui/ui/InputGroup/index.tsx +0 -149
- package/src/react-ui/ui/Label/Label.styles.ts +0 -10
- package/src/react-ui/ui/Label/Label.types.ts +0 -9
- package/src/react-ui/ui/Label/index.tsx +0 -27
- package/src/react-ui/ui/Menu/Menu.styles.ts +0 -71
- package/src/react-ui/ui/Menu/Menu.types.ts +0 -425
- package/src/react-ui/ui/Menu/index.tsx +0 -900
- package/src/react-ui/ui/Popover/Popover.styles.ts +0 -55
- package/src/react-ui/ui/Popover/Popover.types.ts +0 -261
- package/src/react-ui/ui/Popover/index.tsx +0 -422
- package/src/react-ui/ui/Progress/Progress.styles.ts +0 -36
- package/src/react-ui/ui/Progress/Progress.types.ts +0 -162
- package/src/react-ui/ui/Progress/index.tsx +0 -254
- package/src/react-ui/ui/Select/Select.styles.ts +0 -30
- package/src/react-ui/ui/Select/Select.types.ts +0 -51
- package/src/react-ui/ui/Select/index.tsx +0 -225
- package/src/react-ui/ui/Separator/Separator.styles.ts +0 -10
- package/src/react-ui/ui/Separator/Separator.types.ts +0 -10
- package/src/react-ui/ui/Separator/index.tsx +0 -37
- package/src/react-ui/ui/Switch/Switch.styles.ts +0 -50
- package/src/react-ui/ui/Switch/Switch.types.ts +0 -155
- package/src/react-ui/ui/Switch/index.tsx +0 -253
- package/src/react-ui/ui/Tabs/Tabs.css +0 -39
- package/src/react-ui/ui/Tabs/Tabs.styles.ts +0 -148
- package/src/react-ui/ui/Tabs/Tabs.types.ts +0 -255
- package/src/react-ui/ui/Tabs/index.tsx +0 -529
- package/src/react-ui/ui/TextFlow/TextFlow.styles.ts +0 -36
- package/src/react-ui/ui/TextFlow/TextFlow.types.ts +0 -118
- package/src/react-ui/ui/TextFlow/index.tsx +0 -276
- package/src/react-ui/ui/Textarea/Textarea.styles.ts +0 -10
- package/src/react-ui/ui/Textarea/Textarea.types.ts +0 -9
- package/src/react-ui/ui/Textarea/index.tsx +0 -27
- package/src/react-ui/ui/Tooltip/Tooltip.styles.ts +0 -43
- package/src/react-ui/ui/Tooltip/Tooltip.types.ts +0 -253
- package/src/react-ui/ui/Tooltip/index.tsx +0 -394
- package/src/react-ui/ui/index.ts +0 -41
- package/src/types/css-modules.d.ts +0 -18
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import { cva } from 'class-variance-authority';
|
|
2
|
-
import type { StyleSlots } from '@/core/types';
|
|
3
|
-
|
|
4
|
-
/** Visual regions for the Field component family. */
|
|
5
|
-
type FieldSlot =
|
|
6
|
-
| 'root'
|
|
7
|
-
| 'set'
|
|
8
|
-
| 'legend'
|
|
9
|
-
| 'group'
|
|
10
|
-
| 'content'
|
|
11
|
-
| 'label'
|
|
12
|
-
| 'title'
|
|
13
|
-
| 'description'
|
|
14
|
-
| 'separator'
|
|
15
|
-
| 'error';
|
|
16
|
-
|
|
17
|
-
const fieldStyles: StyleSlots<FieldSlot> = {
|
|
18
|
-
root: 'data-[invalid=true]:text-destructive gap-2 group/field flex w-full',
|
|
19
|
-
set: 'gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col',
|
|
20
|
-
legend: 'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
|
|
21
|
-
group: 'gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col',
|
|
22
|
-
content: 'gap-0.5 group/field-content flex flex-1 flex-col leading-snug',
|
|
23
|
-
label: 'has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit leading-snug has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
|
|
24
|
-
title: 'gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug',
|
|
25
|
-
description: 'text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance last:mt-0 nth-last-2:-mt-1 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
|
|
26
|
-
separator: '-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative',
|
|
27
|
-
error: 'text-destructive text-sm font-normal',
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
/** CVA variants for the Field root orientation. */
|
|
31
|
-
const fieldVariants = cva(fieldStyles.root, {
|
|
32
|
-
variants: {
|
|
33
|
-
orientation: {
|
|
34
|
-
vertical: 'flex-col *:w-full [&>.sr-only]:w-auto',
|
|
35
|
-
horizontal:
|
|
36
|
-
'flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
|
|
37
|
-
responsive:
|
|
38
|
-
'flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
|
|
39
|
-
},
|
|
40
|
-
},
|
|
41
|
-
defaultVariants: {
|
|
42
|
-
orientation: 'vertical',
|
|
43
|
-
},
|
|
44
|
-
});
|
|
45
|
-
|
|
46
|
-
export { fieldStyles, fieldVariants };
|
|
47
|
-
export type { FieldSlot };
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import type { VariantProps } from 'class-variance-authority';
|
|
2
|
-
import type { SlotOverrides } from '@/core/types';
|
|
3
|
-
import type { fieldVariants, FieldSlot } from './Field.styles';
|
|
4
|
-
|
|
5
|
-
/** Props for the FieldSet component. */
|
|
6
|
-
interface IFieldSetProps extends React.ComponentProps<'fieldset'> {
|
|
7
|
-
slots?: SlotOverrides<FieldSlot>;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
/** Props for the FieldLegend component. */
|
|
11
|
-
interface IFieldLegendProps extends React.ComponentProps<'legend'> {
|
|
12
|
-
/** Legend display variant. */
|
|
13
|
-
variant?: 'legend' | 'label';
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
/** Props for the FieldGroup component. */
|
|
17
|
-
type IFieldGroupProps = React.ComponentProps<'div'>;
|
|
18
|
-
|
|
19
|
-
/** Props for the Field component. */
|
|
20
|
-
interface IFieldProps
|
|
21
|
-
extends React.ComponentProps<'div'>,
|
|
22
|
-
VariantProps<typeof fieldVariants> {
|
|
23
|
-
slots?: SlotOverrides<FieldSlot>;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
/** Props for the FieldContent component. */
|
|
27
|
-
type IFieldContentProps = React.ComponentProps<'div'>;
|
|
28
|
-
|
|
29
|
-
/** Props for the FieldLabel component. */
|
|
30
|
-
type IFieldLabelProps = React.ComponentProps<'label'>;
|
|
31
|
-
|
|
32
|
-
/** Props for the FieldTitle component. */
|
|
33
|
-
type IFieldTitleProps = React.ComponentProps<'div'>;
|
|
34
|
-
|
|
35
|
-
/** Props for the FieldDescription component. */
|
|
36
|
-
type IFieldDescriptionProps = React.ComponentProps<'p'>;
|
|
37
|
-
|
|
38
|
-
/** Props for the FieldSeparator component. */
|
|
39
|
-
interface IFieldSeparatorProps extends React.ComponentProps<'div'> {
|
|
40
|
-
children?: React.ReactNode;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
/** Props for the FieldError component. */
|
|
44
|
-
interface IFieldErrorProps extends React.ComponentProps<'div'> {
|
|
45
|
-
/** Array of error objects to display. */
|
|
46
|
-
errors?: Array<{ message?: string } | undefined>;
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
export type {
|
|
50
|
-
IFieldSetProps,
|
|
51
|
-
IFieldLegendProps,
|
|
52
|
-
IFieldGroupProps,
|
|
53
|
-
IFieldProps,
|
|
54
|
-
IFieldContentProps,
|
|
55
|
-
IFieldLabelProps,
|
|
56
|
-
IFieldTitleProps,
|
|
57
|
-
IFieldDescriptionProps,
|
|
58
|
-
IFieldSeparatorProps,
|
|
59
|
-
IFieldErrorProps,
|
|
60
|
-
};
|
|
@@ -1,254 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import { useMemo } from 'react';
|
|
4
|
-
|
|
5
|
-
import { cn } from '@/react-ui/lib/utils';
|
|
6
|
-
import { Label } from '@/react-ui/ui/Label';
|
|
7
|
-
import { Separator } from '@/react-ui/ui/Separator';
|
|
8
|
-
import { fieldStyles, fieldVariants } from './Field.styles';
|
|
9
|
-
import type {
|
|
10
|
-
IFieldSetProps,
|
|
11
|
-
IFieldLegendProps,
|
|
12
|
-
IFieldGroupProps,
|
|
13
|
-
IFieldProps,
|
|
14
|
-
IFieldContentProps,
|
|
15
|
-
IFieldLabelProps,
|
|
16
|
-
IFieldTitleProps,
|
|
17
|
-
IFieldDescriptionProps,
|
|
18
|
-
IFieldSeparatorProps,
|
|
19
|
-
IFieldErrorProps,
|
|
20
|
-
} from './Field.types';
|
|
21
|
-
|
|
22
|
-
/**
|
|
23
|
-
* FieldSet — groups related form fields.
|
|
24
|
-
*
|
|
25
|
-
* @example
|
|
26
|
-
* ```tsx
|
|
27
|
-
* <FieldSet>
|
|
28
|
-
* <Field><FieldLabel>Name</FieldLabel></Field>
|
|
29
|
-
* </FieldSet>
|
|
30
|
-
* ```
|
|
31
|
-
*/
|
|
32
|
-
function FieldSet({ className, ...props }: IFieldSetProps) {
|
|
33
|
-
return (
|
|
34
|
-
<fieldset
|
|
35
|
-
data-slot="field-set"
|
|
36
|
-
className={cn(fieldStyles.set, className)}
|
|
37
|
-
{...props}
|
|
38
|
-
/>
|
|
39
|
-
);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
/** FieldLegend — legend element for a FieldSet. */
|
|
43
|
-
function FieldLegend({
|
|
44
|
-
className,
|
|
45
|
-
variant = 'legend',
|
|
46
|
-
...props
|
|
47
|
-
}: IFieldLegendProps) {
|
|
48
|
-
return (
|
|
49
|
-
<legend
|
|
50
|
-
data-slot="field-legend"
|
|
51
|
-
data-variant={variant}
|
|
52
|
-
className={cn(fieldStyles.legend, className)}
|
|
53
|
-
{...props}
|
|
54
|
-
/>
|
|
55
|
-
);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
/** FieldGroup — vertical grouping container for fields. */
|
|
59
|
-
function FieldGroup({ className, ...props }: IFieldGroupProps) {
|
|
60
|
-
return (
|
|
61
|
-
<div
|
|
62
|
-
data-slot="field-group"
|
|
63
|
-
className={cn(fieldStyles.group, className)}
|
|
64
|
-
{...props}
|
|
65
|
-
/>
|
|
66
|
-
);
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
/**
|
|
70
|
-
* Field — form field container with orientation variants.
|
|
71
|
-
*
|
|
72
|
-
* @param orientation - Layout direction: 'vertical', 'horizontal', 'responsive'
|
|
73
|
-
*
|
|
74
|
-
* @example
|
|
75
|
-
* ```tsx
|
|
76
|
-
* <Field orientation="horizontal">
|
|
77
|
-
* <FieldLabel>Email</FieldLabel>
|
|
78
|
-
* <Input type="email" />
|
|
79
|
-
* </Field>
|
|
80
|
-
* ```
|
|
81
|
-
*/
|
|
82
|
-
function Field({
|
|
83
|
-
className,
|
|
84
|
-
orientation = 'vertical',
|
|
85
|
-
...props
|
|
86
|
-
}: IFieldProps) {
|
|
87
|
-
return (
|
|
88
|
-
<div
|
|
89
|
-
role="group"
|
|
90
|
-
data-slot="field"
|
|
91
|
-
data-orientation={orientation}
|
|
92
|
-
className={cn(fieldVariants({ orientation }), className)}
|
|
93
|
-
{...props}
|
|
94
|
-
/>
|
|
95
|
-
);
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
/** FieldContent — content wrapper inside a field. */
|
|
99
|
-
function FieldContent({ className, ...props }: IFieldContentProps) {
|
|
100
|
-
return (
|
|
101
|
-
<div
|
|
102
|
-
data-slot="field-content"
|
|
103
|
-
className={cn(fieldStyles.content, className)}
|
|
104
|
-
{...props}
|
|
105
|
-
/>
|
|
106
|
-
);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
/** FieldLabel — styled label using the Label component. */
|
|
110
|
-
function FieldLabel({ className, ...props }: IFieldLabelProps) {
|
|
111
|
-
return (
|
|
112
|
-
<Label
|
|
113
|
-
data-slot="field-label"
|
|
114
|
-
className={cn(fieldStyles.label, className)}
|
|
115
|
-
{...props}
|
|
116
|
-
/>
|
|
117
|
-
);
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
/** FieldTitle — alternative title display for a field. */
|
|
121
|
-
function FieldTitle({ className, ...props }: IFieldTitleProps) {
|
|
122
|
-
return (
|
|
123
|
-
<div
|
|
124
|
-
data-slot="field-label"
|
|
125
|
-
className={cn(fieldStyles.title, className)}
|
|
126
|
-
{...props}
|
|
127
|
-
/>
|
|
128
|
-
);
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
/** FieldDescription — helper text for a field. */
|
|
132
|
-
function FieldDescription({ className, ...props }: IFieldDescriptionProps) {
|
|
133
|
-
return (
|
|
134
|
-
<p
|
|
135
|
-
data-slot="field-description"
|
|
136
|
-
className={cn(fieldStyles.description, className)}
|
|
137
|
-
{...props}
|
|
138
|
-
/>
|
|
139
|
-
);
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
/** FieldSeparator — divider between fields with optional text content. */
|
|
143
|
-
function FieldSeparator({
|
|
144
|
-
children,
|
|
145
|
-
className,
|
|
146
|
-
...props
|
|
147
|
-
}: IFieldSeparatorProps) {
|
|
148
|
-
return (
|
|
149
|
-
<div
|
|
150
|
-
data-slot="field-separator"
|
|
151
|
-
data-content={!!children}
|
|
152
|
-
className={cn(fieldStyles.separator, className)}
|
|
153
|
-
{...props}
|
|
154
|
-
>
|
|
155
|
-
<Separator className="absolute inset-0 top-1/2" />
|
|
156
|
-
{children && (
|
|
157
|
-
<span
|
|
158
|
-
className="text-muted-foreground px-2 bg-background relative mx-auto block w-fit"
|
|
159
|
-
data-slot="field-separator-content"
|
|
160
|
-
>
|
|
161
|
-
{children}
|
|
162
|
-
</span>
|
|
163
|
-
)}
|
|
164
|
-
</div>
|
|
165
|
-
);
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
/**
|
|
169
|
-
* FieldError — displays validation errors for a field.
|
|
170
|
-
*
|
|
171
|
-
* @param errors - Array of error objects with message property
|
|
172
|
-
*
|
|
173
|
-
* @example
|
|
174
|
-
* ```tsx
|
|
175
|
-
* <FieldError errors={[{ message: 'Required field' }]} />
|
|
176
|
-
* ```
|
|
177
|
-
*/
|
|
178
|
-
function FieldError({
|
|
179
|
-
className,
|
|
180
|
-
children,
|
|
181
|
-
errors,
|
|
182
|
-
...props
|
|
183
|
-
}: IFieldErrorProps) {
|
|
184
|
-
const content = useMemo(() => {
|
|
185
|
-
if (children) {
|
|
186
|
-
return children;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
if (!errors?.length) {
|
|
190
|
-
return null;
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
const uniqueErrors = [
|
|
194
|
-
...new Map(errors.map((error) => [error?.message, error])).values(),
|
|
195
|
-
];
|
|
196
|
-
|
|
197
|
-
if (uniqueErrors?.length == 1) {
|
|
198
|
-
return uniqueErrors[0]?.message;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
return (
|
|
202
|
-
<ul className="ml-4 flex list-disc flex-col gap-1">
|
|
203
|
-
{uniqueErrors.map(
|
|
204
|
-
(error, index) =>
|
|
205
|
-
error?.message && <li key={index}>{error.message}</li>,
|
|
206
|
-
)}
|
|
207
|
-
</ul>
|
|
208
|
-
);
|
|
209
|
-
}, [children, errors]);
|
|
210
|
-
|
|
211
|
-
if (!content) {
|
|
212
|
-
return null;
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
return (
|
|
216
|
-
<div
|
|
217
|
-
role="alert"
|
|
218
|
-
data-slot="field-error"
|
|
219
|
-
className={cn(fieldStyles.error, className)}
|
|
220
|
-
{...props}
|
|
221
|
-
>
|
|
222
|
-
{content}
|
|
223
|
-
</div>
|
|
224
|
-
);
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
export {
|
|
228
|
-
Field,
|
|
229
|
-
FieldLabel,
|
|
230
|
-
FieldDescription,
|
|
231
|
-
FieldError,
|
|
232
|
-
FieldGroup,
|
|
233
|
-
FieldLegend,
|
|
234
|
-
FieldSeparator,
|
|
235
|
-
FieldSet,
|
|
236
|
-
FieldContent,
|
|
237
|
-
FieldTitle,
|
|
238
|
-
fieldVariants,
|
|
239
|
-
};
|
|
240
|
-
|
|
241
|
-
export type {
|
|
242
|
-
IFieldSetProps,
|
|
243
|
-
IFieldLegendProps,
|
|
244
|
-
IFieldGroupProps,
|
|
245
|
-
IFieldProps,
|
|
246
|
-
IFieldContentProps,
|
|
247
|
-
IFieldLabelProps,
|
|
248
|
-
IFieldTitleProps,
|
|
249
|
-
IFieldDescriptionProps,
|
|
250
|
-
IFieldSeparatorProps,
|
|
251
|
-
IFieldErrorProps,
|
|
252
|
-
} from './Field.types';
|
|
253
|
-
|
|
254
|
-
export type { FieldSlot } from './Field.styles';
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { StyleSlots } from '@/core/types';
|
|
2
|
-
|
|
3
|
-
/** Visual regions for the Input component. */
|
|
4
|
-
type InputSlot = 'root';
|
|
5
|
-
|
|
6
|
-
const inputStyles: StyleSlots<InputSlot> = {
|
|
7
|
-
root: 'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
export { inputStyles };
|
|
11
|
-
export type { InputSlot };
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { SlotOverrides } from '@/core/types';
|
|
2
|
-
import type { InputSlot } from './Input.styles';
|
|
3
|
-
|
|
4
|
-
/** Props for the Input component. */
|
|
5
|
-
interface IInputProps extends React.ComponentProps<'input'> {
|
|
6
|
-
/** Override classes for input visual regions. */
|
|
7
|
-
slots?: SlotOverrides<InputSlot>;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export type { IInputProps };
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { Input as InputPrimitive } from '@base-ui/react/input';
|
|
3
|
-
|
|
4
|
-
import { cn } from '@/react-ui/lib/utils';
|
|
5
|
-
import { inputStyles } from './Input.styles';
|
|
6
|
-
import type { IInputProps } from './Input.types';
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* Input — styled text input wrapping Base UI Input primitive.
|
|
10
|
-
*
|
|
11
|
-
* @param type - HTML input type
|
|
12
|
-
* @param slots - Override classes for input visual regions
|
|
13
|
-
*
|
|
14
|
-
* @example
|
|
15
|
-
* ```tsx
|
|
16
|
-
* <Input type="email" placeholder="Enter email" />
|
|
17
|
-
* ```
|
|
18
|
-
*/
|
|
19
|
-
function Input({ className, type, slots, ...props }: IInputProps) {
|
|
20
|
-
return (
|
|
21
|
-
<InputPrimitive
|
|
22
|
-
type={type}
|
|
23
|
-
data-slot="input"
|
|
24
|
-
className={cn(inputStyles.root, slots?.root, className)}
|
|
25
|
-
{...props}
|
|
26
|
-
/>
|
|
27
|
-
);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export { Input };
|
|
31
|
-
export type { IInputProps } from './Input.types';
|
|
32
|
-
export type { InputSlot } from './Input.styles';
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import { cva } from 'class-variance-authority';
|
|
2
|
-
import type { StyleSlots } from '@/core/types';
|
|
3
|
-
|
|
4
|
-
/** Visual regions for the InputGroup component family. */
|
|
5
|
-
type InputGroupSlot = 'root' | 'addon' | 'button' | 'text' | 'input' | 'textarea';
|
|
6
|
-
|
|
7
|
-
const inputGroupStyles: StyleSlots<InputGroupSlot> = {
|
|
8
|
-
root: 'border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',
|
|
9
|
-
addon: 'text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*=\'size-\'])]:size-4 flex cursor-text items-center justify-center select-none',
|
|
10
|
-
button: 'gap-2 text-sm shadow-none flex items-center',
|
|
11
|
-
text: 'text-muted-foreground gap-2 text-sm [&_svg:not([class*=\'size-\'])]:size-4 flex items-center [&_svg]:pointer-events-none',
|
|
12
|
-
input: 'rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1',
|
|
13
|
-
textarea: 'rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none',
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
/** CVA variants for InputGroupAddon alignment. */
|
|
17
|
-
const inputGroupAddonVariants = cva(inputGroupStyles.addon, {
|
|
18
|
-
variants: {
|
|
19
|
-
align: {
|
|
20
|
-
'inline-start': 'pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first',
|
|
21
|
-
'inline-end': 'pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last',
|
|
22
|
-
'block-start':
|
|
23
|
-
'px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start',
|
|
24
|
-
'block-end':
|
|
25
|
-
'px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start',
|
|
26
|
-
},
|
|
27
|
-
},
|
|
28
|
-
defaultVariants: {
|
|
29
|
-
align: 'inline-start',
|
|
30
|
-
},
|
|
31
|
-
});
|
|
32
|
-
|
|
33
|
-
/** CVA variants for InputGroupButton sizing. */
|
|
34
|
-
const inputGroupButtonVariants = cva(inputGroupStyles.button, {
|
|
35
|
-
variants: {
|
|
36
|
-
size: {
|
|
37
|
-
xs: 'h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*=\'size-\'])]:size-3.5',
|
|
38
|
-
sm: '',
|
|
39
|
-
'icon-xs': 'size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0',
|
|
40
|
-
'icon-sm': 'size-8 p-0 has-[>svg]:p-0',
|
|
41
|
-
},
|
|
42
|
-
},
|
|
43
|
-
defaultVariants: {
|
|
44
|
-
size: 'xs',
|
|
45
|
-
},
|
|
46
|
-
});
|
|
47
|
-
|
|
48
|
-
export {
|
|
49
|
-
inputGroupStyles,
|
|
50
|
-
inputGroupAddonVariants,
|
|
51
|
-
inputGroupButtonVariants,
|
|
52
|
-
};
|
|
53
|
-
export type { InputGroupSlot };
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import type { VariantProps } from 'class-variance-authority';
|
|
2
|
-
import type { SlotOverrides } from '@/core/types';
|
|
3
|
-
import type { inputGroupAddonVariants, inputGroupButtonVariants, InputGroupSlot } from './InputGroup.styles';
|
|
4
|
-
|
|
5
|
-
/** Props for the InputGroup container. */
|
|
6
|
-
interface IInputGroupProps extends React.ComponentProps<'div'> {
|
|
7
|
-
/** Override classes for input group visual regions. */
|
|
8
|
-
slots?: SlotOverrides<InputGroupSlot>;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
/** Props for InputGroupAddon. */
|
|
12
|
-
interface IInputGroupAddonProps
|
|
13
|
-
extends React.ComponentProps<'div'>,
|
|
14
|
-
VariantProps<typeof inputGroupAddonVariants> {}
|
|
15
|
-
|
|
16
|
-
/** Props for InputGroupButton. */
|
|
17
|
-
interface IInputGroupButtonProps
|
|
18
|
-
extends Omit<React.ComponentProps<'button'>, 'size'>,
|
|
19
|
-
VariantProps<typeof inputGroupButtonVariants> {
|
|
20
|
-
/** Button size variant. */
|
|
21
|
-
size?: 'xs' | 'sm' | 'icon-xs' | 'icon-sm';
|
|
22
|
-
/** Button visual variant (passed to Button). */
|
|
23
|
-
variant?: string;
|
|
24
|
-
/** Disabled state. */
|
|
25
|
-
disabled?: boolean;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
/** Props for InputGroupText. */
|
|
29
|
-
type IInputGroupTextProps = React.ComponentProps<'span'>;
|
|
30
|
-
|
|
31
|
-
/** Props for InputGroupInput. */
|
|
32
|
-
type IInputGroupInputProps = React.ComponentProps<'input'>;
|
|
33
|
-
|
|
34
|
-
/** Props for InputGroupTextarea. */
|
|
35
|
-
type IInputGroupTextareaProps = React.ComponentProps<'textarea'>;
|
|
36
|
-
|
|
37
|
-
export type {
|
|
38
|
-
IInputGroupProps,
|
|
39
|
-
IInputGroupAddonProps,
|
|
40
|
-
IInputGroupButtonProps,
|
|
41
|
-
IInputGroupTextProps,
|
|
42
|
-
IInputGroupInputProps,
|
|
43
|
-
IInputGroupTextareaProps,
|
|
44
|
-
};
|
|
@@ -1,149 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
|
|
5
|
-
import { cn } from '@/react-ui/lib/utils';
|
|
6
|
-
import { Button } from '@/react-ui/ui/Button';
|
|
7
|
-
import { Input } from '@/react-ui/ui/Input';
|
|
8
|
-
import { Textarea } from '@/react-ui/ui/Textarea';
|
|
9
|
-
import {
|
|
10
|
-
inputGroupStyles,
|
|
11
|
-
inputGroupAddonVariants,
|
|
12
|
-
inputGroupButtonVariants,
|
|
13
|
-
} from './InputGroup.styles';
|
|
14
|
-
import type {
|
|
15
|
-
IInputGroupProps,
|
|
16
|
-
IInputGroupAddonProps,
|
|
17
|
-
IInputGroupButtonProps,
|
|
18
|
-
IInputGroupTextProps,
|
|
19
|
-
IInputGroupInputProps,
|
|
20
|
-
IInputGroupTextareaProps,
|
|
21
|
-
} from './InputGroup.types';
|
|
22
|
-
|
|
23
|
-
/**
|
|
24
|
-
* InputGroup — container for composing inputs with addons and buttons.
|
|
25
|
-
*
|
|
26
|
-
* @example
|
|
27
|
-
* ```tsx
|
|
28
|
-
* <InputGroup>
|
|
29
|
-
* <InputGroupAddon align="inline-start">$</InputGroupAddon>
|
|
30
|
-
* <InputGroupInput placeholder="Amount" />
|
|
31
|
-
* </InputGroup>
|
|
32
|
-
* ```
|
|
33
|
-
*/
|
|
34
|
-
function InputGroup({ className, slots, ...props }: IInputGroupProps) {
|
|
35
|
-
return (
|
|
36
|
-
<div
|
|
37
|
-
data-slot="input-group"
|
|
38
|
-
role="group"
|
|
39
|
-
className={cn(inputGroupStyles.root, slots?.root, className)}
|
|
40
|
-
{...props}
|
|
41
|
-
/>
|
|
42
|
-
);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
/** InputGroupAddon — decorative addon element within an input group. */
|
|
46
|
-
function InputGroupAddon({
|
|
47
|
-
className,
|
|
48
|
-
align = 'inline-start',
|
|
49
|
-
...props
|
|
50
|
-
}: IInputGroupAddonProps) {
|
|
51
|
-
return (
|
|
52
|
-
<div
|
|
53
|
-
role="group"
|
|
54
|
-
data-slot="input-group-addon"
|
|
55
|
-
data-align={align}
|
|
56
|
-
className={cn(inputGroupAddonVariants({ align }), className)}
|
|
57
|
-
onClick={(e) => {
|
|
58
|
-
if ((e.target as HTMLElement).closest('button')) {
|
|
59
|
-
return;
|
|
60
|
-
}
|
|
61
|
-
e.currentTarget.parentElement?.querySelector('input')?.focus();
|
|
62
|
-
}}
|
|
63
|
-
{...props}
|
|
64
|
-
/>
|
|
65
|
-
);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
/** InputGroupButton — button element within an input group. */
|
|
69
|
-
function InputGroupButton({
|
|
70
|
-
className,
|
|
71
|
-
size = 'xs',
|
|
72
|
-
...props
|
|
73
|
-
}: IInputGroupButtonProps) {
|
|
74
|
-
const buttonSize =
|
|
75
|
-
size === 'xs'
|
|
76
|
-
? 'sm'
|
|
77
|
-
: size === 'icon-xs' || size === 'icon-sm'
|
|
78
|
-
? 'icon'
|
|
79
|
-
: 'default';
|
|
80
|
-
|
|
81
|
-
return (
|
|
82
|
-
<Button
|
|
83
|
-
type="button"
|
|
84
|
-
data-slot="input-group-button"
|
|
85
|
-
data-size={size}
|
|
86
|
-
size={buttonSize as any}
|
|
87
|
-
variant="ghost"
|
|
88
|
-
className={cn(inputGroupButtonVariants({ size }), className)}
|
|
89
|
-
{...(props as any)}
|
|
90
|
-
/>
|
|
91
|
-
);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
/** InputGroupText — text element within an input group. */
|
|
95
|
-
function InputGroupText({ className, ...props }: IInputGroupTextProps) {
|
|
96
|
-
return (
|
|
97
|
-
<span
|
|
98
|
-
className={cn(inputGroupStyles.text, className)}
|
|
99
|
-
{...props}
|
|
100
|
-
/>
|
|
101
|
-
);
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
/** InputGroupInput — input element within an input group (no border/ring). */
|
|
105
|
-
function InputGroupInput({ className, ...props }: IInputGroupInputProps) {
|
|
106
|
-
return (
|
|
107
|
-
<Input
|
|
108
|
-
data-slot="input-group-control"
|
|
109
|
-
className={cn(inputGroupStyles.input, className)}
|
|
110
|
-
{...props}
|
|
111
|
-
/>
|
|
112
|
-
);
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
/** InputGroupTextarea — textarea element within an input group (no border/ring). */
|
|
116
|
-
function InputGroupTextarea({
|
|
117
|
-
className,
|
|
118
|
-
...props
|
|
119
|
-
}: IInputGroupTextareaProps) {
|
|
120
|
-
return (
|
|
121
|
-
<Textarea
|
|
122
|
-
data-slot="input-group-control"
|
|
123
|
-
className={cn(inputGroupStyles.textarea, className)}
|
|
124
|
-
{...props}
|
|
125
|
-
/>
|
|
126
|
-
);
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
export {
|
|
130
|
-
InputGroup,
|
|
131
|
-
InputGroupAddon,
|
|
132
|
-
InputGroupButton,
|
|
133
|
-
InputGroupText,
|
|
134
|
-
InputGroupInput,
|
|
135
|
-
InputGroupTextarea,
|
|
136
|
-
inputGroupAddonVariants,
|
|
137
|
-
inputGroupButtonVariants,
|
|
138
|
-
};
|
|
139
|
-
|
|
140
|
-
export type {
|
|
141
|
-
IInputGroupProps,
|
|
142
|
-
IInputGroupAddonProps,
|
|
143
|
-
IInputGroupButtonProps,
|
|
144
|
-
IInputGroupTextProps,
|
|
145
|
-
IInputGroupInputProps,
|
|
146
|
-
IInputGroupTextareaProps,
|
|
147
|
-
} from './InputGroup.types';
|
|
148
|
-
|
|
149
|
-
export type { InputGroupSlot } from './InputGroup.styles';
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { StyleSlots } from '@/core/types';
|
|
2
|
-
|
|
3
|
-
type LabelSlot = 'root';
|
|
4
|
-
|
|
5
|
-
const labelStyles: StyleSlots<LabelSlot> = {
|
|
6
|
-
root: 'gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed',
|
|
7
|
-
};
|
|
8
|
-
|
|
9
|
-
export { labelStyles };
|
|
10
|
-
export type { LabelSlot };
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import type { SlotOverrides } from '@/core/types';
|
|
2
|
-
import type { LabelSlot } from './Label.styles';
|
|
3
|
-
|
|
4
|
-
/** Props for the Label component. */
|
|
5
|
-
interface ILabelProps extends React.ComponentProps<'label'> {
|
|
6
|
-
slots?: SlotOverrides<LabelSlot>;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export type { ILabelProps };
|