@kismet-ux/constellation 1.14.0 → 1.15.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/README.md +219 -208
- package/dist/form/Checkbox/checkbox.js +4 -57
- package/dist/form/Checkbox/checkbox.js.map +1 -1
- package/dist/form/DatePicker/date-picker.d.ts +1 -1
- package/dist/form/DatePicker/date-picker.d.ts.map +1 -1
- package/dist/form/DatePicker/date-picker.js +7 -59
- package/dist/form/DatePicker/date-picker.js.map +1 -1
- package/dist/form/Input/input.css +42 -6
- package/dist/form/Input/input.d.ts +6 -0
- package/dist/form/Input/input.d.ts.map +1 -1
- package/dist/form/Input/input.js +3 -3
- package/dist/form/Input/input.js.map +1 -1
- package/dist/form/Input/input.module.scss.js +1 -1
- package/dist/form/Select/select.d.ts.map +1 -1
- package/dist/form/Select/select.js +5 -5
- package/dist/form/Select/select.js.map +1 -1
- package/dist/form.d.ts +2 -2
- package/dist/index-BPKtGvrM.d.ts +200 -0
- package/dist/index-ByI9bvw8.d.ts +647 -0
- package/dist/index-C7SAfZfl.d.ts +647 -0
- package/dist/index-Cq8JgMRD.d.ts +354 -0
- package/dist/index-D8p7TX9C.d.ts +200 -0
- package/dist/index-DyDvelCa.d.ts +354 -0
- package/dist/index.d.ts +7 -7
- package/dist/index.js +30 -30
- package/dist/input-BHmlHvYR.d.ts +58 -0
- package/dist/layout/AppSidebarHeader/app-sidebar-header.js +1 -31
- package/dist/layout/AppSidebarHeader/app-sidebar-header.js.map +1 -1
- package/dist/layout.d.ts +3 -3
- package/dist/navigation/NavUser/nav-user.js +2 -2
- package/dist/navigation/Sheet/sheet.js +3 -30
- package/dist/navigation/Sheet/sheet.js.map +1 -1
- package/dist/navigation.d.ts +1 -1
- package/dist/settings/AppearanceTabs/appearance-tabs.js +1 -28
- package/dist/settings/AppearanceTabs/appearance-tabs.js.map +1 -1
- package/dist/tooltip-Cw8p0qeV.d.ts +46 -0
- package/dist/types/form/date-picker.d.ts +2 -0
- package/dist/types/form/date-picker.d.ts.map +1 -1
- package/dist/types/form/select.d.ts +2 -0
- package/dist/types/form/select.d.ts.map +1 -1
- package/dist/types/form/theme.d.ts +9 -0
- package/dist/types/form/theme.d.ts.map +1 -1
- package/dist/typography/Typography/typography.css +21 -1
- package/dist/ui/Button/button-variants.d.ts +1 -1
- package/dist/ui/Button/button.css +1 -1
- package/dist/ui/Icon/icon-variants.d.ts +1 -1
- package/dist/ui/SwipeRow/swipe-row-variants.js.map +1 -1
- package/dist/ui/SwipeRow/swipe-row.js.map +1 -1
- package/dist/ui/Toggle/toggle-variants.d.ts +1 -1
- package/dist/ui.d.ts +2 -2
- package/package.json +1 -1
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { SidebarMenuButton } from '../../layout/Sidebar/sidebar.js';
|
|
3
3
|
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } from '../DropdownMenu/dropdown-menu.js';
|
|
4
|
-
import { UserInfo } from '../../user/UserInfo/user-info.js';
|
|
5
|
-
import { UserMenuContent } from '../../user/UserMenuContent/user-menu-content.js';
|
|
6
4
|
import { ChevronsUpDownIcon } from 'lucide-react';
|
|
7
5
|
import s from './nav-user.module.scss.js';
|
|
6
|
+
import { UserInfo } from '../../user/UserInfo/user-info.js';
|
|
7
|
+
import { UserMenuContent } from '../../user/UserMenuContent/user-menu-content.js';
|
|
8
8
|
|
|
9
9
|
/** Sidebar footer control: the signed-in user plus their account menu. */
|
|
10
10
|
function NavUser({ user, ...menuProps }) {
|
|
@@ -1,41 +1,14 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import '../../ui/Alert/alert.js';
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import { createPortal } from 'react-dom';
|
|
5
|
-
import '../../ui/Alert/alert-context.js';
|
|
6
|
-
import '../../ui/Alert/alert.css';
|
|
7
|
-
import '../../ui/Avatar/avatar.js';
|
|
8
|
-
import { Button } from '../../ui/Button/button.js';
|
|
9
|
-
import '../../ui/Chip/chip.js';
|
|
10
|
-
import '../../ui/ChipSelect/chip-select.js';
|
|
11
|
-
import '../../ui/CodeBlock/code-block.js';
|
|
12
2
|
import cn from 'clsx';
|
|
13
|
-
import '../../ui/DevIndicator/dev-indicator.css';
|
|
14
|
-
import '../../ui/Dialog/dialog.js';
|
|
15
|
-
import '../../ui/EmptyState/empty-state.js';
|
|
16
|
-
import '../../ui/Icon/icon.js';
|
|
17
|
-
import '../../ui/List/list.js';
|
|
18
|
-
import '../../ui/Pagination/pagination.js';
|
|
19
|
-
import '../../ui/ProgressBar/progress-bar.js';
|
|
20
|
-
import '../../ui/Separator/separator.js';
|
|
21
|
-
import '../../ui/StatCard/stat-card.js';
|
|
22
|
-
import '../../ui/StatusDot/status-dot.js';
|
|
23
|
-
import '../../ui/StatusDot/status-dot-variants.js';
|
|
24
|
-
import '../../ui/StepProgress/step-progress.js';
|
|
25
|
-
import '../../ui/SwipeRow/swipe-row.js';
|
|
26
|
-
import '../../ui/Switch/switch.js';
|
|
27
|
-
import '../../ui/Table/table.js';
|
|
28
|
-
import '../../ui/TableActionCell/table-action-cell.js';
|
|
29
|
-
import '../../ui/TableToolbar/table-toolbar.js';
|
|
30
|
-
import '../../ui/Toggle/toggle.js';
|
|
31
|
-
import '../../ui/ToggleGroup/toggle-group.js';
|
|
32
|
-
import '../../ui/Tooltip/tooltip.js';
|
|
33
3
|
import { XIcon } from 'lucide-react';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { createPortal } from 'react-dom';
|
|
34
6
|
import { Slot } from '../../internal/slot.js';
|
|
35
7
|
import { useAnimationState } from '../../internal/use-animation-state.js';
|
|
36
8
|
import { useFocusTrap } from '../../internal/use-focus-trap.js';
|
|
37
9
|
import { useScrollLock } from '../../internal/use-scroll-lock.js';
|
|
38
10
|
import s from './sheet.module.scss.js';
|
|
11
|
+
import { Button } from '../../ui/Button/button.js';
|
|
39
12
|
|
|
40
13
|
const SheetContext = React.createContext(null);
|
|
41
14
|
function useSheet() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.js","sources":["../../../src/navigation/Sheet/sheet.tsx"],"sourcesContent":["import { Button } from '@constellation/ui';\nimport cn from 'clsx';\nimport { XIcon } from 'lucide-react';\nimport * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { Slot } from '../../internal/slot';\nimport { useAnimationState } from '../../internal/use-animation-state';\nimport { useFocusTrap } from '../../internal/use-focus-trap';\nimport { useScrollLock } from '../../internal/use-scroll-lock';\nimport s from './sheet.module.scss';\n\n// ── Context ──────────────────────────────────────────────\n\ntype SheetContextValue = {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n titleId: string;\n descriptionId: string;\n};\n\nconst SheetContext = React.createContext<SheetContextValue | null>(null);\n\nfunction useSheet() {\n const ctx = React.useContext(SheetContext);\n if (!ctx) throw new Error('Sheet compound components must be used within <Sheet>');\n return ctx;\n}\n\n// ── Root ─────────────────────────────────────────────────\n\nexport interface SheetProps {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n children?: React.ReactNode;\n}\n\nfunction Sheet({ open: controlledOpen, defaultOpen = false, onOpenChange, children }: SheetProps) {\n const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n const isControlled = controlledOpen !== undefined;\n const open = isControlled ? controlledOpen : internalOpen;\n const titleId = React.useId();\n const descriptionId = React.useId();\n\n const handleOpenChange = React.useCallback(\n (next: boolean) => {\n if (!isControlled) setInternalOpen(next);\n onOpenChange?.(next);\n },\n [isControlled, onOpenChange],\n );\n\n return (\n <SheetContext.Provider value={{ open, onOpenChange: handleOpenChange, titleId, descriptionId }}>\n {children}\n </SheetContext.Provider>\n );\n}\n\n// ── Trigger ──────────────────────────────────────────────\n\nexport interface SheetTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n asChild?: boolean;\n}\n\nconst SheetTrigger = React.forwardRef<HTMLButtonElement, SheetTriggerProps>(\n ({ asChild, onClick, children, ...props }, ref) => {\n const { onOpenChange } = useSheet();\n const Comp = asChild ? Slot : 'button';\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n onOpenChange(true);\n };\n\n return (\n <Comp ref={ref} data-slot={'sheet-trigger'} onClick={handleClick} {...props}>\n {children}\n </Comp>\n );\n },\n);\nSheetTrigger.displayName = 'SheetTrigger';\n\n// ── Close ────────────────────────────────────────────────\n\nexport interface SheetCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n asChild?: boolean;\n}\n\nconst SheetClose = React.forwardRef<HTMLButtonElement, SheetCloseProps>(\n ({ asChild, onClick, children, ...props }, ref) => {\n const { onOpenChange } = useSheet();\n const Comp = asChild ? Slot : 'button';\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n onOpenChange(false);\n };\n\n return (\n <Comp ref={ref} data-slot={'sheet-close'} onClick={handleClick} {...props}>\n {children}\n </Comp>\n );\n },\n);\nSheetClose.displayName = 'SheetClose';\n\n// ── Content ──────────────────────────────────────────────\n\nconst sideClassMap = {\n right: s['content-right'],\n left: s['content-left'],\n top: s['content-top'],\n bottom: s['content-bottom'],\n} as const;\n\ntype SheetSide = keyof typeof sideClassMap;\n\nexport type SheetContentProps = React.HTMLAttributes<HTMLDivElement> & {\n side?: SheetSide;\n /**\n * How much room the panel gets. `sm` suits a confirm or a short form; `lg`\n * is for a working surface — a queue of editable cards needs the width or\n * its own content starts scrolling sideways.\n */\n size?: 'sm' | 'md' | 'lg';\n /**\n * Float the panel off the viewport edge instead of sitting flush to it.\n * Reads as a card over the page rather than a second wall of it.\n */\n inset?: boolean;\n};\n\nconst SheetContent = React.forwardRef<HTMLDivElement, SheetContentProps>(\n ({ className, children, side = 'right', size = 'md', inset = false, ...props }, ref) => {\n const { open, onOpenChange, titleId, descriptionId } = useSheet();\n const { mounted, state } = useAnimationState(open, 250);\n const focusTrapRef = useFocusTrap(open);\n useScrollLock(mounted);\n\n React.useEffect(() => {\n if (!open) return;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n // A nested layer (an open Select, DatePicker or menu) marks Escape as\n // handled with preventDefault. Escape should dismiss the topmost layer\n // only, so the modal ignores an event something inside it already took.\n if (e.key === 'Escape' && !e.defaultPrevented) {\n onOpenChange(false);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [open, onOpenChange]);\n\n if (!mounted || state === 'idle') return null;\n\n return createPortal(\n <div data-constellation-portal={''} ref={focusTrapRef}>\n <div\n data-slot={'sheet-overlay'}\n data-state={state}\n className={s.overlay}\n onClick={() => onOpenChange(false)}\n aria-hidden={'true'}\n />\n <div\n ref={ref}\n data-slot={'sheet-content'}\n data-state={state}\n role={'dialog'}\n aria-modal={'true'}\n aria-labelledby={titleId}\n aria-describedby={descriptionId}\n className={cn(\n s['sheet-content'],\n sideClassMap[side],\n s[`size-${size}`],\n inset && s['content-inset'],\n className,\n )}\n onClick={e => e.stopPropagation()}\n {...props}\n >\n {children}\n <SheetClose className={s['close-button']} asChild>\n <Button variant={'ghost'} theme={'inherit'} iconOnly size={'sm'}>\n <XIcon />\n <span className={'srOnly'}>Close</span>\n </Button>\n </SheetClose>\n </div>\n </div>,\n document.body,\n );\n },\n);\nSheetContent.displayName = 'SheetContent';\n\n// ── Semantic sub-components ──────────────────────────────\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot={'sheet-header'} className={cn(s.header, className)} {...props} />;\n}\n\nfunction SheetBody({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot={'sheet-body'} className={cn(s.body, className)} {...props} />;\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot={'sheet-footer'} className={cn(s.footer, className)} {...props} />;\n}\n\nfunction SheetTitle({ className, ...props }: React.ComponentProps<'h2'>) {\n const { titleId } = useSheet();\n\n return (\n <h2 id={titleId} data-slot={'sheet-title'} className={cn(s.title, className)} {...props} />\n );\n}\n\nfunction SheetDescription({ className, ...props }: React.ComponentProps<'p'>) {\n const { descriptionId } = useSheet();\n\n return (\n <p\n id={descriptionId}\n data-slot={'sheet-description'}\n className={cn(s.description, className)}\n {...props}\n />\n );\n}\n\nexport {\n Sheet,\n SheetBody,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"sheet.js","sources":["../../../src/navigation/Sheet/sheet.tsx"],"sourcesContent":["import { Button } from '@constellation/ui';\nimport cn from 'clsx';\nimport { XIcon } from 'lucide-react';\nimport * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { Slot } from '../../internal/slot';\nimport { useAnimationState } from '../../internal/use-animation-state';\nimport { useFocusTrap } from '../../internal/use-focus-trap';\nimport { useScrollLock } from '../../internal/use-scroll-lock';\nimport s from './sheet.module.scss';\n\n// ── Context ──────────────────────────────────────────────\n\ntype SheetContextValue = {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n titleId: string;\n descriptionId: string;\n};\n\nconst SheetContext = React.createContext<SheetContextValue | null>(null);\n\nfunction useSheet() {\n const ctx = React.useContext(SheetContext);\n if (!ctx) throw new Error('Sheet compound components must be used within <Sheet>');\n return ctx;\n}\n\n// ── Root ─────────────────────────────────────────────────\n\nexport interface SheetProps {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n children?: React.ReactNode;\n}\n\nfunction Sheet({ open: controlledOpen, defaultOpen = false, onOpenChange, children }: SheetProps) {\n const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n const isControlled = controlledOpen !== undefined;\n const open = isControlled ? controlledOpen : internalOpen;\n const titleId = React.useId();\n const descriptionId = React.useId();\n\n const handleOpenChange = React.useCallback(\n (next: boolean) => {\n if (!isControlled) setInternalOpen(next);\n onOpenChange?.(next);\n },\n [isControlled, onOpenChange],\n );\n\n return (\n <SheetContext.Provider value={{ open, onOpenChange: handleOpenChange, titleId, descriptionId }}>\n {children}\n </SheetContext.Provider>\n );\n}\n\n// ── Trigger ──────────────────────────────────────────────\n\nexport interface SheetTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n asChild?: boolean;\n}\n\nconst SheetTrigger = React.forwardRef<HTMLButtonElement, SheetTriggerProps>(\n ({ asChild, onClick, children, ...props }, ref) => {\n const { onOpenChange } = useSheet();\n const Comp = asChild ? Slot : 'button';\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n onOpenChange(true);\n };\n\n return (\n <Comp ref={ref} data-slot={'sheet-trigger'} onClick={handleClick} {...props}>\n {children}\n </Comp>\n );\n },\n);\nSheetTrigger.displayName = 'SheetTrigger';\n\n// ── Close ────────────────────────────────────────────────\n\nexport interface SheetCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n asChild?: boolean;\n}\n\nconst SheetClose = React.forwardRef<HTMLButtonElement, SheetCloseProps>(\n ({ asChild, onClick, children, ...props }, ref) => {\n const { onOpenChange } = useSheet();\n const Comp = asChild ? Slot : 'button';\n\n const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n onClick?.(e);\n onOpenChange(false);\n };\n\n return (\n <Comp ref={ref} data-slot={'sheet-close'} onClick={handleClick} {...props}>\n {children}\n </Comp>\n );\n },\n);\nSheetClose.displayName = 'SheetClose';\n\n// ── Content ──────────────────────────────────────────────\n\nconst sideClassMap = {\n right: s['content-right'],\n left: s['content-left'],\n top: s['content-top'],\n bottom: s['content-bottom'],\n} as const;\n\ntype SheetSide = keyof typeof sideClassMap;\n\nexport type SheetContentProps = React.HTMLAttributes<HTMLDivElement> & {\n side?: SheetSide;\n /**\n * How much room the panel gets. `sm` suits a confirm or a short form; `lg`\n * is for a working surface — a queue of editable cards needs the width or\n * its own content starts scrolling sideways.\n */\n size?: 'sm' | 'md' | 'lg';\n /**\n * Float the panel off the viewport edge instead of sitting flush to it.\n * Reads as a card over the page rather than a second wall of it.\n */\n inset?: boolean;\n};\n\nconst SheetContent = React.forwardRef<HTMLDivElement, SheetContentProps>(\n ({ className, children, side = 'right', size = 'md', inset = false, ...props }, ref) => {\n const { open, onOpenChange, titleId, descriptionId } = useSheet();\n const { mounted, state } = useAnimationState(open, 250);\n const focusTrapRef = useFocusTrap(open);\n useScrollLock(mounted);\n\n React.useEffect(() => {\n if (!open) return;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n // A nested layer (an open Select, DatePicker or menu) marks Escape as\n // handled with preventDefault. Escape should dismiss the topmost layer\n // only, so the modal ignores an event something inside it already took.\n if (e.key === 'Escape' && !e.defaultPrevented) {\n onOpenChange(false);\n }\n };\n\n document.addEventListener('keydown', handleKeyDown);\n return () => document.removeEventListener('keydown', handleKeyDown);\n }, [open, onOpenChange]);\n\n if (!mounted || state === 'idle') return null;\n\n return createPortal(\n <div data-constellation-portal={''} ref={focusTrapRef}>\n <div\n data-slot={'sheet-overlay'}\n data-state={state}\n className={s.overlay}\n onClick={() => onOpenChange(false)}\n aria-hidden={'true'}\n />\n <div\n ref={ref}\n data-slot={'sheet-content'}\n data-state={state}\n role={'dialog'}\n aria-modal={'true'}\n aria-labelledby={titleId}\n aria-describedby={descriptionId}\n className={cn(\n s['sheet-content'],\n sideClassMap[side],\n s[`size-${size}`],\n inset && s['content-inset'],\n className,\n )}\n onClick={e => e.stopPropagation()}\n {...props}\n >\n {children}\n <SheetClose className={s['close-button']} asChild>\n <Button variant={'ghost'} theme={'inherit'} iconOnly size={'sm'}>\n <XIcon />\n <span className={'srOnly'}>Close</span>\n </Button>\n </SheetClose>\n </div>\n </div>,\n document.body,\n );\n },\n);\nSheetContent.displayName = 'SheetContent';\n\n// ── Semantic sub-components ──────────────────────────────\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot={'sheet-header'} className={cn(s.header, className)} {...props} />;\n}\n\nfunction SheetBody({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot={'sheet-body'} className={cn(s.body, className)} {...props} />;\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot={'sheet-footer'} className={cn(s.footer, className)} {...props} />;\n}\n\nfunction SheetTitle({ className, ...props }: React.ComponentProps<'h2'>) {\n const { titleId } = useSheet();\n\n return (\n <h2 id={titleId} data-slot={'sheet-title'} className={cn(s.title, className)} {...props} />\n );\n}\n\nfunction SheetDescription({ className, ...props }: React.ComponentProps<'p'>) {\n const { descriptionId } = useSheet();\n\n return (\n <p\n id={descriptionId}\n data-slot={'sheet-description'}\n className={cn(s.description, className)}\n {...props}\n />\n );\n}\n\nexport {\n Sheet,\n SheetBody,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
package/dist/navigation.d.ts
CHANGED
|
@@ -62,7 +62,7 @@ declare function DropdownMenuSubContent({ className, ...props }: React.HTMLAttri
|
|
|
62
62
|
declare const linkVariants: (props?: ({
|
|
63
63
|
underline?: boolean | null | undefined;
|
|
64
64
|
hover?: "default" | "none" | null | undefined;
|
|
65
|
-
theme?: "
|
|
65
|
+
theme?: "destructive" | "inherit" | "primary" | "secondary" | "warning" | "success" | "info" | "slate" | null | undefined;
|
|
66
66
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
67
67
|
|
|
68
68
|
interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick'>, VariantProps<typeof linkVariants> {
|
|
@@ -4,37 +4,10 @@ import '../../layout/Sidebar/sidebar-context.js';
|
|
|
4
4
|
import '../../ui/Alert/alert-context.js';
|
|
5
5
|
import '../../ui/Table/table-sort-context.js';
|
|
6
6
|
import { useAppearance } from '../../hooks/use-appearance.js';
|
|
7
|
-
import '../../ui/Alert/alert.js';
|
|
8
|
-
import 'react-dom';
|
|
9
|
-
import '../../ui/Alert/alert.css';
|
|
10
|
-
import '../../ui/Avatar/avatar.js';
|
|
11
|
-
import { Button } from '../../ui/Button/button.js';
|
|
12
|
-
import '../../ui/Chip/chip.js';
|
|
13
|
-
import '../../ui/ChipSelect/chip-select.js';
|
|
14
|
-
import '../../ui/CodeBlock/code-block.js';
|
|
15
7
|
import cn from 'clsx';
|
|
16
|
-
import '../../ui/DevIndicator/dev-indicator.css';
|
|
17
|
-
import '../../ui/Dialog/dialog.js';
|
|
18
|
-
import '../../ui/EmptyState/empty-state.js';
|
|
19
|
-
import '../../ui/Icon/icon.js';
|
|
20
|
-
import '../../ui/List/list.js';
|
|
21
|
-
import '../../ui/Pagination/pagination.js';
|
|
22
|
-
import '../../ui/ProgressBar/progress-bar.js';
|
|
23
|
-
import '../../ui/Separator/separator.js';
|
|
24
|
-
import '../../ui/StatCard/stat-card.js';
|
|
25
|
-
import '../../ui/StatusDot/status-dot.js';
|
|
26
|
-
import '../../ui/StatusDot/status-dot-variants.js';
|
|
27
|
-
import '../../ui/StepProgress/step-progress.js';
|
|
28
|
-
import '../../ui/SwipeRow/swipe-row.js';
|
|
29
|
-
import '../../ui/Switch/switch.js';
|
|
30
|
-
import '../../ui/Table/table.js';
|
|
31
|
-
import '../../ui/TableActionCell/table-action-cell.js';
|
|
32
|
-
import '../../ui/TableToolbar/table-toolbar.js';
|
|
33
|
-
import '../../ui/Toggle/toggle.js';
|
|
34
|
-
import '../../ui/ToggleGroup/toggle-group.js';
|
|
35
|
-
import '../../ui/Tooltip/tooltip.js';
|
|
36
8
|
import { SunIcon, MoonIcon, MonitorIcon } from 'lucide-react';
|
|
37
9
|
import s from './appearance-tabs.module.scss.js';
|
|
10
|
+
import { Button } from '../../ui/Button/button.js';
|
|
38
11
|
|
|
39
12
|
function AppearanceTabs({ className = '', iconOnly = false, ...props }) {
|
|
40
13
|
const { appearance, updateAppearance } = useAppearance();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"appearance-tabs.js","sources":["../../../src/settings/AppearanceTabs/appearance-tabs.tsx"],"sourcesContent":["import { type Appearance, useAppearance } from '@constellation/hooks';\nimport { Button } from '@constellation/ui';\nimport cn from 'clsx';\nimport { type LucideIcon, MonitorIcon, MoonIcon, SunIcon } from 'lucide-react';\nimport * as React from 'react';\nimport s from './appearance-tabs.module.scss';\n\ntype AppearanceTabsProps = React.HTMLAttributes<HTMLDivElement> & {\n iconOnly?: boolean;\n};\n\nexport function AppearanceTabs({\n className = '',\n iconOnly = false,\n ...props\n}: AppearanceTabsProps) {\n const { appearance, updateAppearance } = useAppearance();\n\n const tabs: { value: Appearance; icon: LucideIcon; label: string }[] = [\n { value: 'light', icon: SunIcon, label: 'Light' },\n { value: 'dark', icon: MoonIcon, label: 'Dark' },\n { value: 'system', icon: MonitorIcon, label: 'System' },\n ];\n\n return (\n <div data-slot={'appearance-tabs'} className={cn(s['tabs-root'], className)} {...props}>\n {tabs.map(({ value, icon: Icon, label }) => (\n <Button\n key={value}\n variant={'ghost'}\n theme={'inherit'}\n rounded\n onClick={() => updateAppearance(value)}\n aria-label={label}\n iconOnly={iconOnly}\n aria-pressed={appearance === value}\n className={cn(s['tab-button'], appearance === value && s['tab-button-active'])}\n title={iconOnly ? label : undefined}\n >\n <Icon />\n {!iconOnly && <span>{label}</span>}\n </Button>\n ))}\n </div>\n );\n}\n"],"names":["_jsx","_jsxs"],"mappings":"
|
|
1
|
+
{"version":3,"file":"appearance-tabs.js","sources":["../../../src/settings/AppearanceTabs/appearance-tabs.tsx"],"sourcesContent":["import { type Appearance, useAppearance } from '@constellation/hooks';\nimport { Button } from '@constellation/ui';\nimport cn from 'clsx';\nimport { type LucideIcon, MonitorIcon, MoonIcon, SunIcon } from 'lucide-react';\nimport * as React from 'react';\nimport s from './appearance-tabs.module.scss';\n\ntype AppearanceTabsProps = React.HTMLAttributes<HTMLDivElement> & {\n iconOnly?: boolean;\n};\n\nexport function AppearanceTabs({\n className = '',\n iconOnly = false,\n ...props\n}: AppearanceTabsProps) {\n const { appearance, updateAppearance } = useAppearance();\n\n const tabs: { value: Appearance; icon: LucideIcon; label: string }[] = [\n { value: 'light', icon: SunIcon, label: 'Light' },\n { value: 'dark', icon: MoonIcon, label: 'Dark' },\n { value: 'system', icon: MonitorIcon, label: 'System' },\n ];\n\n return (\n <div data-slot={'appearance-tabs'} className={cn(s['tabs-root'], className)} {...props}>\n {tabs.map(({ value, icon: Icon, label }) => (\n <Button\n key={value}\n variant={'ghost'}\n theme={'inherit'}\n rounded\n onClick={() => updateAppearance(value)}\n aria-label={label}\n iconOnly={iconOnly}\n aria-pressed={appearance === value}\n className={cn(s['tab-button'], appearance === value && s['tab-button-active'])}\n title={iconOnly ? label : undefined}\n >\n <Icon />\n {!iconOnly && <span>{label}</span>}\n </Button>\n ))}\n </div>\n );\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;AAWM,SAAU,cAAc,CAAC,EAC7B,SAAS,GAAG,EAAE,EACd,QAAQ,GAAG,KAAK,EAChB,GAAG,KAAK,EACY,EAAA;IACpB,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,aAAa,EAAE;AAExD,IAAA,MAAM,IAAI,GAA6D;QACrE,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;QACjD,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE;QAChD,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE;KACxD;IAED,QACEA,GAAA,CAAA,KAAA,EAAA,EAAA,WAAA,EAAgB,iBAAiB,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,QAAA,EACnF,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MACrCC,IAAA,CAAC,MAAM,EAAA,EAEL,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,SAAS,EAChB,OAAO,EAAA,IAAA,EACP,OAAO,EAAE,MAAM,gBAAgB,CAAC,KAAK,CAAC,gBAC1B,KAAK,EACjB,QAAQ,EAAE,QAAQ,EAAA,cAAA,EACJ,UAAU,KAAK,KAAK,EAClC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,UAAU,KAAK,KAAK,IAAI,CAAC,CAAC,mBAAmB,CAAC,CAAC,EAC9E,KAAK,EAAE,QAAQ,GAAG,KAAK,GAAG,SAAS,EAAA,QAAA,EAAA,CAEnCD,GAAA,CAAC,IAAI,EAAA,EAAA,CAAG,EACP,CAAC,QAAQ,IAAIA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,KAAK,EAAA,CAAQ,CAAA,EAAA,EAZ7B,KAAK,CAaH,CACV,CAAC,EAAA,CACE;AAEV;;"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
4
|
+
|
|
5
|
+
declare const buttonVariants: (props?: ({
|
|
6
|
+
variant?: "contained" | "outlined" | "ghost" | null | undefined;
|
|
7
|
+
theme?: "primary" | "secondary" | "destructive" | "success" | "warning" | "info" | "slate" | "inherit" | null | undefined;
|
|
8
|
+
size?: "sm" | "md" | "lg" | "xs" | null | undefined;
|
|
9
|
+
iconOnly?: boolean | null | undefined;
|
|
10
|
+
fullWidth?: boolean | null | undefined;
|
|
11
|
+
rounded?: boolean | "extra" | null | undefined;
|
|
12
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
13
|
+
|
|
14
|
+
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
15
|
+
/** A colour outside the theme scale; overrides the theme's colour roles. */
|
|
16
|
+
color?: string;
|
|
17
|
+
/** Ink for `contained` when `color` is set and the default contrast is wrong. */
|
|
18
|
+
onColor?: string;
|
|
19
|
+
asChild?: boolean;
|
|
20
|
+
}
|
|
21
|
+
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
22
|
+
|
|
23
|
+
declare function TooltipProvider({ children, delayDuration, }: {
|
|
24
|
+
children?: React.ReactNode;
|
|
25
|
+
delayDuration?: number;
|
|
26
|
+
}): React.JSX.Element;
|
|
27
|
+
interface TooltipProps {
|
|
28
|
+
children?: React.ReactNode;
|
|
29
|
+
open?: boolean;
|
|
30
|
+
defaultOpen?: boolean;
|
|
31
|
+
onOpenChange?: (open: boolean) => void;
|
|
32
|
+
delayDuration?: number;
|
|
33
|
+
}
|
|
34
|
+
declare function Tooltip({ children, open: controlledOpen, defaultOpen, onOpenChange, delayDuration, }: TooltipProps): React.JSX.Element;
|
|
35
|
+
interface TooltipTriggerProps extends React.HTMLAttributes<HTMLElement> {
|
|
36
|
+
asChild?: boolean;
|
|
37
|
+
}
|
|
38
|
+
declare function TooltipTrigger({ asChild, children, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props }: TooltipTriggerProps): React.JSX.Element;
|
|
39
|
+
interface TooltipContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
40
|
+
side?: 'top' | 'right' | 'bottom' | 'left';
|
|
41
|
+
sideOffset?: number;
|
|
42
|
+
}
|
|
43
|
+
declare function TooltipContent({ className, children, side, sideOffset, ...props }: TooltipContentProps): React.ReactPortal | null;
|
|
44
|
+
|
|
45
|
+
export { Button as B, Tooltip as T, TooltipContent as b, TooltipProvider as e, TooltipTrigger as f };
|
|
46
|
+
export type { ButtonProps as a, TooltipContentProps as c, TooltipProps as d, TooltipTriggerProps as g };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
|
+
import type { FieldAppearance } from './theme';
|
|
2
3
|
export type DatePickerProps = {
|
|
3
4
|
value?: string;
|
|
4
5
|
defaultValue?: string;
|
|
@@ -6,6 +7,7 @@ export type DatePickerProps = {
|
|
|
6
7
|
label?: React.ReactNode;
|
|
7
8
|
helperText?: React.ReactNode;
|
|
8
9
|
error?: boolean;
|
|
10
|
+
appearance?: FieldAppearance;
|
|
9
11
|
disabled?: boolean;
|
|
10
12
|
sizeVariant?: 'sm' | 'md';
|
|
11
13
|
placeholder?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/types/form/date-picker.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/types/form/date-picker.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import type React from 'react';
|
|
2
|
+
import type { FieldAppearance } from './theme';
|
|
2
3
|
export type SelectAlign = 'start' | 'center' | 'end';
|
|
3
4
|
export type SelectSide = 'top' | 'bottom' | 'left' | 'right';
|
|
4
5
|
export type SelectPosition = 'item-aligned' | 'popper';
|
|
@@ -27,6 +28,7 @@ type SelectFieldBaseProps = Omit<SelectProps, 'value' | 'defaultValue' | 'onValu
|
|
|
27
28
|
label?: React.ReactNode;
|
|
28
29
|
helperText?: React.ReactNode;
|
|
29
30
|
error?: boolean;
|
|
31
|
+
appearance?: FieldAppearance;
|
|
30
32
|
placeholder?: string;
|
|
31
33
|
fieldClassName?: string;
|
|
32
34
|
contentProps?: SelectFieldContentProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/types/form/select.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/types/form/select.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AACrD,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAC7D,MAAM,MAAM,cAAc,GAAG,cAAc,GAAG,QAAQ,CAAC;AAEvD,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACtE,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,KAAK,uBAAuB,GAAG,IAAI,CACjC,kBAAkB,EAClB,OAAO,GAAG,WAAW,GAAG,kBAAkB,GAAG,MAAM,GAAG,YAAY,CACnE,CAAC;AAEF,KAAK,oBAAoB,GAAG,IAAI,CAAC,WAAW,EAAE,OAAO,GAAG,cAAc,GAAG,eAAe,CAAC,GAAG;IAC1F,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,uBAAuB,CAAC;IACvC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,KAAK,sBAAsB,GAAG,oBAAoB,GAAG;IACnD,QAAQ,CAAC,EAAE,KAAK,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,KAAK,qBAAqB,GAAG,oBAAoB,GAAG;IAClD,QAAQ,EAAE,IAAI,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,sBAAsB,GAAG,qBAAqB,CAAC"}
|
|
@@ -1,2 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* How a field draws its box.
|
|
3
|
+
*
|
|
4
|
+
* `outlined` is the library's own look: a hairline box the label notches into.
|
|
5
|
+
* `filled` drops the border for a quiet opaque ground; `underline` keeps only
|
|
6
|
+
* the bottom edge. Set it per field, or once for a whole tree with
|
|
7
|
+
* `data-field-appearance` on an ancestor — a field's own prop still wins.
|
|
8
|
+
*/
|
|
9
|
+
export type FieldAppearance = 'outlined' | 'filled' | 'underline';
|
|
1
10
|
export type FormTheme = 'inherit' | 'primary' | 'secondary' | 'destructive' | 'warning' | 'success' | 'info' | 'slate';
|
|
2
11
|
//# sourceMappingURL=theme.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/types/form/theme.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GACnB,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC"}
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/types/form/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,QAAQ,GAAG,WAAW,CAAC;AAElE,MAAM,MAAM,SAAS,GACnB,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC"}
|
|
@@ -1,4 +1,13 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
|
+
/*
|
|
3
|
+
* Headings read the brand's display face when there is one.
|
|
4
|
+
*
|
|
5
|
+
* `--font-display` and `--font-display-weight` are unset by default, so every
|
|
6
|
+
* heading falls back to `--font-sans` at the weight it always had. They are
|
|
7
|
+
* read here rather than declared on `:root` because a `:root` declaration
|
|
8
|
+
* would resolve `var(--font-sans)` once, at the root, and a subtree that
|
|
9
|
+
* re-points `--font-sans` would keep the old face in its headings.
|
|
10
|
+
*/
|
|
2
11
|
.typography-module_typography__FAx__ {
|
|
3
12
|
/*
|
|
4
13
|
* ONE FACE FOR EVERYTHING, and it is sans.
|
|
@@ -27,6 +36,8 @@
|
|
|
27
36
|
padding: 0;
|
|
28
37
|
}
|
|
29
38
|
.typography-module_typography__FAx__.typography-module_h1__Chrx6 {
|
|
39
|
+
--typography-font: var(--font-display, var(--font-sans));
|
|
40
|
+
font-weight: var(--font-display-weight, 400);
|
|
30
41
|
color: var(--text-heading);
|
|
31
42
|
--typography-font-size: var(--font-size-h1);
|
|
32
43
|
line-height: 1.25;
|
|
@@ -37,6 +48,8 @@
|
|
|
37
48
|
}
|
|
38
49
|
}
|
|
39
50
|
.typography-module_typography__FAx__.typography-module_h2__6Qpwf {
|
|
51
|
+
--typography-font: var(--font-display, var(--font-sans));
|
|
52
|
+
font-weight: var(--font-display-weight, 400);
|
|
40
53
|
color: var(--text-heading);
|
|
41
54
|
--typography-font-size: var(--font-size-h2);
|
|
42
55
|
line-height: 1.25;
|
|
@@ -47,6 +60,8 @@
|
|
|
47
60
|
}
|
|
48
61
|
}
|
|
49
62
|
.typography-module_typography__FAx__.typography-module_h3__1eGbP {
|
|
63
|
+
--typography-font: var(--font-display, var(--font-sans));
|
|
64
|
+
font-weight: var(--font-display-weight, 400);
|
|
50
65
|
color: var(--text-heading);
|
|
51
66
|
--typography-font-size: 2rem;
|
|
52
67
|
line-height: 1.25;
|
|
@@ -57,6 +72,8 @@
|
|
|
57
72
|
}
|
|
58
73
|
}
|
|
59
74
|
.typography-module_typography__FAx__.typography-module_h4__TEi6l {
|
|
75
|
+
--typography-font: var(--font-display, var(--font-sans));
|
|
76
|
+
font-weight: var(--font-display-weight, 400);
|
|
60
77
|
color: var(--text-heading);
|
|
61
78
|
--typography-font-size: var(--font-size-h3);
|
|
62
79
|
line-height: 1.25;
|
|
@@ -67,9 +84,10 @@
|
|
|
67
84
|
}
|
|
68
85
|
}
|
|
69
86
|
.typography-module_typography__FAx__.typography-module_h5__pY2ZF {
|
|
87
|
+
--typography-font: var(--font-display, var(--font-sans));
|
|
88
|
+
font-weight: var(--font-display-weight, 500);
|
|
70
89
|
color: var(--text-heading);
|
|
71
90
|
--typography-font-size: var(--font-size-h4);
|
|
72
|
-
font-weight: 500;
|
|
73
91
|
line-height: 1.25;
|
|
74
92
|
}
|
|
75
93
|
@media (max-width: 768px) {
|
|
@@ -78,6 +96,8 @@
|
|
|
78
96
|
}
|
|
79
97
|
}
|
|
80
98
|
.typography-module_typography__FAx__.typography-module_h6__jzeAZ {
|
|
99
|
+
--typography-font: var(--font-display, var(--font-sans));
|
|
100
|
+
font-weight: var(--font-display-weight, 400);
|
|
81
101
|
color: var(--text-heading);
|
|
82
102
|
--typography-font-size: var(--font-size-h5);
|
|
83
103
|
line-height: 1.25;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const buttonVariants: (props?: ({
|
|
2
|
-
variant?: "
|
|
2
|
+
variant?: "outlined" | "ghost" | "contained" | null | undefined;
|
|
3
3
|
theme?: "inherit" | "primary" | "secondary" | "destructive" | "warning" | "success" | "info" | "slate" | null | undefined;
|
|
4
4
|
size?: "sm" | "md" | "lg" | "xs" | null | undefined;
|
|
5
5
|
iconOnly?: boolean | null | undefined;
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
border-radius: var(--size-1);
|
|
77
77
|
}
|
|
78
78
|
.button-module_button--extra-rounded__B9xBI {
|
|
79
|
-
border-radius: var(--size-5);
|
|
79
|
+
border-radius: var(--button-radius, var(--size-5));
|
|
80
80
|
}
|
|
81
81
|
.button-module_button--contained__YQQ33.button-module_button--primary__BO20b {
|
|
82
82
|
--button-ripple-color: var(--button-color, var(--primary-light));
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const iconVariants: (props?: ({
|
|
2
|
-
variant?: "
|
|
2
|
+
variant?: "outlined" | "ghost" | "contained" | "plain" | null | undefined;
|
|
3
3
|
theme?: "inherit" | "primary" | "secondary" | "destructive" | "warning" | "success" | "info" | "slate" | null | undefined;
|
|
4
4
|
size?: "sm" | "md" | "lg" | "xs" | null | undefined;
|
|
5
5
|
rounded?: boolean | "extra" | null | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"swipe-row-variants.js","sources":["../../../src/ui/SwipeRow/swipe-row-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\
|
|
1
|
+
{"version":3,"file":"swipe-row-variants.js","sources":["../../../src/ui/SwipeRow/swipe-row-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport s from './swipe-row.module.scss';\n\nexport const swipeRowVariants = cva(s['swipe-row'], {\n variants: {\n theme: {\n primary: s['swipe-row--primary'],\n secondary: s['swipe-row--secondary'],\n destructive: s['swipe-row--destructive'],\n warning: s['swipe-row--warning'],\n success: s['swipe-row--success'],\n info: s['swipe-row--info'],\n slate: s['swipe-row--slate'],\n },\n },\n defaultVariants: {\n theme: 'destructive',\n },\n});\n"],"names":[],"mappings":";;;AAGO,MAAM,gBAAgB,GAAG,GAAG,CAAC,CAAC,CAAC,WAAW,CAAC,EAAE;AAClD,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAE,CAAC,CAAC,oBAAoB,CAAC;AAChC,YAAA,SAAS,EAAE,CAAC,CAAC,sBAAsB,CAAC;AACpC,YAAA,WAAW,EAAE,CAAC,CAAC,wBAAwB,CAAC;AACxC,YAAA,OAAO,EAAE,CAAC,CAAC,oBAAoB,CAAC;AAChC,YAAA,OAAO,EAAE,CAAC,CAAC,oBAAoB,CAAC;AAChC,YAAA,IAAI,EAAE,CAAC,CAAC,iBAAiB,CAAC;AAC1B,YAAA,KAAK,EAAE,CAAC,CAAC,kBAAkB,CAAC;AAC7B,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,KAAK,EAAE,aAAa;AACrB,KAAA;AACF,CAAA;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"swipe-row.js","sources":["../../../src/ui/SwipeRow/swipe-row.tsx"],"sourcesContent":["import { type VariantProps } from 'class-variance-authority';\r\nimport cn from 'clsx';\r\nimport * as React from 'react';\r\nimport { swipeRowVariants } from './swipe-row-variants';\r\nimport s from './swipe-row.module.scss';\r\n\r\n/*\r\n * Swipe left to act on a row, the way a phone's own lists do.\r\n *\r\n * Short swipe: the row rests open on its action, and a tap on the action does\r\n * it. Long swipe, past half the row: it is done on release. A tap anywhere\r\n * else on an open row only closes it, so a swipe cannot also open what the row\r\n * opens.\r\n *\r\n * Touch and pen only. A mouse drag is how text gets selected, and a desktop\r\n * already has the row's own button one click away. A swipe row is an\r\n * accelerator, never the only way to the action.\r\n *\r\n * ⚠️ No transform at rest. A transformed ancestor becomes the containing block\r\n * for `position: fixed` children, so a card that lifts out of its row would\r\n * centre itself in the row instead of on the screen. The offset is written\r\n * only while the row is off centre and removed at zero.\r\n *\r\n * ⚠️ `touch-action: pan-y` gives vertical scrolling to the browser and leaves\r\n * horizontal movement to us. A gesture is not claimed until it has clearly\r\n * gone sideways, so a slightly diagonal scroll still scrolls.\r\n */\r\nconst DECIDE_PX = 8;\r\nconst REST_PX = 88;\r\nconst OPEN_AT_PX = 56;\r\nconst COMMIT_SHARE = 0.5;\r\nconst LEAVE_MS = 160;\r\nconst SWALLOW_MS = 350;\r\nconst FIELD_SELECTOR = 'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])';\r\n\r\ntype Gesture = { x: number; y: number; base: number; claimed: boolean; id: number };\r\n\r\nexport interface SwipeRowProps\r\n extends\r\n Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,\r\n VariantProps<typeof swipeRowVariants> {\r\n children: React.ReactNode;\r\n /** What the revealed action says. */\r\n label?: React.ReactNode;\r\n /** Runs once the row has slid away, from a long swipe or a tap on the action. */\r\n onAction: () => void;\r\n disabled?: boolean;\r\n}\r\n\r\nconst SwipeRow = React.forwardRef<HTMLDivElement, SwipeRowProps>(\r\n ({ children, label = 'Delete', onAction, disabled, theme, className, ...props }, ref) => {\r\n const root = React.useRef<HTMLDivElement | null>(null);\r\n const content = React.useRef<HTMLDivElement | null>(null);\r\n const gesture = React.useRef<Gesture | null>(null);\r\n const swallowUntil = React.useRef(0);\r\n const [offset, setOffset] = React.useState(0);\r\n const [settling, setSettling] = React.useState(false);\r\n const [leaving, setLeaving] = React.useState(false);\r\n\r\n const setRoot = (el: HTMLDivElement | null) => {\r\n root.current = el;\r\n if (typeof ref === 'function') ref(el);\r\n else if (ref) ref.current = el;\r\n };\r\n\r\n const width = () => root.current?.offsetWidth || 320;\r\n\r\n const moveTo = (x: number) => {\r\n setOffset(x);\r\n const el = content.current;\r\n if (!el) return;\r\n if (x) el.style.transform = `translateX(${x}px)`;\r\n else el.style.removeProperty('transform');\r\n };\r\n\r\n // A row resting open closes when anything else on the page is touched.\r\n React.useEffect(() => {\r\n if (!offset || gesture.current || leaving) return undefined;\r\n const away = (e: PointerEvent) => {\r\n if (root.current?.contains(e.target as Node)) return;\r\n setSettling(true);\r\n moveTo(0);\r\n };\r\n document.addEventListener('pointerdown', away, true);\r\n return () => document.removeEventListener('pointerdown', away, true);\r\n }, [offset, leaving]);\r\n\r\n React.useEffect(() => {\r\n if (disabled && offset && !leaving) moveTo(0);\r\n }, [disabled, offset, leaving]);\r\n\r\n // The action that runs is the one current when the slide ends, not the one\r\n // the slide started under.\r\n const action = React.useRef(onAction);\r\n action.current = onAction;\r\n\r\n // The host removes the row on action; if it keeps it instead (a staple\r\n // marked out stays on its shelf), the row comes back to centre.\r\n React.useEffect(() => {\r\n if (!leaving) return undefined;\r\n const t = window.setTimeout(() => {\r\n action.current();\r\n setLeaving(false);\r\n setSettling(false);\r\n moveTo(0);\r\n }, LEAVE_MS);\r\n return () => window.clearTimeout(t);\r\n }, [leaving]);\r\n\r\n const commit = () => {\r\n setSettling(true);\r\n setLeaving(true);\r\n moveTo(-width());\r\n };\r\n\r\n const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {\r\n props.onPointerDown?.(e);\r\n if (disabled || leaving || e.pointerType === 'mouse' || !e.isPrimary) return;\r\n // A drag inside a field moves its caret or selection; it is not a swipe.\r\n if ((e.target as Element).closest?.(FIELD_SELECTOR)) return;\r\n gesture.current = {\r\n x: e.clientX,\r\n y: e.clientY,\r\n base: offset,\r\n claimed: false,\r\n id: e.pointerId,\r\n };\r\n setSettling(false);\r\n };\r\n\r\n const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {\r\n props.onPointerMove?.(e);\r\n const g = gesture.current;\r\n if (!g || e.pointerId !== g.id) return;\r\n const dx = e.clientX - g.x;\r\n const dy = e.clientY - g.y;\r\n if (!g.claimed) {\r\n if (Math.abs(dy) > DECIDE_PX && Math.abs(dy) > Math.abs(dx)) {\r\n gesture.current = null;\r\n return;\r\n }\r\n if (Math.abs(dx) < DECIDE_PX || Math.abs(dx) < Math.abs(dy) * 1.2) return;\r\n g.claimed = true;\r\n root.current?.setPointerCapture?.(e.pointerId);\r\n }\r\n moveTo(Math.min(0, g.base + dx));\r\n };\r\n\r\n const onPointerEnd = (e: React.PointerEvent<HTMLDivElement>) => {\r\n if (e.type === 'pointerup') props.onPointerUp?.(e);\r\n else props.onPointerCancel?.(e);\r\n const g = gesture.current;\r\n gesture.current = null;\r\n if (!g || e.pointerId !== g.id) return;\r\n if (!g.claimed) {\r\n // A plain tap on a row resting open closes it rather than opening it.\r\n if (g.base) {\r\n swallowUntil.current = performance.now() + SWALLOW_MS;\r\n setSettling(true);\r\n moveTo(0);\r\n }\r\n return;\r\n }\r\n swallowUntil.current = performance.now() + SWALLOW_MS;\r\n setSettling(true);\r\n if (e.type !== 'pointercancel' && offset < -width() * COMMIT_SHARE) commit();\r\n else moveTo(offset < -OPEN_AT_PX ? -REST_PX : 0);\r\n };\r\n\r\n // The click a swipe ends with belongs to the swipe, not to the row under it.\r\n // ⚠️ Time-boxed, not a flag: a drag usually produces NO click, and a flag\r\n // left standing ate the next real tap — the one on the action itself.\r\n const onClickCapture = (e: React.MouseEvent<HTMLDivElement>) => {\r\n props.onClickCapture?.(e);\r\n if (performance.now() > swallowUntil.current) return;\r\n swallowUntil.current = 0;\r\n e.stopPropagation();\r\n e.preventDefault();\r\n };\r\n\r\n return (\r\n <div\r\n {...props}\r\n ref={setRoot}\r\n className={cn(swipeRowVariants({ theme }), className)}\r\n data-slot={'swipe-row'}\r\n data-open={offset ? '' : undefined}\r\n data-settling={settling ? '' : undefined}\r\n data-leaving={leaving ? '' : undefined}\r\n onPointerDown={onPointerDown}\r\n onPointerMove={onPointerMove}\r\n onPointerUp={onPointerEnd}\r\n onPointerCancel={onPointerEnd}\r\n onClickCapture={onClickCapture}\r\n >\r\n {offset ? (\r\n <button\r\n type={'button'}\r\n className={s['swipe-row__action']}\r\n data-slot={'swipe-row-action'}\r\n data-armed={offset < -width() * COMMIT_SHARE ? '' : undefined}\r\n onPointerDown={e => e.stopPropagation()}\r\n onClick={e => {\r\n e.stopPropagation();\r\n if (!leaving) commit();\r\n }}\r\n >\r\n {label}\r\n </button>\r\n ) : null}\r\n <div\r\n ref={content}\r\n className={s['swipe-row__content']}\r\n data-slot={'swipe-row-content'}\r\n onTransitionEnd={() => setSettling(false)}\r\n >\r\n {children}\r\n </div>\r\n </div>\r\n );\r\n },\r\n);\r\nSwipeRow.displayName = 'SwipeRow';\r\n\r\nexport { SwipeRow };\r\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"swipe-row.js","sources":["../../../src/ui/SwipeRow/swipe-row.tsx"],"sourcesContent":["import { type VariantProps } from 'class-variance-authority';\nimport cn from 'clsx';\nimport * as React from 'react';\nimport { swipeRowVariants } from './swipe-row-variants';\nimport s from './swipe-row.module.scss';\n\n/*\n * Swipe left to act on a row, the way a phone's own lists do.\n *\n * Short swipe: the row rests open on its action, and a tap on the action does\n * it. Long swipe, past half the row: it is done on release. A tap anywhere\n * else on an open row only closes it, so a swipe cannot also open what the row\n * opens.\n *\n * Touch and pen only. A mouse drag is how text gets selected, and a desktop\n * already has the row's own button one click away. A swipe row is an\n * accelerator, never the only way to the action.\n *\n * ⚠️ No transform at rest. A transformed ancestor becomes the containing block\n * for `position: fixed` children, so a card that lifts out of its row would\n * centre itself in the row instead of on the screen. The offset is written\n * only while the row is off centre and removed at zero.\n *\n * ⚠️ `touch-action: pan-y` gives vertical scrolling to the browser and leaves\n * horizontal movement to us. A gesture is not claimed until it has clearly\n * gone sideways, so a slightly diagonal scroll still scrolls.\n */\nconst DECIDE_PX = 8;\nconst REST_PX = 88;\nconst OPEN_AT_PX = 56;\nconst COMMIT_SHARE = 0.5;\nconst LEAVE_MS = 160;\nconst SWALLOW_MS = 350;\nconst FIELD_SELECTOR = 'input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])';\n\ntype Gesture = { x: number; y: number; base: number; claimed: boolean; id: number };\n\nexport interface SwipeRowProps\n extends\n Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,\n VariantProps<typeof swipeRowVariants> {\n children: React.ReactNode;\n /** What the revealed action says. */\n label?: React.ReactNode;\n /** Runs once the row has slid away, from a long swipe or a tap on the action. */\n onAction: () => void;\n disabled?: boolean;\n}\n\nconst SwipeRow = React.forwardRef<HTMLDivElement, SwipeRowProps>(\n ({ children, label = 'Delete', onAction, disabled, theme, className, ...props }, ref) => {\n const root = React.useRef<HTMLDivElement | null>(null);\n const content = React.useRef<HTMLDivElement | null>(null);\n const gesture = React.useRef<Gesture | null>(null);\n const swallowUntil = React.useRef(0);\n const [offset, setOffset] = React.useState(0);\n const [settling, setSettling] = React.useState(false);\n const [leaving, setLeaving] = React.useState(false);\n\n const setRoot = (el: HTMLDivElement | null) => {\n root.current = el;\n if (typeof ref === 'function') ref(el);\n else if (ref) ref.current = el;\n };\n\n const width = () => root.current?.offsetWidth || 320;\n\n const moveTo = (x: number) => {\n setOffset(x);\n const el = content.current;\n if (!el) return;\n if (x) el.style.transform = `translateX(${x}px)`;\n else el.style.removeProperty('transform');\n };\n\n // A row resting open closes when anything else on the page is touched.\n React.useEffect(() => {\n if (!offset || gesture.current || leaving) return undefined;\n const away = (e: PointerEvent) => {\n if (root.current?.contains(e.target as Node)) return;\n setSettling(true);\n moveTo(0);\n };\n document.addEventListener('pointerdown', away, true);\n return () => document.removeEventListener('pointerdown', away, true);\n }, [offset, leaving]);\n\n React.useEffect(() => {\n if (disabled && offset && !leaving) moveTo(0);\n }, [disabled, offset, leaving]);\n\n // The action that runs is the one current when the slide ends, not the one\n // the slide started under.\n const action = React.useRef(onAction);\n action.current = onAction;\n\n // The host removes the row on action; if it keeps it instead (a staple\n // marked out stays on its shelf), the row comes back to centre.\n React.useEffect(() => {\n if (!leaving) return undefined;\n const t = window.setTimeout(() => {\n action.current();\n setLeaving(false);\n setSettling(false);\n moveTo(0);\n }, LEAVE_MS);\n return () => window.clearTimeout(t);\n }, [leaving]);\n\n const commit = () => {\n setSettling(true);\n setLeaving(true);\n moveTo(-width());\n };\n\n const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {\n props.onPointerDown?.(e);\n if (disabled || leaving || e.pointerType === 'mouse' || !e.isPrimary) return;\n // A drag inside a field moves its caret or selection; it is not a swipe.\n if ((e.target as Element).closest?.(FIELD_SELECTOR)) return;\n gesture.current = {\n x: e.clientX,\n y: e.clientY,\n base: offset,\n claimed: false,\n id: e.pointerId,\n };\n setSettling(false);\n };\n\n const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {\n props.onPointerMove?.(e);\n const g = gesture.current;\n if (!g || e.pointerId !== g.id) return;\n const dx = e.clientX - g.x;\n const dy = e.clientY - g.y;\n if (!g.claimed) {\n if (Math.abs(dy) > DECIDE_PX && Math.abs(dy) > Math.abs(dx)) {\n gesture.current = null;\n return;\n }\n if (Math.abs(dx) < DECIDE_PX || Math.abs(dx) < Math.abs(dy) * 1.2) return;\n g.claimed = true;\n root.current?.setPointerCapture?.(e.pointerId);\n }\n moveTo(Math.min(0, g.base + dx));\n };\n\n const onPointerEnd = (e: React.PointerEvent<HTMLDivElement>) => {\n if (e.type === 'pointerup') props.onPointerUp?.(e);\n else props.onPointerCancel?.(e);\n const g = gesture.current;\n gesture.current = null;\n if (!g || e.pointerId !== g.id) return;\n if (!g.claimed) {\n // A plain tap on a row resting open closes it rather than opening it.\n if (g.base) {\n swallowUntil.current = performance.now() + SWALLOW_MS;\n setSettling(true);\n moveTo(0);\n }\n return;\n }\n swallowUntil.current = performance.now() + SWALLOW_MS;\n setSettling(true);\n if (e.type !== 'pointercancel' && offset < -width() * COMMIT_SHARE) commit();\n else moveTo(offset < -OPEN_AT_PX ? -REST_PX : 0);\n };\n\n // The click a swipe ends with belongs to the swipe, not to the row under it.\n // ⚠️ Time-boxed, not a flag: a drag usually produces NO click, and a flag\n // left standing ate the next real tap — the one on the action itself.\n const onClickCapture = (e: React.MouseEvent<HTMLDivElement>) => {\n props.onClickCapture?.(e);\n if (performance.now() > swallowUntil.current) return;\n swallowUntil.current = 0;\n e.stopPropagation();\n e.preventDefault();\n };\n\n return (\n <div\n {...props}\n ref={setRoot}\n className={cn(swipeRowVariants({ theme }), className)}\n data-slot={'swipe-row'}\n data-open={offset ? '' : undefined}\n data-settling={settling ? '' : undefined}\n data-leaving={leaving ? '' : undefined}\n onPointerDown={onPointerDown}\n onPointerMove={onPointerMove}\n onPointerUp={onPointerEnd}\n onPointerCancel={onPointerEnd}\n onClickCapture={onClickCapture}\n >\n {offset ? (\n <button\n type={'button'}\n className={s['swipe-row__action']}\n data-slot={'swipe-row-action'}\n data-armed={offset < -width() * COMMIT_SHARE ? '' : undefined}\n onPointerDown={e => e.stopPropagation()}\n onClick={e => {\n e.stopPropagation();\n if (!leaving) commit();\n }}\n >\n {label}\n </button>\n ) : null}\n <div\n ref={content}\n className={s['swipe-row__content']}\n data-slot={'swipe-row-content'}\n onTransitionEnd={() => setSettling(false)}\n >\n {children}\n </div>\n </div>\n );\n },\n);\nSwipeRow.displayName = 'SwipeRow';\n\nexport { SwipeRow };\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const toggleVariants: (props?: ({
|
|
2
|
-
variant?: "
|
|
2
|
+
variant?: "outlined" | "ghost" | "contained" | null | undefined;
|
|
3
3
|
theme?: "inherit" | "primary" | "secondary" | "destructive" | "warning" | "success" | "info" | "slate" | null | undefined;
|
|
4
4
|
size?: "sm" | "md" | "lg" | "xs" | null | undefined;
|
|
5
5
|
iconOnly?: boolean | null | undefined;
|
package/dist/ui.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { a as Alert, b as AlertBanner, c as AlertBannerProps, d as AlertDescription, f as AlertProps, g as AlertProvider, i as AlertTitle, j as Avatar, k as AvatarFallback, l as AvatarFallbackProps, m as AvatarImage, n as AvatarImageProps, o as AvatarProps, C as Chip, p as ChipProps, q as ChipSelect, r as ChipSelectOption, s as ChipSelectProps, t as CodeBlock, u as CodeBlockProps, D as DevIndicator, v as DevIndicatorProps, w as Dialog, x as DialogClose, y as DialogCloseProps, z as DialogContent, B as DialogContentProps, E as DialogDescription, F as DialogFooter, G as DialogHeader, H as DialogOverlay, I as DialogPortal, J as DialogProps, K as DialogTitle, L as DialogTrigger, M as DialogTriggerProps, N as EmptyState, O as EmptyStateProps, P as Icon, Q as IconProps, R as List, T as ListItem, U as ListItemProps, V as ListProps, W as Pagination, Y as ProgressBar, Z as ProgressBarProps, $ as Separator, a0 as SeparatorProps, a3 as StatCard, a4 as StatCardDirection, a5 as StatCardProps, a6 as StatCardSize, a7 as StatCardTheme, a8 as StatCardVariant, a9 as StatusDot, aa as StatusDotProps, ab as Step, ac as StepProgress, ad as StepProgressProps, ae as SwipeRow, af as SwipeRowProps, ag as Switch, ah as SwitchProps, ai as Table, aj as TableActionCell, ak as TableActionCellProps, al as TableActionItem, am as TableBody, an as TableBodyProps, ao as TableCard, ap as TableCell, aq as TableFooter, ar as TableHead, as as TableHeader, at as TableRow, au as TableSortableHeader, av as TableSortableHeaderProps, aw as TableToolbar, ax as TableToolbarProps, ay as Toggle, az as ToggleGroup, aA as ToggleGroupProps, aB as ToggleProps, aC as TrendDirection, aD as persistAlert, aE as statusDotVariants } from './index-
|
|
2
|
-
export { B as Button, a as ButtonProps, T as Tooltip, b as TooltipContent, c as TooltipContentProps, d as TooltipProps, e as TooltipProvider, f as TooltipTrigger, g as TooltipTriggerProps } from './tooltip-
|
|
1
|
+
export { a as Alert, b as AlertBanner, c as AlertBannerProps, d as AlertDescription, f as AlertProps, g as AlertProvider, i as AlertTitle, j as Avatar, k as AvatarFallback, l as AvatarFallbackProps, m as AvatarImage, n as AvatarImageProps, o as AvatarProps, C as Chip, p as ChipProps, q as ChipSelect, r as ChipSelectOption, s as ChipSelectProps, t as CodeBlock, u as CodeBlockProps, D as DevIndicator, v as DevIndicatorProps, w as Dialog, x as DialogClose, y as DialogCloseProps, z as DialogContent, B as DialogContentProps, E as DialogDescription, F as DialogFooter, G as DialogHeader, H as DialogOverlay, I as DialogPortal, J as DialogProps, K as DialogTitle, L as DialogTrigger, M as DialogTriggerProps, N as EmptyState, O as EmptyStateProps, P as Icon, Q as IconProps, R as List, T as ListItem, U as ListItemProps, V as ListProps, W as Pagination, Y as ProgressBar, Z as ProgressBarProps, $ as Separator, a0 as SeparatorProps, a3 as StatCard, a4 as StatCardDirection, a5 as StatCardProps, a6 as StatCardSize, a7 as StatCardTheme, a8 as StatCardVariant, a9 as StatusDot, aa as StatusDotProps, ab as Step, ac as StepProgress, ad as StepProgressProps, ae as SwipeRow, af as SwipeRowProps, ag as Switch, ah as SwitchProps, ai as Table, aj as TableActionCell, ak as TableActionCellProps, al as TableActionItem, am as TableBody, an as TableBodyProps, ao as TableCard, ap as TableCell, aq as TableFooter, ar as TableHead, as as TableHeader, at as TableRow, au as TableSortableHeader, av as TableSortableHeaderProps, aw as TableToolbar, ax as TableToolbarProps, ay as Toggle, az as ToggleGroup, aA as ToggleGroupProps, aB as ToggleProps, aC as TrendDirection, aD as persistAlert, aE as statusDotVariants } from './index-C7SAfZfl.js';
|
|
2
|
+
export { B as Button, a as ButtonProps, T as Tooltip, b as TooltipContent, c as TooltipContentProps, d as TooltipProps, e as TooltipProvider, f as TooltipTrigger, g as TooltipTriggerProps } from './tooltip-ChpsbkOU.js';
|
|
3
3
|
import 'class-variance-authority';
|
|
4
4
|
import 'react';
|
|
5
5
|
import 'class-variance-authority/types';
|