@kismet-ux/constellation 1.13.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 -56
- 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 -58
- 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-BG8HSyxu.d.ts +647 -0
- package/dist/index-BPKtGvrM.d.ts +200 -0
- package/dist/index-BaoN_cal.d.ts +647 -0
- package/dist/index-Bv5TTKOD.d.ts +647 -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 +31 -30
- package/dist/index.js.map +1 -1
- package/dist/input-BHmlHvYR.d.ts +58 -0
- package/dist/layout/AppSidebarHeader/app-sidebar-header.js +1 -30
- 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 -29
- package/dist/navigation/Sheet/sheet.js.map +1 -1
- package/dist/settings/AppearanceTabs/appearance-tabs.js +1 -27
- 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/index.d.ts +2 -0
- package/dist/ui/SwipeRow/index.d.ts.map +1 -0
- package/dist/ui/SwipeRow/swipe-row-variants.d.ts +4 -0
- package/dist/ui/SwipeRow/swipe-row-variants.d.ts.map +1 -0
- package/dist/ui/SwipeRow/swipe-row-variants.js +22 -0
- package/dist/ui/SwipeRow/swipe-row-variants.js.map +1 -0
- package/dist/ui/SwipeRow/swipe-row.css +77 -0
- package/dist/ui/SwipeRow/swipe-row.d.ts +14 -0
- package/dist/ui/SwipeRow/swipe-row.d.ts.map +1 -0
- package/dist/ui/SwipeRow/swipe-row.js +178 -0
- package/dist/ui/SwipeRow/swipe-row.js.map +1 -0
- package/dist/ui/SwipeRow/swipe-row.module.scss.js +6 -0
- package/dist/ui/SwipeRow/swipe-row.module.scss.js.map +1 -0
- package/dist/ui/Toggle/toggle-variants.d.ts +1 -1
- package/dist/ui/index.d.ts +1 -0
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui.d.ts +2 -2
- package/dist/ui.js +1 -0
- package/dist/ui.js.map +1 -1
- package/package.json +216 -216
|
@@ -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,40 +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/Switch/switch.js';
|
|
26
|
-
import '../../ui/Table/table.js';
|
|
27
|
-
import '../../ui/TableActionCell/table-action-cell.js';
|
|
28
|
-
import '../../ui/TableToolbar/table-toolbar.js';
|
|
29
|
-
import '../../ui/Toggle/toggle.js';
|
|
30
|
-
import '../../ui/ToggleGroup/toggle-group.js';
|
|
31
|
-
import '../../ui/Tooltip/tooltip.js';
|
|
32
3
|
import { XIcon } from 'lucide-react';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import { createPortal } from 'react-dom';
|
|
33
6
|
import { Slot } from '../../internal/slot.js';
|
|
34
7
|
import { useAnimationState } from '../../internal/use-animation-state.js';
|
|
35
8
|
import { useFocusTrap } from '../../internal/use-focus-trap.js';
|
|
36
9
|
import { useScrollLock } from '../../internal/use-scroll-lock.js';
|
|
37
10
|
import s from './sheet.module.scss.js';
|
|
11
|
+
import { Button } from '../../ui/Button/button.js';
|
|
38
12
|
|
|
39
13
|
const SheetContext = React.createContext(null);
|
|
40
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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAA2B,IAAI,CAAC;AAExE,SAAS,QAAQ,GAAA;IACf,MAAM,GAAG,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC;AAC1C,IAAA,IAAI,CAAC,GAAG;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,uDAAuD,CAAC;AAClF,IAAA,OAAO,GAAG;AACZ;AAWA,SAAS,KAAK,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,WAAW,GAAG,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAc,EAAA;AAC9F,IAAA,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC;AACnE,IAAA,MAAM,YAAY,GAAG,cAAc,KAAK,SAAS;IACjD,MAAM,IAAI,GAAG,YAAY,GAAG,cAAc,GAAG,YAAY;AACzD,IAAA,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,EAAE;AAC7B,IAAA,MAAM,aAAa,GAAG,KAAK,CAAC,KAAK,EAAE;IAEnC,MAAM,gBAAgB,GAAG,KAAK,CAAC,WAAW,CACxC,CAAC,IAAa,KAAI;AAChB,QAAA,IAAI,CAAC,YAAY;YAAE,eAAe,CAAC,IAAI,CAAC;AACxC,QAAA,YAAY,GAAG,IAAI,CAAC;AACtB,IAAA,CAAC,EACD,CAAC,YAAY,EAAE,YAAY,CAAC,CAC7B;IAED,QACEA,IAAC,YAAY,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,gBAAgB,EAAE,OAAO,EAAE,aAAa,EAAE,EAAA,QAAA,EAC3F,QAAQ,EAAA,CACa;AAE5B;AAQA,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CACnC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AAChD,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE;IACnC,MAAM,IAAI,GAAG,OAAO,GAAG,IAAI,GAAG,QAAQ;AAEtC,IAAA,MAAM,WAAW,GAAG,CAAC,CAAsC,KAAI;AAC7D,QAAA,OAAO,GAAG,CAAC,CAAC;QACZ,YAAY,CAAC,IAAI,CAAC;AACpB,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAA,WAAA,EAAa,eAAe,EAAE,OAAO,EAAE,WAAW,EAAA,GAAM,KAAK,YACxE,QAAQ,EAAA,CACJ;AAEX,CAAC;AAEH,YAAY,CAAC,WAAW,GAAG,cAAc;AAQzC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACjC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AAChD,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE;IACnC,MAAM,IAAI,GAAG,OAAO,GAAG,IAAI,GAAG,QAAQ;AAEtC,IAAA,MAAM,WAAW,GAAG,CAAC,CAAsC,KAAI;AAC7D,QAAA,OAAO,GAAG,CAAC,CAAC;QACZ,YAAY,CAAC,KAAK,CAAC;AACrB,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAA,WAAA,EAAa,aAAa,EAAE,OAAO,EAAE,WAAW,EAAA,GAAM,KAAK,YACtE,QAAQ,EAAA,CACJ;AAEX,CAAC;AAEH,UAAU,CAAC,WAAW,GAAG,YAAY;AAErC;AAEA,MAAM,YAAY,GAAG;AACnB,IAAA,KAAK,EAAE,CAAC,CAAC,eAAe,CAAC;AACzB,IAAA,IAAI,EAAE,CAAC,CAAC,cAAc,CAAC;AACvB,IAAA,GAAG,EAAE,CAAC,CAAC,aAAa,CAAC;AACrB,IAAA,MAAM,EAAE,CAAC,CAAC,gBAAgB,CAAC;CACnB;AAmBV,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CACnC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,GAAG,OAAO,EAAE,IAAI,GAAG,IAAI,EAAE,KAAK,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAI;AACrF,IAAA,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,QAAQ,EAAE;AACjE,IAAA,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,iBAAiB,CAAC,IAAI,EAAE,GAAG,CAAC;AACvD,IAAA,MAAM,YAAY,GAAG,YAAY,CAAC,IAAI,CAAC;IACvC,aAAa,CAAC,OAAO,CAAC;AAEtB,IAAA,KAAK,CAAC,SAAS,CAAC,MAAK;AACnB,QAAA,IAAI,CAAC,IAAI;YAAE;AAEX,QAAA,MAAM,aAAa,GAAG,CAAC,CAAgB,KAAI;;;;YAIzC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,CAAC,CAAC,CAAC,gBAAgB,EAAE;gBAC7C,YAAY,CAAC,KAAK,CAAC;YACrB;AACF,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC;QACnD,OAAO,MAAM,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC;AACrE,IAAA,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;AAExB,IAAA,IAAI,CAAC,OAAO,IAAI,KAAK,KAAK,MAAM;AAAE,QAAA,OAAO,IAAI;AAE7C,IAAA,OAAO,YAAY,CACjBC,IAAA,CAAA,KAAA,EAAA,EAAA,2BAAA,EAAgC,EAAE,EAAE,GAAG,EAAE,YAAY,EAAA,QAAA,EAAA,CACnDD,GAAA,CAAA,KAAA,EAAA,EAAA,WAAA,EACa,eAAe,EAAA,YAAA,EACd,KAAK,EACjB,SAAS,EAAE,CAAC,CAAC,OAAO,EACpB,OAAO,EAAE,MAAM,YAAY,CAAC,KAAK,CAAC,EAAA,aAAA,EACrB,MAAM,EAAA,CACnB,EACFC,IAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EAAA,WAAA,EACG,eAAe,EAAA,YAAA,EACd,KAAK,EACjB,IAAI,EAAE,QAAQ,EAAA,YAAA,EACF,MAAM,EAAA,iBAAA,EACD,OAAO,EAAA,kBAAA,EACN,aAAa,EAC/B,SAAS,EAAE,EAAE,CACX,CAAC,CAAC,eAAe,CAAC,EAClB,YAAY,CAAC,IAAI,CAAC,EAClB,CAAC,CAAC,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAC,EACjB,KAAK,IAAI,CAAC,CAAC,eAAe,CAAC,EAC3B,SAAS,CACV,EACD,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,EAAA,GAC7B,KAAK,EAAA,QAAA,EAAA,CAER,QAAQ,EACTD,GAAA,CAAC,UAAU,EAAA,EAAC,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC,EAAE,OAAO,EAAA,IAAA,EAAA,QAAA,EAC/CC,IAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAA,IAAA,EAAC,IAAI,EAAE,IAAI,EAAA,QAAA,EAAA,CAC7DD,GAAA,CAAC,KAAK,EAAA,EAAA,CAAG,EACTA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,QAAQ,EAAA,QAAA,EAAA,OAAA,EAAA,CAAc,CAAA,EAAA,CAChC,EAAA,CACE,CAAA,EAAA,CACT,IACF,EACN,QAAQ,CAAC,IAAI,CACd;AACH,CAAC;AAEH,YAAY,CAAC,WAAW,GAAG,cAAc;AAEzC;AAEA,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B,EAAA;AACvE,IAAA,OAAOA,0BAAgB,cAAc,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,GAAI;AAC1F;AAEA,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B,EAAA;AACrE,IAAA,OAAOA,0BAAgB,YAAY,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,GAAI;AACtF;AAEA,SAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA+B,EAAA;AACvE,IAAA,OAAOA,0BAAgB,cAAc,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,GAAI;AAC1F;AAEA,SAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA8B,EAAA;AACrE,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE;IAE9B,QACEA,YAAI,EAAE,EAAE,OAAO,EAAA,WAAA,EAAa,aAAa,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,EAAA,GAAM,KAAK,EAAA,CAAI;AAE/F;AAEA,SAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAA6B,EAAA;AAC1E,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,QAAQ,EAAE;IAEpC,QACEA,WACE,EAAE,EAAE,aAAa,EAAA,WAAA,EACN,mBAAmB,EAC9B,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,EAAE,SAAS,CAAC,EAAA,GACnC,KAAK,EAAA,CACT;AAEN;;"}
|
|
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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"}
|
|
@@ -4,36 +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/Switch/switch.js';
|
|
29
|
-
import '../../ui/Table/table.js';
|
|
30
|
-
import '../../ui/TableActionCell/table-action-cell.js';
|
|
31
|
-
import '../../ui/TableToolbar/table-toolbar.js';
|
|
32
|
-
import '../../ui/Toggle/toggle.js';
|
|
33
|
-
import '../../ui/ToggleGroup/toggle-group.js';
|
|
34
|
-
import '../../ui/Tooltip/tooltip.js';
|
|
35
8
|
import { SunIcon, MoonIcon, MonitorIcon } from 'lucide-react';
|
|
36
9
|
import s from './appearance-tabs.module.scss.js';
|
|
10
|
+
import { Button } from '../../ui/Button/button.js';
|
|
37
11
|
|
|
38
12
|
function AppearanceTabs({ className = '', iconOnly = false, ...props }) {
|
|
39
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;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/SwipeRow/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare const swipeRowVariants: (props?: ({
|
|
2
|
+
theme?: "primary" | "secondary" | "destructive" | "warning" | "success" | "info" | "slate" | null | undefined;
|
|
3
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
4
|
+
//# sourceMappingURL=swipe-row-variants.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"swipe-row-variants.d.ts","sourceRoot":"","sources":["../../../src/ui/SwipeRow/swipe-row-variants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB;;8EAe3B,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { cva } from 'class-variance-authority';
|
|
2
|
+
import s from './swipe-row.module.scss.js';
|
|
3
|
+
|
|
4
|
+
const swipeRowVariants = cva(s['swipe-row'], {
|
|
5
|
+
variants: {
|
|
6
|
+
theme: {
|
|
7
|
+
primary: s['swipe-row--primary'],
|
|
8
|
+
secondary: s['swipe-row--secondary'],
|
|
9
|
+
destructive: s['swipe-row--destructive'],
|
|
10
|
+
warning: s['swipe-row--warning'],
|
|
11
|
+
success: s['swipe-row--success'],
|
|
12
|
+
info: s['swipe-row--info'],
|
|
13
|
+
slate: s['swipe-row--slate'],
|
|
14
|
+
},
|
|
15
|
+
},
|
|
16
|
+
defaultVariants: {
|
|
17
|
+
theme: 'destructive',
|
|
18
|
+
},
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
export { swipeRowVariants };
|
|
22
|
+
//# sourceMappingURL=swipe-row-variants.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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;;"}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
.swipe-row-module_swipe-row__szPTg {
|
|
2
|
+
--swipe-row-fill: var(--destructive-main);
|
|
3
|
+
--swipe-row-ink: var(--destructive-contrast);
|
|
4
|
+
position: relative;
|
|
5
|
+
touch-action: pan-y;
|
|
6
|
+
}
|
|
7
|
+
.swipe-row-module_swipe-row__szPTg.swipe-row-module_swipe-row--primary__XMstW {
|
|
8
|
+
--swipe-row-fill: var(--primary-main);
|
|
9
|
+
--swipe-row-ink: var(--primary-contrast);
|
|
10
|
+
}
|
|
11
|
+
.swipe-row-module_swipe-row__szPTg.swipe-row-module_swipe-row--secondary__TfWxG {
|
|
12
|
+
--swipe-row-fill: var(--secondary-main);
|
|
13
|
+
--swipe-row-ink: var(--secondary-contrast);
|
|
14
|
+
}
|
|
15
|
+
.swipe-row-module_swipe-row__szPTg.swipe-row-module_swipe-row--destructive__NAjaS {
|
|
16
|
+
--swipe-row-fill: var(--destructive-main);
|
|
17
|
+
--swipe-row-ink: var(--destructive-contrast);
|
|
18
|
+
}
|
|
19
|
+
.swipe-row-module_swipe-row__szPTg.swipe-row-module_swipe-row--warning__ZbWIk {
|
|
20
|
+
--swipe-row-fill: var(--warning-main);
|
|
21
|
+
--swipe-row-ink: var(--warning-contrast);
|
|
22
|
+
}
|
|
23
|
+
.swipe-row-module_swipe-row__szPTg.swipe-row-module_swipe-row--success__rRTCs {
|
|
24
|
+
--swipe-row-fill: var(--success-main);
|
|
25
|
+
--swipe-row-ink: var(--success-contrast);
|
|
26
|
+
}
|
|
27
|
+
.swipe-row-module_swipe-row__szPTg.swipe-row-module_swipe-row--info__-gMEY {
|
|
28
|
+
--swipe-row-fill: var(--info-main);
|
|
29
|
+
--swipe-row-ink: var(--info-contrast);
|
|
30
|
+
}
|
|
31
|
+
.swipe-row-module_swipe-row__szPTg.swipe-row-module_swipe-row--slate__nhTJY {
|
|
32
|
+
--swipe-row-fill: var(--slate-main);
|
|
33
|
+
--swipe-row-ink: var(--slate-contrast);
|
|
34
|
+
}
|
|
35
|
+
.swipe-row-module_swipe-row__szPTg[data-open] {
|
|
36
|
+
border-radius: var(--radius-sm);
|
|
37
|
+
overflow: hidden;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.swipe-row-module_swipe-row__content__NzX4E {
|
|
41
|
+
position: relative;
|
|
42
|
+
}
|
|
43
|
+
.swipe-row-module_swipe-row__szPTg[data-open] > .swipe-row-module_swipe-row__content__NzX4E {
|
|
44
|
+
background: var(--surface);
|
|
45
|
+
}
|
|
46
|
+
.swipe-row-module_swipe-row__szPTg[data-settling] > .swipe-row-module_swipe-row__content__NzX4E {
|
|
47
|
+
transition: transform 180ms var(--easing-default);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.swipe-row-module_swipe-row__action__xQhsj {
|
|
51
|
+
align-items: center;
|
|
52
|
+
background: var(--swipe-row-fill);
|
|
53
|
+
border: 0;
|
|
54
|
+
color: var(--swipe-row-ink);
|
|
55
|
+
cursor: pointer;
|
|
56
|
+
display: flex;
|
|
57
|
+
font: inherit;
|
|
58
|
+
font-size: 0.875rem;
|
|
59
|
+
font-weight: 600;
|
|
60
|
+
inset: 0;
|
|
61
|
+
justify-content: flex-end;
|
|
62
|
+
padding: 0 var(--size-3);
|
|
63
|
+
position: absolute;
|
|
64
|
+
transition: filter 120ms;
|
|
65
|
+
}
|
|
66
|
+
.swipe-row-module_swipe-row__action__xQhsj[data-armed] {
|
|
67
|
+
filter: brightness(1.15);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@media (prefers-reduced-motion: reduce) {
|
|
71
|
+
:root:not([data-motion=full]) .swipe-row-module_swipe-row__szPTg[data-settling] > .swipe-row-module_swipe-row__content__NzX4E {
|
|
72
|
+
transition: none;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
:root[data-motion=reduced] .swipe-row-module_swipe-row__szPTg[data-settling] > .swipe-row-module_swipe-row__content__NzX4E {
|
|
76
|
+
transition: none;
|
|
77
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { swipeRowVariants } from './swipe-row-variants';
|
|
4
|
+
export interface SwipeRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof swipeRowVariants> {
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
/** What the revealed action says. */
|
|
7
|
+
label?: React.ReactNode;
|
|
8
|
+
/** Runs once the row has slid away, from a long swipe or a tap on the action. */
|
|
9
|
+
onAction: () => void;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
}
|
|
12
|
+
declare const SwipeRow: React.ForwardRefExoticComponent<SwipeRowProps & React.RefAttributes<HTMLDivElement>>;
|
|
13
|
+
export { SwipeRow };
|
|
14
|
+
//# sourceMappingURL=swipe-row.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"swipe-row.d.ts","sourceRoot":"","sources":["../../../src/ui/SwipeRow/swipe-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAkCxD,MAAM,WAAW,aACf,SACE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EACtD,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,qCAAqC;IACrC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,iFAAiF;IACjF,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,sFA4Kb,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|