@dynamic-labs-sdk/droplet 1.13.0 → 1.16.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ui/accordion/accordion.stories.d.ts +19 -0
- package/dist/components/ui/accordion/accordion.stories.d.ts.map +1 -0
- package/dist/components/ui/alert/alert.d.ts +41 -0
- package/dist/components/ui/alert/alert.d.ts.map +1 -0
- package/dist/components/ui/alert/alert.stories.d.ts +26 -0
- package/dist/components/ui/alert/alert.stories.d.ts.map +1 -0
- package/dist/components/ui/alert/index.d.ts +3 -0
- package/dist/components/ui/alert/index.d.ts.map +1 -0
- package/dist/components/ui/alert-dialog/alert-dialog.d.ts +4 -1
- package/dist/components/ui/alert-dialog/alert-dialog.d.ts.map +1 -1
- package/dist/components/ui/badge/badge.d.ts +11 -1
- package/dist/components/ui/badge/badge.d.ts.map +1 -1
- package/dist/components/ui/badge/badge.stories.d.ts +3 -3
- package/dist/components/ui/badge/badge.stories.d.ts.map +1 -1
- package/dist/components/ui/breadcrumb/breadcrumb.d.ts +73 -0
- package/dist/components/ui/breadcrumb/breadcrumb.d.ts.map +1 -0
- package/dist/components/ui/breadcrumb/breadcrumb.stories.d.ts +19 -0
- package/dist/components/ui/breadcrumb/breadcrumb.stories.d.ts.map +1 -0
- package/dist/components/ui/breadcrumb/index.d.ts +3 -0
- package/dist/components/ui/breadcrumb/index.d.ts.map +1 -0
- package/dist/components/ui/button/button.d.ts +7 -3
- package/dist/components/ui/button/button.d.ts.map +1 -1
- package/dist/components/ui/button/button.stories.d.ts +6 -3
- package/dist/components/ui/button/button.stories.d.ts.map +1 -1
- package/dist/components/ui/card/card.d.ts +14 -3
- package/dist/components/ui/card/card.d.ts.map +1 -1
- package/dist/components/ui/card/card.stories.d.ts +8 -2
- package/dist/components/ui/card/card.stories.d.ts.map +1 -1
- package/dist/components/ui/check-icon/check-icon.stories.d.ts +26 -0
- package/dist/components/ui/check-icon/check-icon.stories.d.ts.map +1 -0
- package/dist/components/ui/checkbox/checkbox.stories.d.ts.map +1 -1
- package/dist/components/ui/collapsible/collapsible.d.ts +1 -1
- package/dist/components/ui/collapsible/collapsible.d.ts.map +1 -1
- package/dist/components/ui/collapsible/collapsible.stories.d.ts +1 -0
- package/dist/components/ui/collapsible/collapsible.stories.d.ts.map +1 -1
- package/dist/components/ui/combobox/combobox.d.ts +49 -0
- package/dist/components/ui/combobox/combobox.d.ts.map +1 -0
- package/dist/components/ui/combobox/combobox.stories.d.ts +24 -0
- package/dist/components/ui/combobox/combobox.stories.d.ts.map +1 -0
- package/dist/components/ui/combobox/index.d.ts +3 -0
- package/dist/components/ui/combobox/index.d.ts.map +1 -0
- package/dist/components/ui/command/command.d.ts.map +1 -1
- package/dist/components/ui/command/command.stories.d.ts +31 -0
- package/dist/components/ui/command/command.stories.d.ts.map +1 -0
- package/dist/components/ui/dialog/dialog.d.ts +5 -1
- package/dist/components/ui/dialog/dialog.d.ts.map +1 -1
- package/dist/components/ui/dialog/dialog.stories.d.ts.map +1 -1
- package/dist/components/ui/dropdown-menu/dropdown-menu.d.ts.map +1 -1
- package/dist/components/ui/field/field.d.ts +60 -0
- package/dist/components/ui/field/field.d.ts.map +1 -0
- package/dist/components/ui/field/field.stories.d.ts +40 -0
- package/dist/components/ui/field/field.stories.d.ts.map +1 -0
- package/dist/components/ui/field/index.d.ts +3 -0
- package/dist/components/ui/field/index.d.ts.map +1 -0
- package/dist/components/ui/flush-card-detach/flush-card-detach.stories.d.ts.map +1 -1
- package/dist/components/ui/flush-card-stack/flush-card-stack.d.ts +57 -0
- package/dist/components/ui/flush-card-stack/flush-card-stack.d.ts.map +1 -0
- package/dist/components/ui/flush-card-stack/flush-card-stack.stories.d.ts +24 -0
- package/dist/components/ui/flush-card-stack/flush-card-stack.stories.d.ts.map +1 -0
- package/dist/components/ui/icon/icon.stories.d.ts +510 -0
- package/dist/components/ui/icon/icon.stories.d.ts.map +1 -0
- package/dist/components/ui/input/input.d.ts.map +1 -1
- package/dist/components/ui/kbd/kbd.d.ts +1 -1
- package/dist/components/ui/kbd/kbd.stories.d.ts +15 -0
- package/dist/components/ui/kbd/kbd.stories.d.ts.map +1 -0
- package/dist/components/ui/pagination/index.d.ts +3 -0
- package/dist/components/ui/pagination/index.d.ts.map +1 -0
- package/dist/components/ui/pagination/pagination.d.ts +82 -0
- package/dist/components/ui/pagination/pagination.d.ts.map +1 -0
- package/dist/components/ui/pagination/pagination.stories.d.ts +16 -0
- package/dist/components/ui/pagination/pagination.stories.d.ts.map +1 -0
- package/dist/components/ui/popover/popover.d.ts +1 -1
- package/dist/components/ui/popover/popover.d.ts.map +1 -1
- package/dist/components/ui/progress/progress.d.ts +7 -4
- package/dist/components/ui/progress/progress.d.ts.map +1 -1
- package/dist/components/ui/progress/progress.stories.d.ts +4 -1
- package/dist/components/ui/progress/progress.stories.d.ts.map +1 -1
- package/dist/components/ui/radio-group/index.d.ts +1 -1
- package/dist/components/ui/radio-group/index.d.ts.map +1 -1
- package/dist/components/ui/radio-group/radio-group.d.ts +45 -2
- package/dist/components/ui/radio-group/radio-group.d.ts.map +1 -1
- package/dist/components/ui/radio-group/radio-group.stories.d.ts +19 -0
- package/dist/components/ui/radio-group/radio-group.stories.d.ts.map +1 -1
- package/dist/components/ui/scroll-area/scroll-area.stories.d.ts +15 -0
- package/dist/components/ui/scroll-area/scroll-area.stories.d.ts.map +1 -0
- package/dist/components/ui/search-input/search-input.stories.d.ts +27 -0
- package/dist/components/ui/search-input/search-input.stories.d.ts.map +1 -0
- package/dist/components/ui/select/select.d.ts.map +1 -1
- package/dist/components/ui/skeleton/skeleton.d.ts +1 -1
- package/dist/components/ui/skeleton/skeleton.d.ts.map +1 -1
- package/dist/components/ui/skeleton/skeleton.stories.d.ts +1 -1
- package/dist/components/ui/slider/index.d.ts +3 -0
- package/dist/components/ui/slider/index.d.ts.map +1 -0
- package/dist/components/ui/slider/slider.d.ts +28 -0
- package/dist/components/ui/slider/slider.d.ts.map +1 -0
- package/dist/components/ui/slider/slider.stories.d.ts +40 -0
- package/dist/components/ui/slider/slider.stories.d.ts.map +1 -0
- package/dist/components/ui/sonner/sonner.stories.d.ts +10 -0
- package/dist/components/ui/sonner/sonner.stories.d.ts.map +1 -0
- package/dist/components/ui/spinner/spinner.d.ts +13 -2
- package/dist/components/ui/spinner/spinner.d.ts.map +1 -1
- package/dist/components/ui/spinner/spinner.stories.d.ts +1 -3
- package/dist/components/ui/spinner/spinner.stories.d.ts.map +1 -1
- package/dist/components/ui/stepper/index.d.ts +3 -0
- package/dist/components/ui/stepper/index.d.ts.map +1 -0
- package/dist/components/ui/stepper/stepper.d.ts +36 -0
- package/dist/components/ui/stepper/stepper.d.ts.map +1 -0
- package/dist/components/ui/stepper/stepper.stories.d.ts +21 -0
- package/dist/components/ui/stepper/stepper.stories.d.ts.map +1 -0
- package/dist/components/ui/switch/switch.d.ts.map +1 -1
- package/dist/components/ui/table/table.d.ts +1 -1
- package/dist/components/ui/table/table.d.ts.map +1 -1
- package/dist/components/ui/toggle-group/index.d.ts +3 -0
- package/dist/components/ui/toggle-group/index.d.ts.map +1 -0
- package/dist/components/ui/toggle-group/toggle-group.d.ts +62 -0
- package/dist/components/ui/toggle-group/toggle-group.d.ts.map +1 -0
- package/dist/components/ui/toggle-group/toggle-group.stories.d.ts +20 -0
- package/dist/components/ui/toggle-group/toggle-group.stories.d.ts.map +1 -0
- package/dist/components/ui/tray/renderTrayLayout.d.ts +37 -0
- package/dist/components/ui/tray/renderTrayLayout.d.ts.map +1 -0
- package/dist/components/ui/tray/resolveTrayLayout.d.ts +35 -0
- package/dist/components/ui/tray/resolveTrayLayout.d.ts.map +1 -0
- package/dist/components/ui/well/well-reveal.stories.d.ts +27 -0
- package/dist/components/ui/well/well-reveal.stories.d.ts.map +1 -0
- package/dist/components/ui/well/well.d.ts +2 -2
- package/dist/components/ui/well/well.d.ts.map +1 -1
- package/dist/components/ui/well/well.stories.d.ts +2 -2
- package/dist/index.cjs +1320 -306
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +18 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.js +1292 -312
- package/dist/index.esm.js.map +1 -1
- package/dist/migration.cjs +1 -1
- package/dist/migration.esm.js +1 -1
- package/dist/{toggle-row-B7XCm0Z-.cjs → toggle-row-BafR1dY7.cjs} +93 -12
- package/dist/toggle-row-BafR1dY7.cjs.map +1 -0
- package/dist/{toggle-row-C-B8HtY0.esm.js → toggle-row-h0h1m_hc.esm.js} +88 -13
- package/dist/toggle-row-h0h1m_hc.esm.js.map +1 -0
- package/package.json +1 -1
- package/src/styles/globals.css +68 -23
- package/dist/toggle-row-B7XCm0Z-.cjs.map +0 -1
- package/dist/toggle-row-C-B8HtY0.esm.js.map +0 -1
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { StoryObj } from '@storybook/react-vite';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
component: ({ className, ...props }: {
|
|
5
|
+
children?: React.ReactNode;
|
|
6
|
+
} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
|
|
7
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
8
|
+
} & {
|
|
9
|
+
asChild?: boolean;
|
|
10
|
+
}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
|
|
11
|
+
label?: string;
|
|
12
|
+
shouldFilter?: boolean;
|
|
13
|
+
filter?: (value: string, search: string, keywords?: string[]) => number;
|
|
14
|
+
defaultValue?: string;
|
|
15
|
+
value?: string;
|
|
16
|
+
onValueChange?: (value: string) => void;
|
|
17
|
+
loop?: boolean;
|
|
18
|
+
disablePointerSelection?: boolean;
|
|
19
|
+
vimBindings?: boolean;
|
|
20
|
+
} & React.RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
parameters: {
|
|
22
|
+
layout: string;
|
|
23
|
+
};
|
|
24
|
+
tags: string[];
|
|
25
|
+
title: string;
|
|
26
|
+
};
|
|
27
|
+
export default meta;
|
|
28
|
+
type Story = StoryObj<typeof meta>;
|
|
29
|
+
export declare const Default: Story;
|
|
30
|
+
export declare const WithGroups: Story;
|
|
31
|
+
//# sourceMappingURL=command.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"command.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/command/command.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAa5D,QAAA,MAAM,IAAI;;mBARP,MAAO,SACP;;cAgF8yO,MAAO,GAAG;;;;;;yDAAwwB,CAAC;;;;;;;;;;;;;CApEpiQ,CAAC;AAEjC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAwBrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAoCxB,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { type ComponentProps } from 'react';
|
|
2
2
|
import { Content, Description, Overlay, Title } from '@radix-ui/react-dialog';
|
|
3
|
+
import { type TrayPreference } from '../tray/resolveTrayLayout';
|
|
3
4
|
/**
|
|
4
5
|
* Modal dialog (popup) overlaying the page.
|
|
5
6
|
*
|
|
@@ -11,7 +12,10 @@ declare const DialogTrigger: import("react").ForwardRefExoticComponent<import("@
|
|
|
11
12
|
declare const DialogPortal: import("react").FC<import("@radix-ui/react-dialog").DialogPortalProps>;
|
|
12
13
|
declare const DialogClose: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
13
14
|
declare const DialogOverlay: ({ className, ...props }: ComponentProps<typeof Overlay>) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
-
declare const DialogContent: ({ className, children, ...props }: ComponentProps<typeof Content>
|
|
15
|
+
declare const DialogContent: ({ className, children, tray, ...props }: ComponentProps<typeof Content> & {
|
|
16
|
+
/** Tray edge. `auto` = footer-priority convention; override with `header`/`footer`/`none`. */
|
|
17
|
+
tray?: TrayPreference;
|
|
18
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
15
19
|
declare const DialogHeader: ({ className, showCloseButton, children, ...props }: ComponentProps<"div"> & {
|
|
16
20
|
showCloseButton?: boolean;
|
|
17
21
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/dialog/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAEL,OAAO,EACP,WAAW,EACX,OAAO,EAGP,KAAK,EAEN,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/dialog/dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAEL,OAAO,EACP,WAAW,EACX,OAAO,EAGP,KAAK,EAEN,MAAM,wBAAwB,CAAC;AAMhC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAGhE;;;;;GAKG;AACH,QAAA,MAAM,MAAM,kEAAO,CAAC;AACpB,QAAA,MAAM,aAAa,mJAAU,CAAC;AAC9B,QAAA,MAAM,YAAY,wEAAS,CAAC;AAC5B,QAAA,MAAM,WAAW,iJAAQ,CAAC;AAE1B,QAAA,MAAM,aAAa,4BAA6B,cAAc,CAAC,OAAO,OAAO,CAAC,4CAS7E,CAAC;AAEF,QAAA,MAAM,aAAa,4CAKhB,cAAc,CAAC,OAAO,OAAO,CAAC,GAAG;IAClC,8FAA8F;IAC9F,IAAI,CAAC,EAAE,cAAc,CAAC;CACvB,4CAwBA,CAAC;AAEF,QAAA,MAAM,YAAY,uDAKf,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,eAAe,CAAC,EAAE,OAAO,CAAA;CAAE,4CAqBvD,CAAC;AAEF,QAAA,MAAM,UAAU,4BAA6B,cAAc,CAAC,KAAK,CAAC,4CAMjE,CAAC;AAEF,QAAA,MAAM,YAAY,uDAKf,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,eAAe,CAAC,EAAE,OAAO,CAAA;CAAE,4CAavD,CAAC;AAEF,QAAA,MAAM,WAAW,4BAA6B,cAAc,CAAC,OAAO,KAAK,CAAC,4CAMzE,CAAC;AAEF,QAAA,MAAM,iBAAiB,4BAGpB,cAAc,CAAC,OAAO,WAAW,CAAC,4CAMpC,CAAC;AAEF,OAAO,EACL,MAAM,EACN,UAAU,EACV,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/dialog/dialog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAiB5D,QAAA,MAAM,IAAI;;;;;;;CAKqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAoCrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,
|
|
1
|
+
{"version":3,"file":"dialog.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/dialog/dialog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAiB5D,QAAA,MAAM,IAAI;;;;;;;CAKqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAoCrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAwD7B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAGV,cAAc,EAAC,MAAM,OAAO,CAAC;AAyB/B,QAAA,MAAM,YAAY,+EAAO,CAAC;AAE1B,QAAA,MAAM,mBAAmB,gKAAU,CAAC;AAEpC,QAAA,MAAM,iBAAiB,2JAAQ,CAAC;AAEhC,QAAA,MAAM,eAAe,kFAAM,CAAC;AAE5B,QAAA,MAAM,mBAAmB,0NAevB,CAAC;AAGH,QAAA,MAAM,gBAAgB;YAGV,OAAO;kDAYjB,CAAC;AAGH,QAAA,MAAM,wBAAwB,+NAoB5B,CAAC;AAGH,QAAA,MAAM,sBAAsB,gKAAa,CAAC;AAE1C,QAAA,MAAM,qBAAqB,4NAmBzB,CAAC;AAGH,QAAA,MAAM,iBAAiB;YAGX,OAAO;
|
|
1
|
+
{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/dropdown-menu/dropdown-menu.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAGV,cAAc,EAAC,MAAM,OAAO,CAAC;AAyB/B,QAAA,MAAM,YAAY,+EAAO,CAAC;AAE1B,QAAA,MAAM,mBAAmB,gKAAU,CAAC;AAEpC,QAAA,MAAM,iBAAiB,2JAAQ,CAAC;AAEhC,QAAA,MAAM,eAAe,kFAAM,CAAC;AAE5B,QAAA,MAAM,mBAAmB,0NAevB,CAAC;AAGH,QAAA,MAAM,gBAAgB;YAGV,OAAO;kDAYjB,CAAC;AAGH,QAAA,MAAM,wBAAwB,+NAoB5B,CAAC;AAGH,QAAA,MAAM,sBAAsB,gKAAa,CAAC;AAE1C,QAAA,MAAM,qBAAqB,4NAmBzB,CAAC;AAGH,QAAA,MAAM,iBAAiB;YAGX,OAAO;kDAajB,CAAC;AAGH,QAAA,MAAM,qBAAqB,4NASzB,CAAC;AAGH,QAAA,MAAM,oBAAoB;8BAGvB,cAAc,CAAC,eAAe,CAAC;;CASjC,CAAC;AAGF,QAAA,MAAM,sBAAsB;YAGhB,OAAO;kDAejB,CAAC;AAGH,QAAA,MAAM,sBAAsB,6NAY1B,CAAC;AAGH,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,wBAAwB,EACxB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,oBAAoB,EACpB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,GACvB,CAAC"}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
type FieldProps = {
|
|
3
|
+
/** The form control(s) to render inside the field wrapper. */
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
/** Extra class names merged onto the outer grid wrapper. */
|
|
6
|
+
className?: string;
|
|
7
|
+
/** Secondary helper text rendered below the control. */
|
|
8
|
+
description?: ReactNode;
|
|
9
|
+
/**
|
|
10
|
+
* Validation error message. When present, renders with `role="alert"` and
|
|
11
|
+
* `text-[var(--text-danger)]`, and injects `aria-invalid` onto a single
|
|
12
|
+
* child element.
|
|
13
|
+
*/
|
|
14
|
+
error?: ReactNode;
|
|
15
|
+
/**
|
|
16
|
+
* Override the auto-generated control id. Useful when the consumer already
|
|
17
|
+
* manages a stable id. When omitted, a React-stable id is generated via
|
|
18
|
+
* `useId()` and injected onto the single child element (if applicable).
|
|
19
|
+
*/
|
|
20
|
+
htmlFor?: string;
|
|
21
|
+
/** Visible label rendered above the control and linked via `htmlFor`. */
|
|
22
|
+
label?: ReactNode;
|
|
23
|
+
/**
|
|
24
|
+
* When true, appends a red asterisk to the label to signal that the field
|
|
25
|
+
* is required. Does not inject the `required` attribute on the control — set
|
|
26
|
+
* that on the control itself.
|
|
27
|
+
*/
|
|
28
|
+
required?: boolean;
|
|
29
|
+
};
|
|
30
|
+
/**
|
|
31
|
+
* A generic labeled form-field wrapper.
|
|
32
|
+
*
|
|
33
|
+
* Wires a `<Label>`, an arbitrary form control, an optional description, and
|
|
34
|
+
* an error message together with the correct `id`/`htmlFor`/`aria-describedby`
|
|
35
|
+
* associations so callers don't have to hand-assemble these.
|
|
36
|
+
*
|
|
37
|
+
* When there is exactly one child element, `Field` uses `cloneElement` to
|
|
38
|
+
* inject:
|
|
39
|
+
* - `id` — links the label's `htmlFor` to the control
|
|
40
|
+
* - `aria-describedby` — references the description and/or error paragraph ids
|
|
41
|
+
* - `aria-invalid` — `true` when `error` is present
|
|
42
|
+
*
|
|
43
|
+
* @example
|
|
44
|
+
* ```tsx
|
|
45
|
+
* <Field label="Email" description="We'll never share your email." required>
|
|
46
|
+
* <Input type="email" />
|
|
47
|
+
* </Field>
|
|
48
|
+
*
|
|
49
|
+
* <Field label="Email" error="Enter a valid email address.">
|
|
50
|
+
* <Input type="email" />
|
|
51
|
+
* </Field>
|
|
52
|
+
* ```
|
|
53
|
+
*/
|
|
54
|
+
declare const Field: {
|
|
55
|
+
({ label, description, error, required, htmlFor, children, className, }: FieldProps): import("react/jsx-runtime").JSX.Element;
|
|
56
|
+
displayName: string;
|
|
57
|
+
};
|
|
58
|
+
export { Field };
|
|
59
|
+
export type { FieldProps };
|
|
60
|
+
//# sourceMappingURL=field.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/field/field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,SAAS,EAIf,MAAM,OAAO,CAAC;AAKf,KAAK,UAAU,GAAG;IAChB,8DAA8D;IAC9D,QAAQ,EAAE,SAAS,CAAC;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,QAAA,MAAM,KAAK;6EAQR,UAAU;;CAwEZ,CAAC;AAIF,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
declare const meta: {
|
|
3
|
+
args: {
|
|
4
|
+
children: null;
|
|
5
|
+
};
|
|
6
|
+
component: {
|
|
7
|
+
({ label, description, error, required, htmlFor, children, className, }: import("./field").FieldProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
displayName: string;
|
|
9
|
+
};
|
|
10
|
+
parameters: {
|
|
11
|
+
layout: string;
|
|
12
|
+
};
|
|
13
|
+
tags: string[];
|
|
14
|
+
title: string;
|
|
15
|
+
};
|
|
16
|
+
export default meta;
|
|
17
|
+
type Story = StoryObj<typeof meta>;
|
|
18
|
+
/**
|
|
19
|
+
* A basic labeled input field with a helper description.
|
|
20
|
+
* `Field` auto-generates a stable `id` and wires `htmlFor`/`aria-describedby`
|
|
21
|
+
* so the consumer only needs to provide the control as a child.
|
|
22
|
+
*/
|
|
23
|
+
export declare const Default: Story;
|
|
24
|
+
/**
|
|
25
|
+
* When `required` is true, a red asterisk is appended to the label.
|
|
26
|
+
* Set `required` on the `<Input>` itself to trigger browser validation.
|
|
27
|
+
*/
|
|
28
|
+
export declare const Required: Story;
|
|
29
|
+
/**
|
|
30
|
+
* Passing `error` renders an alert paragraph styled with `--text-danger` and
|
|
31
|
+
* injects `aria-invalid` and `aria-describedby` onto the child input
|
|
32
|
+
* automatically.
|
|
33
|
+
*/
|
|
34
|
+
export declare const WithError: Story;
|
|
35
|
+
/**
|
|
36
|
+
* `Field` is not limited to text inputs — any form control works as a child.
|
|
37
|
+
* Here a `RadioGroup` is labeled and described by the wrapper.
|
|
38
|
+
*/
|
|
39
|
+
export declare const WithRadioGroup: Story;
|
|
40
|
+
//# sourceMappingURL=field.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"field.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/field/field.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAM5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;CAOoB,CAAC;AAE/B,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,KAQrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,SAAS,EAAE,KAevB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAkC5B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flush-card-detach.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/flush-card-detach/flush-card-detach.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"flush-card-detach.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/flush-card-detach/flush-card-detach.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAQ5D,QAAA,MAAM,IAAI;;;;;;;;;;;CAqBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,iBAAiB,EAAE,KAsF/B,CAAC"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* One row of a {@link FlushCardStack}. Purely declarative — the parent stack
|
|
4
|
+
* reads these props to compute every item's fuse/detach geometry and renders the
|
|
5
|
+
* card, so an `Item` used outside a `FlushCardStack` renders nothing.
|
|
6
|
+
*/
|
|
7
|
+
export type FlushCardStackItemProps = {
|
|
8
|
+
/** Optional reveal content (e.g. a `Well`). An item with none never detaches. */
|
|
9
|
+
children?: ReactNode;
|
|
10
|
+
/** Extra classes merged onto this item's card. */
|
|
11
|
+
className?: string;
|
|
12
|
+
/** Always-visible row content (e.g. a `ToggleRow`). */
|
|
13
|
+
header: ReactNode;
|
|
14
|
+
/**
|
|
15
|
+
* Drives BOTH the inline reveal and the detach. When `true` and the item has
|
|
16
|
+
* reveal content (`children`), the item floats free of its neighbours with a
|
|
17
|
+
* spring gap; otherwise the toggle state has no effect on the layout.
|
|
18
|
+
*/
|
|
19
|
+
open?: boolean;
|
|
20
|
+
};
|
|
21
|
+
/**
|
|
22
|
+
* Props for {@link FlushCardStack}.
|
|
23
|
+
*/
|
|
24
|
+
export type FlushCardStackProps = {
|
|
25
|
+
/** `FlushCardStack.Item` children. */
|
|
26
|
+
children: ReactNode;
|
|
27
|
+
/** Extra classes merged onto the stack wrapper. */
|
|
28
|
+
className?: string;
|
|
29
|
+
};
|
|
30
|
+
/**
|
|
31
|
+
* A vertical stack of settings cards that fuse into one block by default and
|
|
32
|
+
* detach with a spring gap when an item's reveal is opened.
|
|
33
|
+
*
|
|
34
|
+
* Composed from {@link Card} + {@link WellReveal} (+ `motion`); it encapsulates
|
|
35
|
+
* the `-mt-px` / `rounded-[16px]` / gap math so consumers pass only per-item
|
|
36
|
+
* `open` + content:
|
|
37
|
+
*
|
|
38
|
+
* ```tsx
|
|
39
|
+
* <FlushCardStack>
|
|
40
|
+
* <FlushCardStack.Item open={emailOn} header={<ToggleRow … />}>
|
|
41
|
+
* <Well gap='sm'>{/* checkbox rows *\/}</Well>
|
|
42
|
+
* </FlushCardStack.Item>
|
|
43
|
+
* <FlushCardStack.Item header={<ToggleRow … />} />
|
|
44
|
+
* </FlushCardStack>
|
|
45
|
+
* ```
|
|
46
|
+
*
|
|
47
|
+
* Rule: a seam (12px spring gap + facing edges rounding to `rounded-[16px]`)
|
|
48
|
+
* opens between two cards when EITHER side is an open reveal item — so an open
|
|
49
|
+
* middle item floats free on both sides, while an open first/last item produces a
|
|
50
|
+
* single inner split. Items with no reveal, or closed reveals, always fuse.
|
|
51
|
+
*/
|
|
52
|
+
declare const FlushCardStack: {
|
|
53
|
+
({ children, className }: FlushCardStackProps): import("react/jsx-runtime").JSX.Element;
|
|
54
|
+
Item: (_props: FlushCardStackItemProps) => null;
|
|
55
|
+
};
|
|
56
|
+
export { FlushCardStack };
|
|
57
|
+
//# sourceMappingURL=flush-card-stack.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"flush-card-stack.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/flush-card-stack/flush-card-stack.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAWf;;;;GAIG;AACH,MAAM,MAAM,uBAAuB,GAAG;IACpC,iFAAiF;IACjF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,MAAM,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAQF;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAeF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,cAAc;8BAA6B,mBAAmB;mBA/ChC,uBAAuB,KAAG,IAAI;CA+GjE,CAAC;AAIF,OAAO,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
declare const meta: {
|
|
3
|
+
args: {
|
|
4
|
+
children: null;
|
|
5
|
+
};
|
|
6
|
+
component: {
|
|
7
|
+
({ children, className }: import("./flush-card-stack").FlushCardStackProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
Item: (_props: import("./flush-card-stack").FlushCardStackItemProps) => null;
|
|
9
|
+
};
|
|
10
|
+
parameters: {
|
|
11
|
+
docs: {
|
|
12
|
+
description: {
|
|
13
|
+
component: string;
|
|
14
|
+
};
|
|
15
|
+
};
|
|
16
|
+
layout: string;
|
|
17
|
+
};
|
|
18
|
+
tags: string[];
|
|
19
|
+
title: string;
|
|
20
|
+
};
|
|
21
|
+
export default meta;
|
|
22
|
+
type Story = StoryObj<typeof meta>;
|
|
23
|
+
export declare const Default: Story;
|
|
24
|
+
//# sourceMappingURL=flush-card-stack.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"flush-card-stack.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/flush-card-stack/flush-card-stack.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAQ5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;CAuB6B,CAAC;AAExC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAsFrB,CAAC"}
|