@inzumer/ui-library 1.3.0 → 1.5.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/dist/Select.styles-CeZROqOk.d.ts +8 -0
- package/dist/{chunk-NKNSSH2Q.js → chunk-42G4RRCZ.js} +4 -4
- package/dist/{chunk-NKNSSH2Q.js.map → chunk-42G4RRCZ.js.map} +1 -1
- package/dist/{chunk-SMKLV4ET.js → chunk-4CY55XM3.js} +4 -4
- package/dist/{chunk-SMKLV4ET.js.map → chunk-4CY55XM3.js.map} +1 -1
- package/dist/chunk-4H6VER5P.js +36 -0
- package/dist/chunk-4H6VER5P.js.map +1 -0
- package/dist/chunk-BGUNAALU.js +238 -0
- package/dist/chunk-BGUNAALU.js.map +1 -0
- package/dist/{chunk-PF5PSCG4.js → chunk-L4BPQAXU.js} +4 -4
- package/dist/{chunk-PF5PSCG4.js.map → chunk-L4BPQAXU.js.map} +1 -1
- package/dist/chunk-LSWJBAM6.js +79 -0
- package/dist/chunk-LSWJBAM6.js.map +1 -0
- package/dist/chunk-TR7XKJCO.js +85 -0
- package/dist/chunk-TR7XKJCO.js.map +1 -0
- package/dist/{chunk-WUEVXL76.js → chunk-YYNW2PXL.js} +3 -32
- package/dist/chunk-YYNW2PXL.js.map +1 -0
- package/dist/components/atoms/Select/index.d.ts +1 -5
- package/dist/components/atoms/Select/index.js +2 -1
- package/dist/components/molecules/BottomSheet/index.js +3 -3
- package/dist/components/molecules/CookieBanner/index.d.ts +46 -0
- package/dist/components/molecules/CookieBanner/index.js +7 -0
- package/dist/components/molecules/CookieBanner/index.js.map +1 -0
- package/dist/components/molecules/CookiePreferences/index.d.ts +34 -0
- package/dist/components/molecules/CookiePreferences/index.js +13 -0
- package/dist/components/molecules/CookiePreferences/index.js.map +1 -0
- package/dist/components/molecules/Drawer/index.js +3 -3
- package/dist/components/molecules/Dropdown/index.d.ts +44 -0
- package/dist/components/molecules/Dropdown/index.js +8 -0
- package/dist/components/molecules/Dropdown/index.js.map +1 -0
- package/dist/components/molecules/Modal/index.js +3 -3
- package/dist/index.d.ts +4 -0
- package/dist/index.js +13 -9
- package/package.json +15 -3
- package/dist/chunk-WUEVXL76.js.map +0 -1
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
|
|
3
|
+
declare const selectStyles: (props?: ({
|
|
4
|
+
state?: "error" | "default" | null | undefined;
|
|
5
|
+
inputSize?: "sm" | "md" | "lg" | null | undefined;
|
|
6
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
7
|
+
|
|
8
|
+
export { selectStyles as s };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
import { useFocusTrap } from './chunk-QT62VC36.js';
|
|
1
2
|
import { useScrollLock } from './chunk-53YMHM24.js';
|
|
2
|
-
import { useDelayedUnmount } from './chunk-BNEEI7S5.js';
|
|
3
3
|
import { useDismissableLayer } from './chunk-JCJP427C.js';
|
|
4
|
-
import {
|
|
4
|
+
import { useDelayedUnmount } from './chunk-BNEEI7S5.js';
|
|
5
5
|
import { Button } from './chunk-KL6I2JFC.js';
|
|
6
6
|
import { useMergedRef } from './chunk-P4Z7HH66.js';
|
|
7
7
|
import { RichText } from './chunk-P4CV2EPR.js';
|
|
@@ -138,5 +138,5 @@ var Drawer = forwardRef(
|
|
|
138
138
|
Drawer.displayName = "Drawer";
|
|
139
139
|
|
|
140
140
|
export { Drawer };
|
|
141
|
-
//# sourceMappingURL=chunk-
|
|
142
|
-
//# sourceMappingURL=chunk-
|
|
141
|
+
//# sourceMappingURL=chunk-42G4RRCZ.js.map
|
|
142
|
+
//# sourceMappingURL=chunk-42G4RRCZ.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/molecules/Drawer/Drawer.styles.ts","../src/components/molecules/Drawer/Drawer.tsx"],"names":[],"mappings":"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","file":"chunk-
|
|
1
|
+
{"version":3,"sources":["../src/components/molecules/Drawer/Drawer.styles.ts","../src/components/molecules/Drawer/Drawer.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAEO,IAAM,mBAAA,GAAsB,GAAA;AAAA,EACjC,uFAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,aAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,iBAAA,GAAoB,GAAA;AAAA,EAC/B;AAAA,IACE,wEAAA;AAAA,IACA,0EAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,IAAA,EAAM,iBAAA;AAAA,QACN,KAAA,EAAO;AAAA,OACT;AAAA,MACA,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,eAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB,EAAE,IAAA,EAAM,MAAA,EAAQ,OAAA,EAAS,KAAA,EAAO,WAAW,mBAAA,EAAoB;AAAA,MAC/D,EAAE,IAAA,EAAM,OAAA,EAAS,OAAA,EAAS,KAAA,EAAO,WAAW,kBAAA;AAAmB,KACjE;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,OAAA;AAAA,MACN,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,kBAAA,GAAqB,yCAAA;AAE3B,IAAM,iBAAA,GAAoB,kDAAA;AAE1B,IAAM,kBAAA,GAAqB,6BAAA;AC9BlC,IAAM,gBAAA,GAAmB,GAAA;AAqBlB,IAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CACE;AAAA,IACE,IAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA,MAAA;AAAA,IACA,oBAAA,GAAuB,IAAA;AAAA,IACvB,SAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,QAAA,GAAW,OAA8B,IAAI,CAAA;AACnD,IAAA,MAAM,WAAA,GAAc,YAAA,CAAa,GAAA,EAAK,QAAQ,CAAA;AAC9C,IAAA,MAAM,UAAU,KAAA,EAAM;AACtB,IAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAQ,GAAI,iBAAA,CAAkB,MAAM,gBAAgB,CAAA;AAErE,IAAA,mBAAA,CAAoB,IAAA,EAAM,OAAA,EAAS,QAAA,EAAU,oBAAoB,CAAA;AAEjE,IAAA,YAAA,CAAa,IAAA,IAAQ,SAAS,QAAQ,CAAA;AACtC,IAAA,aAAA,CAAc,IAAI,CAAA;AAElB,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oBAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,eAAY,MAAA,EAAO,SAAA,EAAW,oBAAoB,EAAE,OAAA,EAAS,CAAA,EAAG,CAAA;AAAA,sBACrE,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,WAAA;AAAA,UACL,IAAA,EAAK,QAAA;AAAA,UACL,YAAA,EAAW,MAAA;AAAA,UACX,iBAAA,EAAiB,QAAQ,OAAA,GAAU,MAAA;AAAA,UACnC,QAAA,EAAU,EAAA;AAAA,UACV,SAAA,EAAW,GAAG,iBAAA,CAAkB,EAAE,MAAM,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,UAC5D,GAAG,KAAA;AAAA,UAEF,QAAA,EAAA;AAAA,YAAA,CAAA,KAAA,IAAS,UAAA,qBACT,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,kBAAA,EACb,QAAA,EAAA;AAAA,cAAA,KAAA,oBACC,GAAA;AAAA,gBAAC,QAAA;AAAA,gBAAA;AAAA,kBACC,EAAA,EAAG,IAAA;AAAA,kBACH,EAAA,EAAI,OAAA;AAAA,kBACJ,OAAA,EAAQ,IAAA;AAAA,kBACR,SAAA,EAAW,EAAA,CAAG,iBAAA,EAAmB,cAAc,CAAA;AAAA,kBAE9C,QAAA,EAAA;AAAA;AAAA,eACH;AAAA,cAED,UAAA,oBACC,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,OAAA,EAAQ,OAAA;AAAA,kBACR,IAAA,EAAK,MAAA;AAAA,kBACL,YAAA,EAAY,UAAA;AAAA,kBACZ,OAAA,EAAS,OAAA;AAAA,kBACT,SAAA,EAAU,iBAAA;AAAA,kBAEV,QAAA,kBAAA,GAAA;AAAA,oBAAC,KAAA;AAAA,oBAAA;AAAA,sBACC,aAAA,EAAW,IAAA;AAAA,sBACX,OAAA,EAAQ,WAAA;AAAA,sBACR,IAAA,EAAK,MAAA;AAAA,sBACL,MAAA,EAAO,cAAA;AAAA,sBACP,WAAA,EAAa,CAAA;AAAA,sBACb,aAAA,EAAc,OAAA;AAAA,sBACd,SAAA,EAAU,QAAA;AAAA,sBAEV,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,sBAAA,EAAuB;AAAA;AAAA;AACjC;AAAA;AACF,aAAA,EAEJ,CAAA;AAAA,YAED,QAAA;AAAA,YACA,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,oBAAqB,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA;AACzD,KAAA,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-42G4RRCZ.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const drawerOverlayStyles = cva(\n 'absolute inset-0 bg-[var(--surface-overlay)] transition-opacity duration-200 ease-out',\n {\n variants: {\n visible: {\n true: 'opacity-100',\n false: 'opacity-0',\n },\n },\n defaultVariants: {\n visible: false,\n },\n },\n);\n\nexport const drawerPanelStyles = cva(\n [\n 'absolute inset-y-0 flex w-full max-w-80 flex-col gap-6 overflow-y-auto',\n 'border-[var(--border-default)] bg-[var(--surface-primary)] p-6 shadow-xl',\n 'transition-transform duration-200 ease-out focus:outline-none',\n ],\n {\n variants: {\n side: {\n left: 'left-0 border-r',\n right: 'right-0 border-l',\n },\n visible: {\n true: 'translate-x-0',\n false: '',\n },\n },\n compoundVariants: [\n { side: 'left', visible: false, className: '-translate-x-full' },\n { side: 'right', visible: false, className: 'translate-x-full' },\n ],\n defaultVariants: {\n side: 'right',\n visible: false,\n },\n },\n);\n\nexport const drawerHeaderStyles = 'flex items-center justify-between gap-4';\n\nexport const drawerTitleStyles = 'text-lg font-semibold text-[var(--text-primary)]';\n\nexport const drawerFooterStyles = 'mt-auto flex flex-col gap-4';\n","import { Button, RichText } from '@components';\nimport {\n useDelayedUnmount,\n useDismissableLayer,\n useFocusTrap,\n useMergedRef,\n useScrollLock,\n} from '@hooks';\nimport { cn } from '@utils';\nimport type { VariantProps } from 'class-variance-authority';\nimport { forwardRef, useId, useRef, type HTMLAttributes, type ReactNode } from 'react';\nimport {\n drawerFooterStyles,\n drawerHeaderStyles,\n drawerOverlayStyles,\n drawerPanelStyles,\n drawerTitleStyles,\n} from './Drawer.styles';\n\nconst EXIT_DURATION_MS = 200;\n\nexport type DrawerProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> &\n Pick<VariantProps<typeof drawerPanelStyles>, 'side'> & {\n open: boolean;\n onClose: () => void;\n title?: ReactNode;\n /** Extra classes for the title (e.g. a display font). */\n titleClassName?: string;\n /** Accessible name of the close button; the button is only rendered when this is set. */\n closeLabel?: string;\n /** Pinned to the bottom of the panel (preferences, actions). */\n footer?: ReactNode;\n closeOnBackdropClick?: boolean;\n };\n\n/**\n * A side panel (navigation menus, filters, settings) that slides in from the left or right.\n * Modal dialog semantics: focus moves inside and is trapped, Escape and backdrop clicks close it,\n * the page behind doesn't scroll, and focus returns to the trigger when it closes.\n */\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(\n (\n {\n open,\n onClose,\n side,\n title,\n titleClassName,\n closeLabel,\n footer,\n closeOnBackdropClick = true,\n className,\n children,\n ...props\n },\n ref,\n ) => {\n const panelRef = useRef<HTMLDivElement | null>(null);\n const setPanelRef = useMergedRef(ref, panelRef);\n const titleId = useId();\n const { mounted, visible } = useDelayedUnmount(open, EXIT_DURATION_MS);\n\n useDismissableLayer(open, onClose, panelRef, closeOnBackdropClick);\n // The panel mounts one render after `open` flips, so the trap starts once it exists.\n useFocusTrap(open && mounted, panelRef);\n useScrollLock(open);\n\n if (!mounted) {\n return null;\n }\n\n return (\n <div className=\"fixed inset-0 z-50\">\n <div aria-hidden=\"true\" className={drawerOverlayStyles({ visible })} />\n <div\n ref={setPanelRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={title ? titleId : undefined}\n tabIndex={-1}\n className={cn(drawerPanelStyles({ side, visible }), className)}\n {...props}\n >\n {(title || closeLabel) && (\n <div className={drawerHeaderStyles}>\n {title && (\n <RichText\n as=\"h2\"\n id={titleId}\n variant=\"s1\"\n className={cn(drawerTitleStyles, titleClassName)}\n >\n {title}\n </RichText>\n )}\n {closeLabel && (\n <Button\n variant=\"ghost\"\n size=\"icon\"\n aria-label={closeLabel}\n onClick={onClose}\n className=\"ml-auto size-11\"\n >\n <svg\n aria-hidden\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth={2}\n strokeLinecap=\"round\"\n className=\"size-6\"\n >\n <path d=\"M6 6l12 12M18 6L6 18\" />\n </svg>\n </Button>\n )}\n </div>\n )}\n {children}\n {footer && <div className={drawerFooterStyles}>{footer}</div>}\n </div>\n </div>\n );\n },\n);\n\nDrawer.displayName = 'Drawer';\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
import { useFocusTrap } from './chunk-QT62VC36.js';
|
|
1
2
|
import { useScrollLock } from './chunk-53YMHM24.js';
|
|
2
|
-
import { useDelayedUnmount } from './chunk-BNEEI7S5.js';
|
|
3
3
|
import { useDismissableLayer } from './chunk-JCJP427C.js';
|
|
4
|
-
import {
|
|
4
|
+
import { useDelayedUnmount } from './chunk-BNEEI7S5.js';
|
|
5
5
|
import { useMergedRef } from './chunk-P4Z7HH66.js';
|
|
6
6
|
import { RichText } from './chunk-P4CV2EPR.js';
|
|
7
7
|
import { cn } from './chunk-6LLGTBM6.js';
|
|
@@ -80,5 +80,5 @@ var Modal = forwardRef(
|
|
|
80
80
|
Modal.displayName = "Modal";
|
|
81
81
|
|
|
82
82
|
export { Modal };
|
|
83
|
-
//# sourceMappingURL=chunk-
|
|
84
|
-
//# sourceMappingURL=chunk-
|
|
83
|
+
//# sourceMappingURL=chunk-4CY55XM3.js.map
|
|
84
|
+
//# sourceMappingURL=chunk-4CY55XM3.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/molecules/Modal/Modal.styles.ts","../src/components/molecules/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;AAEO,IAAM,kBAAA,GAAqB,GAAA;AAAA,EAChC;AAAA,IACE,qFAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,aAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,gBAAA,GAAmB,GAAA;AAAA,EAC9B;AAAA,IACE,8GAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,uBAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,gBAAA,GAAmB,uDAAA;AAEzB,IAAM,iBAAA,GAAoB,0CAAA;ACvBjC,IAAM,gBAAA,GAAmB,GAAA;AAUlB,IAAM,KAAA,GAAQ,UAAA;AAAA,EACnB,CACE,EAAE,IAAA,EAAM,OAAA,EAAS,KAAA,EAAO,MAAA,EAAQ,oBAAA,GAAuB,IAAA,EAAM,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,IACrF,GAAA,KACG;AACH,IAAA,MAAM,QAAA,GAAW,OAA8B,IAAI,CAAA;AACnD,IAAA,MAAM,WAAA,GAAc,YAAA,CAAa,GAAA,EAAK,QAAQ,CAAA;AAC9C,IAAA,MAAM,UAAU,KAAA,EAAM;AACtB,IAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAQ,GAAI,iBAAA,CAAkB,MAAM,gBAAgB,CAAA;AAErE,IAAA,mBAAA,CAAoB,IAAA,EAAM,OAAA,EAAS,QAAA,EAAU,oBAAoB,CAAA;AAEjE,IAAA,YAAA,CAAa,IAAA,IAAQ,SAAS,QAAQ,CAAA;AACtC,IAAA,aAAA,CAAc,IAAI,CAAA;AAElB,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,mBAAmB,EAAE,OAAA,EAAS,CAAA,EAC5C,QAAA,kBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,WAAA;AAAA,QACL,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAW,MAAA;AAAA,QACX,iBAAA,EAAiB,QAAQ,OAAA,GAAU,MAAA;AAAA,QACnC,QAAA,EAAU,EAAA;AAAA,QACV,WAAW,EAAA,CAAG,gBAAA,CAAiB,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,QACrD,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,KAAA,oBACC,GAAA,CAAC,QAAA,EAAA,EAAS,EAAA,EAAG,IAAA,EAAK,EAAA,EAAI,SAAS,OAAA,EAAQ,IAAA,EAAK,SAAA,EAAW,gBAAA,EACpD,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UAED,QAAA;AAAA,UACA,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,mBAAoB,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,KACxD,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"chunk-
|
|
1
|
+
{"version":3,"sources":["../src/components/molecules/Modal/Modal.styles.ts","../src/components/molecules/Modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;AAEO,IAAM,kBAAA,GAAqB,GAAA;AAAA,EAChC;AAAA,IACE,qFAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,aAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,gBAAA,GAAmB,GAAA;AAAA,EAC9B;AAAA,IACE,8GAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,uBAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,gBAAA,GAAmB,uDAAA;AAEzB,IAAM,iBAAA,GAAoB,0CAAA;ACvBjC,IAAM,gBAAA,GAAmB,GAAA;AAUlB,IAAM,KAAA,GAAQ,UAAA;AAAA,EACnB,CACE,EAAE,IAAA,EAAM,OAAA,EAAS,KAAA,EAAO,MAAA,EAAQ,oBAAA,GAAuB,IAAA,EAAM,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,IACrF,GAAA,KACG;AACH,IAAA,MAAM,QAAA,GAAW,OAA8B,IAAI,CAAA;AACnD,IAAA,MAAM,WAAA,GAAc,YAAA,CAAa,GAAA,EAAK,QAAQ,CAAA;AAC9C,IAAA,MAAM,UAAU,KAAA,EAAM;AACtB,IAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAQ,GAAI,iBAAA,CAAkB,MAAM,gBAAgB,CAAA;AAErE,IAAA,mBAAA,CAAoB,IAAA,EAAM,OAAA,EAAS,QAAA,EAAU,oBAAoB,CAAA;AAEjE,IAAA,YAAA,CAAa,IAAA,IAAQ,SAAS,QAAQ,CAAA;AACtC,IAAA,aAAA,CAAc,IAAI,CAAA;AAElB,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,mBAAmB,EAAE,OAAA,EAAS,CAAA,EAC5C,QAAA,kBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,WAAA;AAAA,QACL,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAW,MAAA;AAAA,QACX,iBAAA,EAAiB,QAAQ,OAAA,GAAU,MAAA;AAAA,QACnC,QAAA,EAAU,EAAA;AAAA,QACV,WAAW,EAAA,CAAG,gBAAA,CAAiB,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,QACrD,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,KAAA,oBACC,GAAA,CAAC,QAAA,EAAA,EAAS,EAAA,EAAG,IAAA,EAAK,EAAA,EAAI,SAAS,OAAA,EAAQ,IAAA,EAAK,SAAA,EAAW,gBAAA,EACpD,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UAED,QAAA;AAAA,UACA,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,mBAAoB,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,KACxD,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,KAAA,CAAM,WAAA,GAAc,OAAA","file":"chunk-4CY55XM3.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const modalOverlayStyles = cva(\n [\n 'fixed inset-0 z-50 flex items-center justify-center bg-[var(--surface-overlay)] p-4',\n 'transition-opacity duration-200 ease-out',\n ],\n {\n variants: {\n visible: {\n true: 'opacity-100',\n false: 'opacity-0',\n },\n },\n defaultVariants: {\n visible: false,\n },\n },\n);\n\nexport const modalPanelStyles = cva(\n [\n 'w-full max-w-md rounded-xl border border-[var(--border-default)] bg-[var(--surface-secondary)] p-6 shadow-lg',\n 'transition-all duration-200 ease-out',\n ],\n {\n variants: {\n visible: {\n true: 'scale-100 opacity-100',\n false: 'scale-95 opacity-0',\n },\n },\n defaultVariants: {\n visible: false,\n },\n },\n);\n\nexport const modalTitleStyles = 'mb-4 text-lg font-semibold text-[var(--text-primary)]';\n\nexport const modalFooterStyles = 'mt-6 flex items-center justify-end gap-2';\n","import { forwardRef, useId, useRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { RichText } from '@components';\nimport {\n useDelayedUnmount,\n useDismissableLayer,\n useFocusTrap,\n useMergedRef,\n useScrollLock,\n} from '@hooks';\nimport { cn } from '@utils';\nimport {\n modalFooterStyles,\n modalOverlayStyles,\n modalPanelStyles,\n modalTitleStyles,\n} from './Modal.styles';\n\nconst EXIT_DURATION_MS = 200;\n\nexport type ModalProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {\n open: boolean;\n onClose: () => void;\n title?: ReactNode;\n footer?: ReactNode;\n closeOnBackdropClick?: boolean;\n};\n\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(\n (\n { open, onClose, title, footer, closeOnBackdropClick = true, className, children, ...props },\n ref,\n ) => {\n const panelRef = useRef<HTMLDivElement | null>(null);\n const setPanelRef = useMergedRef(ref, panelRef);\n const titleId = useId();\n const { mounted, visible } = useDelayedUnmount(open, EXIT_DURATION_MS);\n\n useDismissableLayer(open, onClose, panelRef, closeOnBackdropClick);\n // The panel mounts one render after `open` flips, so the trap starts once it exists.\n useFocusTrap(open && mounted, panelRef);\n useScrollLock(open);\n\n if (!mounted) {\n return null;\n }\n\n return (\n <div className={modalOverlayStyles({ visible })}>\n <div\n ref={setPanelRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={title ? titleId : undefined}\n tabIndex={-1}\n className={cn(modalPanelStyles({ visible }), className)}\n {...props}\n >\n {title && (\n <RichText as=\"h2\" id={titleId} variant=\"s1\" className={modalTitleStyles}>\n {title}\n </RichText>\n )}\n {children}\n {footer && <div className={modalFooterStyles}>{footer}</div>}\n </div>\n </div>\n );\n },\n);\n\nModal.displayName = 'Modal';\n"]}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { cva } from 'class-variance-authority';
|
|
2
|
+
|
|
3
|
+
// src/components/atoms/Select/Select.styles.ts
|
|
4
|
+
var selectStyles = cva(
|
|
5
|
+
[
|
|
6
|
+
"flex w-full appearance-none rounded-md bg-no-repeat pr-10",
|
|
7
|
+
"text-[var(--input-text)] bg-[var(--input-bg)]",
|
|
8
|
+
"border border-[var(--input-border)]",
|
|
9
|
+
"transition-colors duration-150 ease-in-out",
|
|
10
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-0",
|
|
11
|
+
"focus-visible:border-[var(--input-border-focus)]",
|
|
12
|
+
"disabled:cursor-not-allowed disabled:opacity-50"
|
|
13
|
+
],
|
|
14
|
+
{
|
|
15
|
+
variants: {
|
|
16
|
+
state: {
|
|
17
|
+
default: "",
|
|
18
|
+
error: "border-[var(--input-border-error)] focus-visible:ring-[var(--border-error)]"
|
|
19
|
+
},
|
|
20
|
+
inputSize: {
|
|
21
|
+
sm: "h-8 px-2 text-xs",
|
|
22
|
+
md: "h-10 px-3 text-sm",
|
|
23
|
+
lg: "h-12 px-4 text-base"
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
defaultVariants: {
|
|
27
|
+
state: "default",
|
|
28
|
+
inputSize: "md"
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
);
|
|
32
|
+
var selectChevronStyles = "pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[var(--text-secondary)]";
|
|
33
|
+
|
|
34
|
+
export { selectChevronStyles, selectStyles };
|
|
35
|
+
//# sourceMappingURL=chunk-4H6VER5P.js.map
|
|
36
|
+
//# sourceMappingURL=chunk-4H6VER5P.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/atoms/Select/Select.styles.ts"],"names":[],"mappings":";;;AAEO,IAAM,YAAA,GAAe,GAAA;AAAA,EAC1B;AAAA,IACE,2DAAA;AAAA,IACA,+CAAA;AAAA,IACA,qCAAA;AAAA,IACA,4CAAA;AAAA,IACA,sHAAA;AAAA,IACA,kDAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,KAAA,EAAO;AAAA,QACL,OAAA,EAAS,EAAA;AAAA,QACT,KAAA,EAAO;AAAA,OACT;AAAA,MACA,SAAA,EAAW;AAAA,QACT,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI,mBAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,KAAA,EAAO,SAAA;AAAA,MACP,SAAA,EAAW;AAAA;AACb;AAEJ;AAGO,IAAM,mBAAA,GACX","file":"chunk-4H6VER5P.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const selectStyles = cva(\n [\n 'flex w-full appearance-none rounded-md bg-no-repeat pr-10',\n 'text-[var(--input-text)] bg-[var(--input-bg)]',\n 'border border-[var(--input-border)]',\n 'transition-colors duration-150 ease-in-out',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-0',\n 'focus-visible:border-[var(--input-border-focus)]',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n ],\n {\n variants: {\n state: {\n default: '',\n error: 'border-[var(--input-border-error)] focus-visible:ring-[var(--border-error)]',\n },\n inputSize: {\n sm: 'h-8 px-2 text-xs',\n md: 'h-10 px-3 text-sm',\n lg: 'h-12 px-4 text-base',\n },\n },\n defaultVariants: {\n state: 'default',\n inputSize: 'md',\n },\n },\n);\n\n/** Chevron drawn with `currentColor`, positioned over the right padding of the select. */\nexport const selectChevronStyles =\n 'pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[var(--text-secondary)]';\n"]}
|
|
@@ -0,0 +1,238 @@
|
|
|
1
|
+
import { useDismissableLayer } from './chunk-JCJP427C.js';
|
|
2
|
+
import { selectStyles, selectChevronStyles } from './chunk-4H6VER5P.js';
|
|
3
|
+
import { inputLabelStyles, inputErrorStyles, inputHintStyles } from './chunk-FFKHEBQ7.js';
|
|
4
|
+
import { RichText } from './chunk-P4CV2EPR.js';
|
|
5
|
+
import { cn } from './chunk-6LLGTBM6.js';
|
|
6
|
+
import { forwardRef, useId, useRef, useState, useCallback, useEffect } from 'react';
|
|
7
|
+
import { cva } from 'class-variance-authority';
|
|
8
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
9
|
+
|
|
10
|
+
var dropdownTriggerStyles = "items-center text-left";
|
|
11
|
+
var dropdownValueStyles = "truncate";
|
|
12
|
+
var dropdownChevronStyles = "transition-transform duration-150 ease-out";
|
|
13
|
+
var dropdownListStyles = [
|
|
14
|
+
"absolute left-0 right-0 top-full z-50 mt-1 max-h-60 overflow-y-auto p-1",
|
|
15
|
+
"rounded-md border border-[var(--input-border)] bg-[var(--input-bg)] shadow-lg",
|
|
16
|
+
"focus:outline-none"
|
|
17
|
+
].join(" ");
|
|
18
|
+
var dropdownOptionStyles = cva(
|
|
19
|
+
"flex min-h-10 cursor-pointer items-center justify-between gap-3 rounded px-3 text-[var(--input-text)]",
|
|
20
|
+
{
|
|
21
|
+
variants: {
|
|
22
|
+
active: {
|
|
23
|
+
true: "bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)]",
|
|
24
|
+
false: ""
|
|
25
|
+
},
|
|
26
|
+
selected: {
|
|
27
|
+
true: "font-semibold",
|
|
28
|
+
false: ""
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
defaultVariants: {
|
|
32
|
+
active: false,
|
|
33
|
+
selected: false
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
);
|
|
37
|
+
var dropdownCheckStyles = "size-4 shrink-0";
|
|
38
|
+
var Dropdown = forwardRef(
|
|
39
|
+
({
|
|
40
|
+
label,
|
|
41
|
+
options,
|
|
42
|
+
value,
|
|
43
|
+
onChange,
|
|
44
|
+
hint,
|
|
45
|
+
error,
|
|
46
|
+
disabled,
|
|
47
|
+
id: idProp,
|
|
48
|
+
name,
|
|
49
|
+
inputSize,
|
|
50
|
+
state,
|
|
51
|
+
className
|
|
52
|
+
}, ref) => {
|
|
53
|
+
const generatedId = useId();
|
|
54
|
+
const id = idProp ?? generatedId;
|
|
55
|
+
const labelId = `${id}-label`;
|
|
56
|
+
const listId = `${id}-listbox`;
|
|
57
|
+
const containerRef = useRef(null);
|
|
58
|
+
const listRef = useRef(null);
|
|
59
|
+
const [open, setOpen] = useState(false);
|
|
60
|
+
const selectedIndex = Math.max(
|
|
61
|
+
0,
|
|
62
|
+
options.findIndex((option) => option.value === value)
|
|
63
|
+
);
|
|
64
|
+
const [activeIndex, setActiveIndex] = useState(selectedIndex);
|
|
65
|
+
const last = options.length - 1;
|
|
66
|
+
const resolvedState = error ? "error" : state;
|
|
67
|
+
const close = useCallback(() => setOpen(false), []);
|
|
68
|
+
useDismissableLayer(open, close, containerRef);
|
|
69
|
+
useEffect(() => {
|
|
70
|
+
if (open) {
|
|
71
|
+
listRef.current?.children[activeIndex]?.scrollIntoView?.({ block: "nearest" });
|
|
72
|
+
}
|
|
73
|
+
}, [open, activeIndex]);
|
|
74
|
+
const openAt = (index) => {
|
|
75
|
+
setActiveIndex(index);
|
|
76
|
+
setOpen(true);
|
|
77
|
+
};
|
|
78
|
+
const choose = (index) => {
|
|
79
|
+
const option = options[index];
|
|
80
|
+
if (option && option.value !== value) {
|
|
81
|
+
onChange(option.value);
|
|
82
|
+
}
|
|
83
|
+
setOpen(false);
|
|
84
|
+
};
|
|
85
|
+
const indexForLetter = (key) => {
|
|
86
|
+
const start = (open ? activeIndex : selectedIndex) + 1;
|
|
87
|
+
const ordered = [...options.slice(start), ...options.slice(0, start)];
|
|
88
|
+
const match = ordered.find(
|
|
89
|
+
(option) => option.label.toLowerCase().startsWith(key.toLowerCase())
|
|
90
|
+
);
|
|
91
|
+
return match ? options.indexOf(match) : -1;
|
|
92
|
+
};
|
|
93
|
+
const openKeys = {
|
|
94
|
+
ArrowDown: () => setActiveIndex((index) => Math.min(last, index + 1)),
|
|
95
|
+
ArrowUp: () => setActiveIndex((index) => Math.max(0, index - 1)),
|
|
96
|
+
Home: () => setActiveIndex(0),
|
|
97
|
+
End: () => setActiveIndex(last),
|
|
98
|
+
Enter: () => choose(activeIndex),
|
|
99
|
+
" ": () => choose(activeIndex),
|
|
100
|
+
Escape: close
|
|
101
|
+
};
|
|
102
|
+
const closedKeys = {
|
|
103
|
+
ArrowDown: () => openAt(selectedIndex),
|
|
104
|
+
ArrowUp: () => openAt(selectedIndex),
|
|
105
|
+
Home: () => openAt(0),
|
|
106
|
+
End: () => openAt(last),
|
|
107
|
+
Enter: () => openAt(selectedIndex),
|
|
108
|
+
" ": () => openAt(selectedIndex)
|
|
109
|
+
};
|
|
110
|
+
const handleKeyDown = (event) => {
|
|
111
|
+
if (event.key === "Tab") {
|
|
112
|
+
close();
|
|
113
|
+
return;
|
|
114
|
+
}
|
|
115
|
+
const action = (open ? openKeys : closedKeys)[event.key];
|
|
116
|
+
if (action) {
|
|
117
|
+
event.preventDefault();
|
|
118
|
+
action();
|
|
119
|
+
return;
|
|
120
|
+
}
|
|
121
|
+
if (event.key.length === 1 && event.key.trim() !== "") {
|
|
122
|
+
const index = indexForLetter(event.key);
|
|
123
|
+
if (index >= 0 && open) {
|
|
124
|
+
setActiveIndex(index);
|
|
125
|
+
} else if (index >= 0) {
|
|
126
|
+
choose(index);
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
};
|
|
130
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [
|
|
131
|
+
/* @__PURE__ */ jsx(RichText, { as: "span", id: labelId, variant: "p3", className: inputLabelStyles, children: label }),
|
|
132
|
+
/* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative", children: [
|
|
133
|
+
/* @__PURE__ */ jsx(
|
|
134
|
+
"button",
|
|
135
|
+
{
|
|
136
|
+
ref,
|
|
137
|
+
id,
|
|
138
|
+
type: "button",
|
|
139
|
+
role: "combobox",
|
|
140
|
+
"aria-haspopup": "listbox",
|
|
141
|
+
"aria-expanded": open,
|
|
142
|
+
"aria-controls": listId,
|
|
143
|
+
"aria-labelledby": `${labelId} ${id}`,
|
|
144
|
+
"aria-activedescendant": open ? `${id}-option-${activeIndex}` : void 0,
|
|
145
|
+
"aria-describedby": error ? `${id}-error` : hint ? `${id}-hint` : void 0,
|
|
146
|
+
"aria-invalid": error ? "true" : void 0,
|
|
147
|
+
disabled,
|
|
148
|
+
onClick: () => open ? close() : openAt(selectedIndex),
|
|
149
|
+
onKeyDown: handleKeyDown,
|
|
150
|
+
className: cn(selectStyles({ state: resolvedState, inputSize }), dropdownTriggerStyles),
|
|
151
|
+
children: /* @__PURE__ */ jsx(RichText, { as: "span", variant: "s3", className: cn(dropdownValueStyles, "text-inherit"), children: options[selectedIndex]?.label })
|
|
152
|
+
}
|
|
153
|
+
),
|
|
154
|
+
/* @__PURE__ */ jsx(
|
|
155
|
+
"svg",
|
|
156
|
+
{
|
|
157
|
+
"aria-hidden": true,
|
|
158
|
+
viewBox: "0 0 24 24",
|
|
159
|
+
fill: "none",
|
|
160
|
+
stroke: "currentColor",
|
|
161
|
+
strokeWidth: 2,
|
|
162
|
+
strokeLinecap: "round",
|
|
163
|
+
strokeLinejoin: "round",
|
|
164
|
+
className: cn(selectChevronStyles, dropdownChevronStyles, open && "rotate-180"),
|
|
165
|
+
children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
|
|
166
|
+
}
|
|
167
|
+
),
|
|
168
|
+
name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value }),
|
|
169
|
+
/* @__PURE__ */ jsx(
|
|
170
|
+
"ul",
|
|
171
|
+
{
|
|
172
|
+
ref: listRef,
|
|
173
|
+
id: listId,
|
|
174
|
+
role: "listbox",
|
|
175
|
+
"aria-labelledby": labelId,
|
|
176
|
+
tabIndex: -1,
|
|
177
|
+
hidden: !open,
|
|
178
|
+
className: dropdownListStyles,
|
|
179
|
+
children: options.map((option, index) => {
|
|
180
|
+
const selected = index === selectedIndex;
|
|
181
|
+
return (
|
|
182
|
+
// Options never take focus (APG select-only combobox): the trigger handles the keys.
|
|
183
|
+
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
|
|
184
|
+
/* @__PURE__ */ jsxs(
|
|
185
|
+
"li",
|
|
186
|
+
{
|
|
187
|
+
id: `${id}-option-${index}`,
|
|
188
|
+
role: "option",
|
|
189
|
+
"aria-selected": selected,
|
|
190
|
+
onPointerDown: (event) => event.preventDefault(),
|
|
191
|
+
onPointerEnter: () => setActiveIndex(index),
|
|
192
|
+
onClick: () => choose(index),
|
|
193
|
+
className: dropdownOptionStyles({ active: index === activeIndex, selected }),
|
|
194
|
+
children: [
|
|
195
|
+
/* @__PURE__ */ jsx(RichText, { as: "span", variant: "s3", className: "text-inherit", children: option.label }),
|
|
196
|
+
selected && /* @__PURE__ */ jsx(
|
|
197
|
+
"svg",
|
|
198
|
+
{
|
|
199
|
+
"aria-hidden": true,
|
|
200
|
+
viewBox: "0 0 24 24",
|
|
201
|
+
fill: "none",
|
|
202
|
+
stroke: "currentColor",
|
|
203
|
+
strokeWidth: 2.5,
|
|
204
|
+
strokeLinecap: "round",
|
|
205
|
+
strokeLinejoin: "round",
|
|
206
|
+
className: dropdownCheckStyles,
|
|
207
|
+
children: /* @__PURE__ */ jsx("path", { d: "M5 12l5 5 9-10" })
|
|
208
|
+
}
|
|
209
|
+
)
|
|
210
|
+
]
|
|
211
|
+
},
|
|
212
|
+
option.value
|
|
213
|
+
)
|
|
214
|
+
);
|
|
215
|
+
})
|
|
216
|
+
}
|
|
217
|
+
)
|
|
218
|
+
] }),
|
|
219
|
+
error && /* @__PURE__ */ jsx(
|
|
220
|
+
RichText,
|
|
221
|
+
{
|
|
222
|
+
as: "p",
|
|
223
|
+
id: `${id}-error`,
|
|
224
|
+
role: "alert",
|
|
225
|
+
variant: "p4",
|
|
226
|
+
className: inputErrorStyles,
|
|
227
|
+
children: error
|
|
228
|
+
}
|
|
229
|
+
),
|
|
230
|
+
!error && hint && /* @__PURE__ */ jsx(RichText, { as: "p", id: `${id}-hint`, variant: "p4", className: inputHintStyles, children: hint })
|
|
231
|
+
] });
|
|
232
|
+
}
|
|
233
|
+
);
|
|
234
|
+
Dropdown.displayName = "Dropdown";
|
|
235
|
+
|
|
236
|
+
export { Dropdown };
|
|
237
|
+
//# sourceMappingURL=chunk-BGUNAALU.js.map
|
|
238
|
+
//# sourceMappingURL=chunk-BGUNAALU.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/molecules/Dropdown/Dropdown.styles.ts","../src/components/molecules/Dropdown/Dropdown.tsx"],"names":[],"mappings":"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","file":"chunk-BGUNAALU.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const dropdownTriggerStyles = 'items-center text-left';\n\nexport const dropdownValueStyles = 'truncate';\n\nexport const dropdownChevronStyles = 'transition-transform duration-150 ease-out';\n\nexport const dropdownListStyles = [\n 'absolute left-0 right-0 top-full z-50 mt-1 max-h-60 overflow-y-auto p-1',\n 'rounded-md border border-[var(--input-border)] bg-[var(--input-bg)] shadow-lg',\n 'focus:outline-none',\n].join(' ');\n\nexport const dropdownOptionStyles = cva(\n 'flex min-h-10 cursor-pointer items-center justify-between gap-3 rounded px-3 text-[var(--input-text)]',\n {\n variants: {\n active: {\n true: 'bg-[var(--btn-primary-bg)] text-[var(--btn-primary-text)]',\n false: '',\n },\n selected: {\n true: 'font-semibold',\n false: '',\n },\n },\n defaultVariants: {\n active: false,\n selected: false,\n },\n },\n);\n\nexport const dropdownCheckStyles = 'size-4 shrink-0';\n","import { RichText } from '@components';\nimport { useDismissableLayer } from '@hooks';\nimport { cn } from '@utils';\nimport type { VariantProps } from 'class-variance-authority';\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useRef,\n useState,\n type KeyboardEvent,\n} from 'react';\nimport {\n inputErrorStyles,\n inputHintStyles,\n inputLabelStyles,\n} from '@components/atoms/Input/Input.styles';\nimport { selectChevronStyles, selectStyles } from '@components/atoms/Select/Select.styles';\nimport {\n dropdownCheckStyles,\n dropdownChevronStyles,\n dropdownListStyles,\n dropdownOptionStyles,\n dropdownTriggerStyles,\n dropdownValueStyles,\n} from './Dropdown.styles';\n\nexport interface DropdownOption {\n value: string;\n label: string;\n}\n\nexport type DropdownProps = VariantProps<typeof selectStyles> & {\n label: string;\n options: DropdownOption[];\n value: string;\n onChange: (value: string) => void;\n hint?: string;\n error?: string;\n disabled?: boolean;\n id?: string;\n name?: string;\n className?: string;\n};\n\n/**\n * A select whose list is drawn with the theme (a native `<select>` opens the platform picker).\n * WAI-ARIA \"select-only combobox\": focus stays on the trigger and the active option is announced\n * through `aria-activedescendant`; arrows, Home/End, Enter/Space, Escape and typing a letter behave\n * like a native select.\n */\nexport const Dropdown = forwardRef<HTMLButtonElement, DropdownProps>(\n (\n {\n label,\n options,\n value,\n onChange,\n hint,\n error,\n disabled,\n id: idProp,\n name,\n inputSize,\n state,\n className,\n },\n ref,\n ) => {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const labelId = `${id}-label`;\n const listId = `${id}-listbox`;\n const containerRef = useRef<HTMLDivElement>(null);\n const listRef = useRef<HTMLUListElement>(null);\n const [open, setOpen] = useState(false);\n const selectedIndex = Math.max(\n 0,\n options.findIndex((option) => option.value === value),\n );\n const [activeIndex, setActiveIndex] = useState(selectedIndex);\n const last = options.length - 1;\n const resolvedState = error ? 'error' : state;\n\n const close = useCallback(() => setOpen(false), []);\n useDismissableLayer(open, close, containerRef);\n\n useEffect(() => {\n if (open) {\n listRef.current?.children[activeIndex]?.scrollIntoView?.({ block: 'nearest' });\n }\n }, [open, activeIndex]);\n\n const openAt = (index: number) => {\n setActiveIndex(index);\n setOpen(true);\n };\n\n const choose = (index: number) => {\n const option = options[index];\n if (option && option.value !== value) {\n onChange(option.value);\n }\n setOpen(false);\n };\n\n const indexForLetter = (key: string) => {\n const start = (open ? activeIndex : selectedIndex) + 1;\n const ordered = [...options.slice(start), ...options.slice(0, start)];\n const match = ordered.find((option) =>\n option.label.toLowerCase().startsWith(key.toLowerCase()),\n );\n return match ? options.indexOf(match) : -1;\n };\n\n const openKeys: Record<string, () => void> = {\n ArrowDown: () => setActiveIndex((index) => Math.min(last, index + 1)),\n ArrowUp: () => setActiveIndex((index) => Math.max(0, index - 1)),\n Home: () => setActiveIndex(0),\n End: () => setActiveIndex(last),\n Enter: () => choose(activeIndex),\n ' ': () => choose(activeIndex),\n Escape: close,\n };\n\n const closedKeys: Record<string, () => void> = {\n ArrowDown: () => openAt(selectedIndex),\n ArrowUp: () => openAt(selectedIndex),\n Home: () => openAt(0),\n End: () => openAt(last),\n Enter: () => openAt(selectedIndex),\n ' ': () => openAt(selectedIndex),\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n if (event.key === 'Tab') {\n close();\n return;\n }\n const action = (open ? openKeys : closedKeys)[event.key];\n if (action) {\n event.preventDefault();\n action();\n return;\n }\n if (event.key.length === 1 && event.key.trim() !== '') {\n const index = indexForLetter(event.key);\n if (index >= 0 && open) {\n setActiveIndex(index);\n } else if (index >= 0) {\n choose(index);\n }\n }\n };\n\n return (\n <div className={cn('flex flex-col gap-1.5', className)}>\n <RichText as=\"span\" id={labelId} variant=\"p3\" className={inputLabelStyles}>\n {label}\n </RichText>\n <div ref={containerRef} className=\"relative\">\n <button\n ref={ref}\n id={id}\n type=\"button\"\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n aria-controls={listId}\n aria-labelledby={`${labelId} ${id}`}\n aria-activedescendant={open ? `${id}-option-${activeIndex}` : undefined}\n aria-describedby={error ? `${id}-error` : hint ? `${id}-hint` : undefined}\n aria-invalid={error ? 'true' : undefined}\n disabled={disabled}\n onClick={() => (open ? close() : openAt(selectedIndex))}\n onKeyDown={handleKeyDown}\n className={cn(selectStyles({ state: resolvedState, inputSize }), dropdownTriggerStyles)}\n >\n <RichText as=\"span\" variant=\"s3\" className={cn(dropdownValueStyles, 'text-inherit')}>\n {options[selectedIndex]?.label}\n </RichText>\n </button>\n <svg\n aria-hidden\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth={2}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className={cn(selectChevronStyles, dropdownChevronStyles, open && 'rotate-180')}\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n {name && <input type=\"hidden\" name={name} value={value} />}\n <ul\n ref={listRef}\n id={listId}\n role=\"listbox\"\n aria-labelledby={labelId}\n tabIndex={-1}\n hidden={!open}\n className={dropdownListStyles}\n >\n {options.map((option, index) => {\n const selected = index === selectedIndex;\n return (\n // Options never take focus (APG select-only combobox): the trigger handles the keys.\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n <li\n key={option.value}\n id={`${id}-option-${index}`}\n role=\"option\"\n aria-selected={selected}\n onPointerDown={(event) => event.preventDefault()}\n onPointerEnter={() => setActiveIndex(index)}\n onClick={() => choose(index)}\n className={dropdownOptionStyles({ active: index === activeIndex, selected })}\n >\n <RichText as=\"span\" variant=\"s3\" className=\"text-inherit\">\n {option.label}\n </RichText>\n {selected && (\n <svg\n aria-hidden\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth={2.5}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className={dropdownCheckStyles}\n >\n <path d=\"M5 12l5 5 9-10\" />\n </svg>\n )}\n </li>\n );\n })}\n </ul>\n </div>\n {error && (\n <RichText\n as=\"p\"\n id={`${id}-error`}\n role=\"alert\"\n variant=\"p4\"\n className={inputErrorStyles}\n >\n {error}\n </RichText>\n )}\n {!error && hint && (\n <RichText as=\"p\" id={`${id}-hint`} variant=\"p4\" className={inputHintStyles}>\n {hint}\n </RichText>\n )}\n </div>\n );\n },\n);\n\nDropdown.displayName = 'Dropdown';\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
+
import { useFocusTrap } from './chunk-QT62VC36.js';
|
|
1
2
|
import { useScrollLock } from './chunk-53YMHM24.js';
|
|
2
|
-
import { useDelayedUnmount } from './chunk-BNEEI7S5.js';
|
|
3
3
|
import { useDismissableLayer } from './chunk-JCJP427C.js';
|
|
4
|
-
import {
|
|
4
|
+
import { useDelayedUnmount } from './chunk-BNEEI7S5.js';
|
|
5
5
|
import { useMergedRef } from './chunk-P4Z7HH66.js';
|
|
6
6
|
import { RichText } from './chunk-P4CV2EPR.js';
|
|
7
7
|
import { cn } from './chunk-6LLGTBM6.js';
|
|
@@ -83,5 +83,5 @@ var BottomSheet = forwardRef(
|
|
|
83
83
|
BottomSheet.displayName = "BottomSheet";
|
|
84
84
|
|
|
85
85
|
export { BottomSheet };
|
|
86
|
-
//# sourceMappingURL=chunk-
|
|
87
|
-
//# sourceMappingURL=chunk-
|
|
86
|
+
//# sourceMappingURL=chunk-L4BPQAXU.js.map
|
|
87
|
+
//# sourceMappingURL=chunk-L4BPQAXU.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/molecules/BottomSheet/BottomSheet.styles.ts","../src/components/molecules/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":";;;;;;;;;;;AAEO,IAAM,wBAAA,GAA2B,GAAA;AAAA,EACtC;AAAA,IACE,8EAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,aAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,sBAAA,GAAyB,GAAA;AAAA,EACpC;AAAA,IACE,+EAAA;AAAA,IACA,6CAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,eAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,uBAAA,GACX,gEAAA;AAEK,IAAM,sBAAA,GAAyB,uDAAA;AAE/B,IAAM,uBAAA,GAA0B,0CAAA;AC1BvC,IAAM,gBAAA,GAAmB,GAAA;AAUlB,IAAM,WAAA,GAAc,UAAA;AAAA,EACzB,CACE,EAAE,IAAA,EAAM,OAAA,EAAS,KAAA,EAAO,MAAA,EAAQ,oBAAA,GAAuB,IAAA,EAAM,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,IACrF,GAAA,KACG;AACH,IAAA,MAAM,QAAA,GAAW,OAA8B,IAAI,CAAA;AACnD,IAAA,MAAM,WAAA,GAAc,YAAA,CAAa,GAAA,EAAK,QAAQ,CAAA;AAC9C,IAAA,MAAM,UAAU,KAAA,EAAM;AACtB,IAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAQ,GAAI,iBAAA,CAAkB,MAAM,gBAAgB,CAAA;AAErE,IAAA,mBAAA,CAAoB,IAAA,EAAM,OAAA,EAAS,QAAA,EAAU,oBAAoB,CAAA;AAEjE,IAAA,YAAA,CAAa,IAAA,IAAQ,SAAS,QAAQ,CAAA;AACtC,IAAA,aAAA,CAAc,IAAI,CAAA;AAElB,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,yBAAyB,EAAE,OAAA,EAAS,CAAA,EAClD,QAAA,kBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,WAAA;AAAA,QACL,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAW,MAAA;AAAA,QACX,iBAAA,EAAiB,QAAQ,OAAA,GAAU,MAAA;AAAA,QACnC,QAAA,EAAU,EAAA;AAAA,QACV,WAAW,EAAA,CAAG,sBAAA,CAAuB,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,QAC3D,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,aAAA,EAAW,IAAA,EAAC,SAAA,EAAW,uBAAA,EAAyB,CAAA;AAAA,UACpD,KAAA,oBACC,GAAA,CAAC,QAAA,EAAA,EAAS,EAAA,EAAG,IAAA,EAAK,EAAA,EAAI,OAAA,EAAS,OAAA,EAAQ,IAAA,EAAK,SAAA,EAAW,sBAAA,EACpD,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UAED,QAAA;AAAA,UACA,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,yBAA0B,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,KAC9D,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-
|
|
1
|
+
{"version":3,"sources":["../src/components/molecules/BottomSheet/BottomSheet.styles.ts","../src/components/molecules/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":";;;;;;;;;;;AAEO,IAAM,wBAAA,GAA2B,GAAA;AAAA,EACtC;AAAA,IACE,8EAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,aAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,sBAAA,GAAyB,GAAA;AAAA,EACpC;AAAA,IACE,+EAAA;AAAA,IACA,6CAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,IAAA,EAAM,eAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ,CAAA;AAEO,IAAM,uBAAA,GACX,gEAAA;AAEK,IAAM,sBAAA,GAAyB,uDAAA;AAE/B,IAAM,uBAAA,GAA0B,0CAAA;AC1BvC,IAAM,gBAAA,GAAmB,GAAA;AAUlB,IAAM,WAAA,GAAc,UAAA;AAAA,EACzB,CACE,EAAE,IAAA,EAAM,OAAA,EAAS,KAAA,EAAO,MAAA,EAAQ,oBAAA,GAAuB,IAAA,EAAM,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,IACrF,GAAA,KACG;AACH,IAAA,MAAM,QAAA,GAAW,OAA8B,IAAI,CAAA;AACnD,IAAA,MAAM,WAAA,GAAc,YAAA,CAAa,GAAA,EAAK,QAAQ,CAAA;AAC9C,IAAA,MAAM,UAAU,KAAA,EAAM;AACtB,IAAA,MAAM,EAAE,OAAA,EAAS,OAAA,EAAQ,GAAI,iBAAA,CAAkB,MAAM,gBAAgB,CAAA;AAErE,IAAA,mBAAA,CAAoB,IAAA,EAAM,OAAA,EAAS,QAAA,EAAU,oBAAoB,CAAA;AAEjE,IAAA,YAAA,CAAa,IAAA,IAAQ,SAAS,QAAQ,CAAA;AACtC,IAAA,aAAA,CAAc,IAAI,CAAA;AAElB,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,yBAAyB,EAAE,OAAA,EAAS,CAAA,EAClD,QAAA,kBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,WAAA;AAAA,QACL,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAW,MAAA;AAAA,QACX,iBAAA,EAAiB,QAAQ,OAAA,GAAU,MAAA;AAAA,QACnC,QAAA,EAAU,EAAA;AAAA,QACV,WAAW,EAAA,CAAG,sBAAA,CAAuB,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,QAC3D,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,aAAA,EAAW,IAAA,EAAC,SAAA,EAAW,uBAAA,EAAyB,CAAA;AAAA,UACpD,KAAA,oBACC,GAAA,CAAC,QAAA,EAAA,EAAS,EAAA,EAAG,IAAA,EAAK,EAAA,EAAI,OAAA,EAAS,OAAA,EAAQ,IAAA,EAAK,SAAA,EAAW,sBAAA,EACpD,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UAED,QAAA;AAAA,UACA,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,yBAA0B,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,KAC9D,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-L4BPQAXU.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const bottomSheetOverlayStyles = cva(\n [\n 'fixed inset-0 z-50 flex items-end justify-center bg-[var(--surface-overlay)]',\n 'transition-opacity duration-200 ease-out',\n ],\n {\n variants: {\n visible: {\n true: 'opacity-100',\n false: 'opacity-0',\n },\n },\n defaultVariants: {\n visible: false,\n },\n },\n);\n\nexport const bottomSheetPanelStyles = cva(\n [\n 'w-full max-w-md rounded-t-xl border border-b-0 border-[var(--border-default)]',\n 'bg-[var(--surface-secondary)] p-6 shadow-lg',\n 'transition-transform duration-200 ease-out',\n ],\n {\n variants: {\n visible: {\n true: 'translate-y-0',\n false: 'translate-y-full',\n },\n },\n defaultVariants: {\n visible: false,\n },\n },\n);\n\nexport const bottomSheetHandleStyles =\n 'mx-auto mb-4 h-1.5 w-10 rounded-full bg-[var(--border-strong)]';\n\nexport const bottomSheetTitleStyles = 'mb-4 text-lg font-semibold text-[var(--text-primary)]';\n\nexport const bottomSheetFooterStyles = 'mt-6 flex items-center justify-end gap-2';\n","import { forwardRef, useId, useRef, type HTMLAttributes, type ReactNode } from 'react';\nimport { RichText } from '@components';\nimport {\n useDelayedUnmount,\n useDismissableLayer,\n useFocusTrap,\n useMergedRef,\n useScrollLock,\n} from '@hooks';\nimport { cn } from '@utils';\nimport {\n bottomSheetFooterStyles,\n bottomSheetHandleStyles,\n bottomSheetOverlayStyles,\n bottomSheetPanelStyles,\n bottomSheetTitleStyles,\n} from './BottomSheet.styles';\n\nconst EXIT_DURATION_MS = 200;\n\nexport type BottomSheetProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {\n open: boolean;\n onClose: () => void;\n title?: ReactNode;\n footer?: ReactNode;\n closeOnBackdropClick?: boolean;\n};\n\nexport const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(\n (\n { open, onClose, title, footer, closeOnBackdropClick = true, className, children, ...props },\n ref,\n ) => {\n const panelRef = useRef<HTMLDivElement | null>(null);\n const setPanelRef = useMergedRef(ref, panelRef);\n const titleId = useId();\n const { mounted, visible } = useDelayedUnmount(open, EXIT_DURATION_MS);\n\n useDismissableLayer(open, onClose, panelRef, closeOnBackdropClick);\n // The panel mounts one render after `open` flips, so the trap starts once it exists.\n useFocusTrap(open && mounted, panelRef);\n useScrollLock(open);\n\n if (!mounted) {\n return null;\n }\n\n return (\n <div className={bottomSheetOverlayStyles({ visible })}>\n <div\n ref={setPanelRef}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={title ? titleId : undefined}\n tabIndex={-1}\n className={cn(bottomSheetPanelStyles({ visible }), className)}\n {...props}\n >\n <div aria-hidden className={bottomSheetHandleStyles} />\n {title && (\n <RichText as=\"h2\" id={titleId} variant=\"s1\" className={bottomSheetTitleStyles}>\n {title}\n </RichText>\n )}\n {children}\n {footer && <div className={bottomSheetFooterStyles}>{footer}</div>}\n </div>\n </div>\n );\n },\n);\n\nBottomSheet.displayName = 'BottomSheet';\n"]}
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { Modal } from './chunk-4CY55XM3.js';
|
|
2
|
+
import { Switch } from './chunk-ZABQF65Z.js';
|
|
3
|
+
import { Button } from './chunk-KL6I2JFC.js';
|
|
4
|
+
import { RichText } from './chunk-P4CV2EPR.js';
|
|
5
|
+
import { useId } from 'react';
|
|
6
|
+
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
7
|
+
|
|
8
|
+
// src/components/molecules/CookiePreferences/CookiePreferences.styles.ts
|
|
9
|
+
var cookiePreferencesIntroStyles = "mb-4 text-sm text-[var(--text-secondary)]";
|
|
10
|
+
var cookieCategoryListStyles = "flex flex-col gap-4";
|
|
11
|
+
var cookieCategoryStyles = "flex flex-col gap-2 rounded-lg border border-[var(--border-default)] p-4";
|
|
12
|
+
var cookieCategoryHeaderStyles = "flex items-center justify-between gap-4";
|
|
13
|
+
var cookieCategoryTitleStyles = "font-semibold text-[var(--text-primary)]";
|
|
14
|
+
var cookieCategoryRequiredStyles = "text-xs font-semibold text-[var(--text-secondary)]";
|
|
15
|
+
var cookieCategoryDescriptionStyles = "text-sm text-[var(--text-secondary)]";
|
|
16
|
+
var CookiePreferences = ({
|
|
17
|
+
open,
|
|
18
|
+
onClose,
|
|
19
|
+
title,
|
|
20
|
+
description,
|
|
21
|
+
categories,
|
|
22
|
+
value,
|
|
23
|
+
onChange,
|
|
24
|
+
onSave,
|
|
25
|
+
saveLabel,
|
|
26
|
+
cancelLabel,
|
|
27
|
+
requiredLabel,
|
|
28
|
+
idPrefix
|
|
29
|
+
}) => {
|
|
30
|
+
const baseId = useId();
|
|
31
|
+
const prefix = idPrefix ?? baseId;
|
|
32
|
+
return /* @__PURE__ */ jsxs(
|
|
33
|
+
Modal,
|
|
34
|
+
{
|
|
35
|
+
open,
|
|
36
|
+
onClose,
|
|
37
|
+
title,
|
|
38
|
+
footer: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
39
|
+
/* @__PURE__ */ jsx(Button, { id: `${prefix}-cancel`, type: "button", variant: "ghost", onClick: onClose, children: cancelLabel }),
|
|
40
|
+
/* @__PURE__ */ jsx(Button, { id: `${prefix}-save`, type: "button", onClick: onSave, children: saveLabel })
|
|
41
|
+
] }),
|
|
42
|
+
children: [
|
|
43
|
+
description && /* @__PURE__ */ jsx(RichText, { as: "p", variant: "p3", className: cookiePreferencesIntroStyles, children: description }),
|
|
44
|
+
/* @__PURE__ */ jsx("ul", { className: cookieCategoryListStyles, children: categories.map((category) => {
|
|
45
|
+
const descriptionId = `${prefix}-${category.id}-description`;
|
|
46
|
+
return /* @__PURE__ */ jsxs("li", { className: cookieCategoryStyles, children: [
|
|
47
|
+
/* @__PURE__ */ jsx("div", { className: cookieCategoryHeaderStyles, children: category.required ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
48
|
+
/* @__PURE__ */ jsx(RichText, { as: "h3", variant: "p2", className: cookieCategoryTitleStyles, children: category.title }),
|
|
49
|
+
/* @__PURE__ */ jsx(RichText, { as: "span", variant: "p4", className: cookieCategoryRequiredStyles, children: requiredLabel })
|
|
50
|
+
] }) : /* @__PURE__ */ jsx(
|
|
51
|
+
Switch,
|
|
52
|
+
{
|
|
53
|
+
id: `${prefix}-${category.id}`,
|
|
54
|
+
label: category.title,
|
|
55
|
+
checked: value[category.id] === true,
|
|
56
|
+
onCheckedChange: (checked) => onChange(category.id, checked),
|
|
57
|
+
"aria-describedby": descriptionId
|
|
58
|
+
}
|
|
59
|
+
) }),
|
|
60
|
+
/* @__PURE__ */ jsx(
|
|
61
|
+
RichText,
|
|
62
|
+
{
|
|
63
|
+
as: "p",
|
|
64
|
+
id: descriptionId,
|
|
65
|
+
variant: "p3",
|
|
66
|
+
className: cookieCategoryDescriptionStyles,
|
|
67
|
+
children: category.description
|
|
68
|
+
}
|
|
69
|
+
)
|
|
70
|
+
] }, category.id);
|
|
71
|
+
}) })
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
);
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
export { CookiePreferences };
|
|
78
|
+
//# sourceMappingURL=chunk-LSWJBAM6.js.map
|
|
79
|
+
//# sourceMappingURL=chunk-LSWJBAM6.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/molecules/CookiePreferences/CookiePreferences.styles.ts","../src/components/molecules/CookiePreferences/CookiePreferences.tsx"],"names":[],"mappings":";;;;;;;;AAAO,IAAM,4BAAA,GAA+B,2CAAA;AAErC,IAAM,wBAAA,GAA2B,qBAAA;AAEjC,IAAM,oBAAA,GACX,0EAAA;AAEK,IAAM,0BAAA,GAA6B,yCAAA;AAEnC,IAAM,yBAAA,GAA4B,0CAAA;AAElC,IAAM,4BAAA,GAA+B,oDAAA;AAErC,IAAM,+BAAA,GAAkC,sCAAA;AC6BxC,IAAM,oBAAoB,CAAC;AAAA,EAChC,IAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAA,KAA8B;AAC5B,EAAA,MAAM,SAAS,KAAA,EAAM;AACrB,EAAA,MAAM,SAAS,QAAA,IAAY,MAAA;AAC3B,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,OAAA;AAAA,MACA,KAAA;AAAA,MACA,wBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,EAAA,EAAI,CAAA,EAAG,MAAM,CAAA,OAAA,CAAA,EAAW,IAAA,EAAK,QAAA,EAAS,OAAA,EAAQ,OAAA,EAAQ,OAAA,EAAS,OAAA,EACpE,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,wBACA,GAAA,CAAC,MAAA,EAAA,EAAO,EAAA,EAAI,CAAA,EAAG,MAAM,SAAS,IAAA,EAAK,QAAA,EAAS,OAAA,EAAS,MAAA,EAClD,QAAA,EAAA,SAAA,EACH;AAAA,OAAA,EACF,CAAA;AAAA,MAGD,QAAA,EAAA;AAAA,QAAA,WAAA,oBACC,GAAA,CAAC,YAAS,EAAA,EAAG,GAAA,EAAI,SAAQ,IAAA,EAAK,SAAA,EAAW,8BACtC,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,4BAED,IAAA,EAAA,EAAG,SAAA,EAAW,0BACZ,QAAA,EAAA,UAAA,CAAW,GAAA,CAAI,CAAC,QAAA,KAAa;AAC5B,UAAA,MAAM,aAAA,GAAgB,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,SAAS,EAAE,CAAA,YAAA,CAAA;AAC9C,UAAA,uBACE,IAAA,CAAC,IAAA,EAAA,EAAqB,SAAA,EAAW,oBAAA,EAC/B,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,0BAAA,EACb,QAAA,EAAA,QAAA,CAAS,2BACR,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,IAAG,IAAA,EAAK,OAAA,EAAQ,MAAK,SAAA,EAAW,yBAAA,EACvC,mBAAS,KAAA,EACZ,CAAA;AAAA,8BACA,GAAA,CAAC,YAAS,EAAA,EAAG,MAAA,EAAO,SAAQ,IAAA,EAAK,SAAA,EAAW,8BACzC,QAAA,EAAA,aAAA,EACH;AAAA,aAAA,EACF,CAAA,mBAEA,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,EAAA,EAAI,CAAA,EAAG,MAAM,CAAA,CAAA,EAAI,SAAS,EAAE,CAAA,CAAA;AAAA,gBAC5B,OAAO,QAAA,CAAS,KAAA;AAAA,gBAChB,OAAA,EAAS,KAAA,CAAM,QAAA,CAAS,EAAE,CAAA,KAAM,IAAA;AAAA,gBAChC,iBAAiB,CAAC,OAAA,KAAY,QAAA,CAAS,QAAA,CAAS,IAAI,OAAO,CAAA;AAAA,gBAC3D,kBAAA,EAAkB;AAAA;AAAA,aACpB,EAEJ,CAAA;AAAA,4BACA,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,EAAA,EAAG,GAAA;AAAA,gBACH,EAAA,EAAI,aAAA;AAAA,gBACJ,OAAA,EAAQ,IAAA;AAAA,gBACR,SAAA,EAAW,+BAAA;AAAA,gBAEV,QAAA,EAAA,QAAA,CAAS;AAAA;AAAA;AACZ,WAAA,EAAA,EA5BO,SAAS,EA6BlB,CAAA;AAAA,QAEJ,CAAC,CAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEJ","file":"chunk-LSWJBAM6.js","sourcesContent":["export const cookiePreferencesIntroStyles = 'mb-4 text-sm text-[var(--text-secondary)]';\n\nexport const cookieCategoryListStyles = 'flex flex-col gap-4';\n\nexport const cookieCategoryStyles =\n 'flex flex-col gap-2 rounded-lg border border-[var(--border-default)] p-4';\n\nexport const cookieCategoryHeaderStyles = 'flex items-center justify-between gap-4';\n\nexport const cookieCategoryTitleStyles = 'font-semibold text-[var(--text-primary)]';\n\nexport const cookieCategoryRequiredStyles = 'text-xs font-semibold text-[var(--text-secondary)]';\n\nexport const cookieCategoryDescriptionStyles = 'text-sm text-[var(--text-secondary)]';\n","import { useId, type ReactNode } from 'react';\nimport { Button, Modal, RichText, Switch } from '@components';\nimport {\n cookieCategoryDescriptionStyles,\n cookieCategoryHeaderStyles,\n cookieCategoryListStyles,\n cookieCategoryRequiredStyles,\n cookieCategoryStyles,\n cookieCategoryTitleStyles,\n cookiePreferencesIntroStyles,\n} from './CookiePreferences.styles';\n\nexport interface CookieCategory {\n id: string;\n title: string;\n description: ReactNode;\n /** Strictly necessary cookies can't be turned off; they show `requiredLabel` instead of a switch. */\n required?: boolean;\n}\n\nexport interface CookiePreferencesProps {\n open: boolean;\n onClose: () => void;\n title: ReactNode;\n description?: ReactNode;\n categories: CookieCategory[];\n /** Enabled state of each optional category, by id. */\n value: Record<string, boolean>;\n onChange: (id: string, enabled: boolean) => void;\n onSave: () => void;\n saveLabel: string;\n cancelLabel: string;\n /** e.g. \"Always on\". */\n requiredLabel: string;\n /** Prefix for stable ids: `<prefix>-<category id>` switches and `<prefix>-save` / `<prefix>-cancel` buttons. */\n idPrefix?: string;\n}\n\n/**\n * Per-category cookie choices in a `Modal` (focus trapped, Escape closes). Controlled: the\n * consumer holds `value` and persists it on `onSave`.\n */\nexport const CookiePreferences = ({\n open,\n onClose,\n title,\n description,\n categories,\n value,\n onChange,\n onSave,\n saveLabel,\n cancelLabel,\n requiredLabel,\n idPrefix,\n}: CookiePreferencesProps) => {\n const baseId = useId();\n const prefix = idPrefix ?? baseId;\n return (\n <Modal\n open={open}\n onClose={onClose}\n title={title}\n footer={\n <>\n <Button id={`${prefix}-cancel`} type=\"button\" variant=\"ghost\" onClick={onClose}>\n {cancelLabel}\n </Button>\n <Button id={`${prefix}-save`} type=\"button\" onClick={onSave}>\n {saveLabel}\n </Button>\n </>\n }\n >\n {description && (\n <RichText as=\"p\" variant=\"p3\" className={cookiePreferencesIntroStyles}>\n {description}\n </RichText>\n )}\n <ul className={cookieCategoryListStyles}>\n {categories.map((category) => {\n const descriptionId = `${prefix}-${category.id}-description`;\n return (\n <li key={category.id} className={cookieCategoryStyles}>\n <div className={cookieCategoryHeaderStyles}>\n {category.required ? (\n <>\n <RichText as=\"h3\" variant=\"p2\" className={cookieCategoryTitleStyles}>\n {category.title}\n </RichText>\n <RichText as=\"span\" variant=\"p4\" className={cookieCategoryRequiredStyles}>\n {requiredLabel}\n </RichText>\n </>\n ) : (\n <Switch\n id={`${prefix}-${category.id}`}\n label={category.title}\n checked={value[category.id] === true}\n onCheckedChange={(checked) => onChange(category.id, checked)}\n aria-describedby={descriptionId}\n />\n )}\n </div>\n <RichText\n as=\"p\"\n id={descriptionId}\n variant=\"p3\"\n className={cookieCategoryDescriptionStyles}\n >\n {category.description}\n </RichText>\n </li>\n );\n })}\n </ul>\n </Modal>\n );\n};\n"]}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { Button } from './chunk-KL6I2JFC.js';
|
|
2
|
+
import { RichText } from './chunk-P4CV2EPR.js';
|
|
3
|
+
import { cn } from './chunk-6LLGTBM6.js';
|
|
4
|
+
import { forwardRef, useId } from 'react';
|
|
5
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
// src/components/molecules/CookieBanner/CookieBanner.styles.ts
|
|
8
|
+
var cookieBannerStyles = [
|
|
9
|
+
"fixed inset-x-0 bottom-0 z-40 border-t border-[var(--border-default)]",
|
|
10
|
+
"bg-[var(--surface-primary)] shadow-lg"
|
|
11
|
+
].join(" ");
|
|
12
|
+
var cookieBannerContentStyles = "mx-auto flex w-full max-w-5xl flex-col gap-3 px-4 py-4";
|
|
13
|
+
var cookieBannerTitleStyles = "text-lg font-semibold text-[var(--text-primary)]";
|
|
14
|
+
var cookieBannerDescriptionStyles = "text-sm text-[var(--text-secondary)]";
|
|
15
|
+
var cookieBannerActionsStyles = "flex flex-wrap gap-2";
|
|
16
|
+
var cookieBannerButtonStyles = "min-h-11 flex-1";
|
|
17
|
+
var CookieBanner = forwardRef(
|
|
18
|
+
({
|
|
19
|
+
title,
|
|
20
|
+
description,
|
|
21
|
+
acceptLabel,
|
|
22
|
+
rejectLabel,
|
|
23
|
+
customizeLabel,
|
|
24
|
+
onAccept,
|
|
25
|
+
onReject,
|
|
26
|
+
onCustomize,
|
|
27
|
+
buttonIds = {},
|
|
28
|
+
className,
|
|
29
|
+
...props
|
|
30
|
+
}, ref) => {
|
|
31
|
+
const titleId = useId();
|
|
32
|
+
return /* @__PURE__ */ jsx(
|
|
33
|
+
"section",
|
|
34
|
+
{
|
|
35
|
+
ref,
|
|
36
|
+
"aria-labelledby": titleId,
|
|
37
|
+
className: cn(cookieBannerStyles, className),
|
|
38
|
+
...props,
|
|
39
|
+
children: /* @__PURE__ */ jsxs("div", { className: cookieBannerContentStyles, children: [
|
|
40
|
+
/* @__PURE__ */ jsx(RichText, { as: "h2", id: titleId, variant: "s1", className: cookieBannerTitleStyles, children: title }),
|
|
41
|
+
/* @__PURE__ */ jsx(RichText, { as: "p", variant: "p3", className: cookieBannerDescriptionStyles, children: description }),
|
|
42
|
+
/* @__PURE__ */ jsxs("div", { className: cookieBannerActionsStyles, children: [
|
|
43
|
+
/* @__PURE__ */ jsx(
|
|
44
|
+
Button,
|
|
45
|
+
{
|
|
46
|
+
id: buttonIds.accept,
|
|
47
|
+
type: "button",
|
|
48
|
+
className: cookieBannerButtonStyles,
|
|
49
|
+
onClick: onAccept,
|
|
50
|
+
children: acceptLabel
|
|
51
|
+
}
|
|
52
|
+
),
|
|
53
|
+
/* @__PURE__ */ jsx(
|
|
54
|
+
Button,
|
|
55
|
+
{
|
|
56
|
+
id: buttonIds.reject,
|
|
57
|
+
type: "button",
|
|
58
|
+
variant: "secondary",
|
|
59
|
+
className: cookieBannerButtonStyles,
|
|
60
|
+
onClick: onReject,
|
|
61
|
+
children: rejectLabel
|
|
62
|
+
}
|
|
63
|
+
),
|
|
64
|
+
onCustomize && customizeLabel && /* @__PURE__ */ jsx(
|
|
65
|
+
Button,
|
|
66
|
+
{
|
|
67
|
+
id: buttonIds.customize,
|
|
68
|
+
type: "button",
|
|
69
|
+
variant: "ghost",
|
|
70
|
+
className: cookieBannerButtonStyles,
|
|
71
|
+
onClick: onCustomize,
|
|
72
|
+
children: customizeLabel
|
|
73
|
+
}
|
|
74
|
+
)
|
|
75
|
+
] })
|
|
76
|
+
] })
|
|
77
|
+
}
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
);
|
|
81
|
+
CookieBanner.displayName = "CookieBanner";
|
|
82
|
+
|
|
83
|
+
export { CookieBanner };
|
|
84
|
+
//# sourceMappingURL=chunk-TR7XKJCO.js.map
|
|
85
|
+
//# sourceMappingURL=chunk-TR7XKJCO.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/molecules/CookieBanner/CookieBanner.styles.ts","../src/components/molecules/CookieBanner/CookieBanner.tsx"],"names":[],"mappings":";;;;;;;AAAO,IAAM,kBAAA,GAAqB;AAAA,EAChC,uEAAA;AAAA,EACA;AACF,CAAA,CAAE,KAAK,GAAG,CAAA;AAEH,IAAM,yBAAA,GAA4B,wDAAA;AAElC,IAAM,uBAAA,GAA0B,kDAAA;AAEhC,IAAM,6BAAA,GAAgC,sCAAA;AAEtC,IAAM,yBAAA,GAA4B,sBAAA;AAElC,IAAM,wBAAA,GAA2B,iBAAA;ACmBjC,IAAM,YAAA,GAAe,UAAA;AAAA,EAC1B,CACE;AAAA,IACE,KAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAY,EAAC;AAAA,IACb,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,UAAU,KAAA,EAAM;AACtB,IAAA,uBACE,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,iBAAA,EAAiB,OAAA;AAAA,QACjB,SAAA,EAAW,EAAA,CAAG,kBAAA,EAAoB,SAAS,CAAA;AAAA,QAC1C,GAAG,KAAA;AAAA,QAEJ,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,yBAAA,EACd,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAS,IAAG,IAAA,EAAK,EAAA,EAAI,SAAS,OAAA,EAAQ,IAAA,EAAK,SAAA,EAAW,uBAAA,EACpD,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,0BACA,GAAA,CAAC,YAAS,EAAA,EAAG,GAAA,EAAI,SAAQ,IAAA,EAAK,SAAA,EAAW,+BACtC,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,0BACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,yBAAA,EACd,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,IAAI,SAAA,CAAU,MAAA;AAAA,gBACd,IAAA,EAAK,QAAA;AAAA,gBACL,SAAA,EAAW,wBAAA;AAAA,gBACX,OAAA,EAAS,QAAA;AAAA,gBAER,QAAA,EAAA;AAAA;AAAA,aACH;AAAA,4BACA,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,IAAI,SAAA,CAAU,MAAA;AAAA,gBACd,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAQ,WAAA;AAAA,gBACR,SAAA,EAAW,wBAAA;AAAA,gBACX,OAAA,EAAS,QAAA;AAAA,gBAER,QAAA,EAAA;AAAA;AAAA,aACH;AAAA,YACC,eAAe,cAAA,oBACd,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,IAAI,SAAA,CAAU,SAAA;AAAA,gBACd,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAQ,OAAA;AAAA,gBACR,SAAA,EAAW,wBAAA;AAAA,gBACX,OAAA,EAAS,WAAA;AAAA,gBAER,QAAA,EAAA;AAAA;AAAA;AACH,WAAA,EAEJ;AAAA,SAAA,EACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,YAAA,CAAa,WAAA,GAAc,cAAA","file":"chunk-TR7XKJCO.js","sourcesContent":["export const cookieBannerStyles = [\n 'fixed inset-x-0 bottom-0 z-40 border-t border-[var(--border-default)]',\n 'bg-[var(--surface-primary)] shadow-lg',\n].join(' ');\n\nexport const cookieBannerContentStyles = 'mx-auto flex w-full max-w-5xl flex-col gap-3 px-4 py-4';\n\nexport const cookieBannerTitleStyles = 'text-lg font-semibold text-[var(--text-primary)]';\n\nexport const cookieBannerDescriptionStyles = 'text-sm text-[var(--text-secondary)]';\n\nexport const cookieBannerActionsStyles = 'flex flex-wrap gap-2';\n\nexport const cookieBannerButtonStyles = 'min-h-11 flex-1';\n","import { forwardRef, useId, type HTMLAttributes, type ReactNode } from 'react';\nimport { Button, RichText } from '@components';\nimport { cn } from '@utils';\nimport {\n cookieBannerActionsStyles,\n cookieBannerButtonStyles,\n cookieBannerContentStyles,\n cookieBannerDescriptionStyles,\n cookieBannerStyles,\n cookieBannerTitleStyles,\n} from './CookieBanner.styles';\n\nexport type CookieBannerProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {\n title: ReactNode;\n /** What the cookies are for; usually ends with a link to the privacy policy. */\n description: ReactNode;\n acceptLabel: string;\n rejectLabel: string;\n /** Shown only when `onCustomize` is set (opens the preferences, e.g. `CookiePreferences`). */\n customizeLabel?: string;\n onAccept: () => void;\n onReject: () => void;\n onCustomize?: () => void;\n /** Stable ids for the buttons, e.g. for analytics click triggers. */\n buttonIds?: { accept?: string; reject?: string; customize?: string };\n};\n\n/**\n * Cookie consent bar pinned to the bottom of the page. Presentational: the consumer decides when\n * to show it and stores the answer. Accept and reject weigh the same visually, so rejecting is as\n * easy as accepting. Not modal: the page stays usable.\n */\nexport const CookieBanner = forwardRef<HTMLElement, CookieBannerProps>(\n (\n {\n title,\n description,\n acceptLabel,\n rejectLabel,\n customizeLabel,\n onAccept,\n onReject,\n onCustomize,\n buttonIds = {},\n className,\n ...props\n },\n ref,\n ) => {\n const titleId = useId();\n return (\n <section\n ref={ref}\n aria-labelledby={titleId}\n className={cn(cookieBannerStyles, className)}\n {...props}\n >\n <div className={cookieBannerContentStyles}>\n <RichText as=\"h2\" id={titleId} variant=\"s1\" className={cookieBannerTitleStyles}>\n {title}\n </RichText>\n <RichText as=\"p\" variant=\"p3\" className={cookieBannerDescriptionStyles}>\n {description}\n </RichText>\n <div className={cookieBannerActionsStyles}>\n <Button\n id={buttonIds.accept}\n type=\"button\"\n className={cookieBannerButtonStyles}\n onClick={onAccept}\n >\n {acceptLabel}\n </Button>\n <Button\n id={buttonIds.reject}\n type=\"button\"\n variant=\"secondary\"\n className={cookieBannerButtonStyles}\n onClick={onReject}\n >\n {rejectLabel}\n </Button>\n {onCustomize && customizeLabel && (\n <Button\n id={buttonIds.customize}\n type=\"button\"\n variant=\"ghost\"\n className={cookieBannerButtonStyles}\n onClick={onCustomize}\n >\n {customizeLabel}\n </Button>\n )}\n </div>\n </div>\n </section>\n );\n },\n);\n\nCookieBanner.displayName = 'CookieBanner';\n"]}
|
|
@@ -1,39 +1,10 @@
|
|
|
1
|
+
import { selectStyles, selectChevronStyles } from './chunk-4H6VER5P.js';
|
|
1
2
|
import { inputLabelStyles, inputErrorStyles, inputHintStyles } from './chunk-FFKHEBQ7.js';
|
|
2
3
|
import { RichText } from './chunk-P4CV2EPR.js';
|
|
3
4
|
import { cn } from './chunk-6LLGTBM6.js';
|
|
4
5
|
import { forwardRef, useId } from 'react';
|
|
5
|
-
import { cva } from 'class-variance-authority';
|
|
6
6
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
7
7
|
|
|
8
|
-
var selectStyles = cva(
|
|
9
|
-
[
|
|
10
|
-
"flex w-full appearance-none rounded-md bg-no-repeat pr-10",
|
|
11
|
-
"text-[var(--input-text)] bg-[var(--input-bg)]",
|
|
12
|
-
"border border-[var(--input-border)]",
|
|
13
|
-
"transition-colors duration-150 ease-in-out",
|
|
14
|
-
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-0",
|
|
15
|
-
"focus-visible:border-[var(--input-border-focus)]",
|
|
16
|
-
"disabled:cursor-not-allowed disabled:opacity-50"
|
|
17
|
-
],
|
|
18
|
-
{
|
|
19
|
-
variants: {
|
|
20
|
-
state: {
|
|
21
|
-
default: "",
|
|
22
|
-
error: "border-[var(--input-border-error)] focus-visible:ring-[var(--border-error)]"
|
|
23
|
-
},
|
|
24
|
-
inputSize: {
|
|
25
|
-
sm: "h-8 px-2 text-xs",
|
|
26
|
-
md: "h-10 px-3 text-sm",
|
|
27
|
-
lg: "h-12 px-4 text-base"
|
|
28
|
-
}
|
|
29
|
-
},
|
|
30
|
-
defaultVariants: {
|
|
31
|
-
state: "default",
|
|
32
|
-
inputSize: "md"
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
);
|
|
36
|
-
var selectChevronStyles = "pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[var(--text-secondary)]";
|
|
37
8
|
var Select = forwardRef(
|
|
38
9
|
({ className, state, inputSize, label, hint, error, id: idProp, children, ...props }, ref) => {
|
|
39
10
|
const generatedId = useId();
|
|
@@ -87,5 +58,5 @@ var Select = forwardRef(
|
|
|
87
58
|
Select.displayName = "Select";
|
|
88
59
|
|
|
89
60
|
export { Select };
|
|
90
|
-
//# sourceMappingURL=chunk-
|
|
91
|
-
//# sourceMappingURL=chunk-
|
|
61
|
+
//# sourceMappingURL=chunk-YYNW2PXL.js.map
|
|
62
|
+
//# sourceMappingURL=chunk-YYNW2PXL.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/atoms/Select/Select.tsx"],"names":[],"mappings":";;;;;;;AAsBO,IAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,EAAE,SAAA,EAAW,KAAA,EAAO,WAAW,KAAA,EAAO,IAAA,EAAM,KAAA,EAAO,EAAA,EAAI,MAAA,EAAQ,QAAA,EAAU,GAAG,KAAA,IAAS,GAAA,KAAQ;AAC5F,IAAA,MAAM,cAAc,KAAA,EAAM;AAC1B,IAAA,MAAM,KAAK,MAAA,IAAU,WAAA;AACrB,IAAA,MAAM,aAAA,GAAgB,QAAQ,OAAA,GAAU,KAAA;AAExC,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBAAA,EACZ,QAAA,EAAA;AAAA,MAAA,KAAA,oBACC,GAAA,CAAC,OAAA,EAAA,EAAM,OAAA,EAAS,EAAA,EACd,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,IAAA,EAAK,SAAA,EAAW,gBAAA,EACzC,iBACH,CAAA,EACF,CAAA;AAAA,sBAEF,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EACb,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,GAAA;AAAA,YACA,EAAA;AAAA,YACA,kBAAA,EAAkB,QAAQ,CAAA,EAAG,EAAE,WAAW,IAAA,GAAO,CAAA,EAAG,EAAE,CAAA,KAAA,CAAA,GAAU,MAAA;AAAA,YAChE,cAAA,EAAc,QAAQ,MAAA,GAAS,MAAA;AAAA,YAC/B,SAAA,EAAW,GAAG,YAAA,CAAa,EAAE,OAAO,aAAA,EAAe,SAAA,EAAW,CAAA,EAAG,SAAS,CAAA;AAAA,YACzE,GAAG,KAAA;AAAA,YAEH;AAAA;AAAA,SACH;AAAA,wBACA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAW,IAAA;AAAA,YACX,OAAA,EAAQ,WAAA;AAAA,YACR,IAAA,EAAK,MAAA;AAAA,YACL,MAAA,EAAO,cAAA;AAAA,YACP,WAAA,EAAa,CAAA;AAAA,YACb,aAAA,EAAc,OAAA;AAAA,YACd,cAAA,EAAe,OAAA;AAAA,YACf,SAAA,EAAW,mBAAA;AAAA,YAEX,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,cAAA,EAAe;AAAA;AAAA;AACzB,OAAA,EACF,CAAA;AAAA,MACC,KAAA,oBACC,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAG,GAAA;AAAA,UACH,EAAA,EAAI,GAAG,EAAE,CAAA,MAAA,CAAA;AAAA,UACT,IAAA,EAAK,OAAA;AAAA,UACL,OAAA,EAAQ,IAAA;AAAA,UACR,SAAA,EAAW,gBAAA;AAAA,UAEV,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,MAED,CAAC,KAAA,IAAS,IAAA,oBACT,GAAA,CAAC,YAAS,EAAA,EAAG,GAAA,EAAI,EAAA,EAAI,CAAA,EAAG,EAAE,CAAA,KAAA,CAAA,EAAS,OAAA,EAAQ,IAAA,EAAK,SAAA,EAAW,iBACxD,QAAA,EAAA,IAAA,EACH;AAAA,KAAA,EAEJ,CAAA;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA","file":"chunk-YYNW2PXL.js","sourcesContent":["import { RichText } from '@components';\nimport { cn } from '@utils';\nimport type { VariantProps } from 'class-variance-authority';\nimport { forwardRef, useId, type SelectHTMLAttributes } from 'react';\nimport {\n inputErrorStyles,\n inputHintStyles,\n inputLabelStyles,\n} from '@components/atoms/Input/Input.styles';\nimport { selectChevronStyles, selectStyles } from './Select.styles';\n\nexport type SelectProps = SelectHTMLAttributes<HTMLSelectElement> &\n VariantProps<typeof selectStyles> & {\n label?: string;\n hint?: string;\n error?: string;\n };\n\n/**\n * A native `<select>` with the same label / hint / error contract and look as `Input`. Native on\n * purpose: it gets the platform picker on mobile, typeahead and full screen reader support for free.\n */\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n ({ className, state, inputSize, label, hint, error, id: idProp, children, ...props }, ref) => {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const resolvedState = error ? 'error' : state;\n\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <label htmlFor={id}>\n <RichText as=\"span\" variant=\"p3\" className={inputLabelStyles}>\n {label}\n </RichText>\n </label>\n )}\n <div className=\"relative\">\n <select\n ref={ref}\n id={id}\n aria-describedby={error ? `${id}-error` : hint ? `${id}-hint` : undefined}\n aria-invalid={error ? 'true' : undefined}\n className={cn(selectStyles({ state: resolvedState, inputSize }), className)}\n {...props}\n >\n {children}\n </select>\n <svg\n aria-hidden\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth={2}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className={selectChevronStyles}\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n </div>\n {error && (\n <RichText\n as=\"p\"\n id={`${id}-error`}\n role=\"alert\"\n variant=\"p4\"\n className={inputErrorStyles}\n >\n {error}\n </RichText>\n )}\n {!error && hint && (\n <RichText as=\"p\" id={`${id}-hint`} variant=\"p4\" className={inputHintStyles}>\n {hint}\n </RichText>\n )}\n </div>\n );\n },\n);\n\nSelect.displayName = 'Select';\n"]}
|
|
@@ -2,11 +2,7 @@ import * as react from 'react';
|
|
|
2
2
|
import { SelectHTMLAttributes } from 'react';
|
|
3
3
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
4
4
|
import { VariantProps } from 'class-variance-authority';
|
|
5
|
-
|
|
6
|
-
declare const selectStyles: (props?: ({
|
|
7
|
-
state?: "error" | "default" | null | undefined;
|
|
8
|
-
inputSize?: "sm" | "md" | "lg" | null | undefined;
|
|
9
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
5
|
+
import { s as selectStyles } from '../../../Select.styles-CeZROqOk.js';
|
|
10
6
|
|
|
11
7
|
type SelectProps = SelectHTMLAttributes<HTMLSelectElement> & VariantProps<typeof selectStyles> & {
|
|
12
8
|
label?: string;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
export { BottomSheet } from '../../../chunk-
|
|
1
|
+
export { BottomSheet } from '../../../chunk-L4BPQAXU.js';
|
|
2
|
+
import '../../../chunk-QT62VC36.js';
|
|
2
3
|
import '../../../chunk-53YMHM24.js';
|
|
3
|
-
import '../../../chunk-BNEEI7S5.js';
|
|
4
4
|
import '../../../chunk-JCJP427C.js';
|
|
5
|
-
import '../../../chunk-
|
|
5
|
+
import '../../../chunk-BNEEI7S5.js';
|
|
6
6
|
import '../../../chunk-P4Z7HH66.js';
|
|
7
7
|
import '../../../chunk-P4CV2EPR.js';
|
|
8
8
|
import '../../../chunk-6LLGTBM6.js';
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
type CookieBannerProps = Omit<HTMLAttributes<HTMLElement>, 'title'> & {
|
|
5
|
+
title: ReactNode;
|
|
6
|
+
/** What the cookies are for; usually ends with a link to the privacy policy. */
|
|
7
|
+
description: ReactNode;
|
|
8
|
+
acceptLabel: string;
|
|
9
|
+
rejectLabel: string;
|
|
10
|
+
/** Shown only when `onCustomize` is set (opens the preferences, e.g. `CookiePreferences`). */
|
|
11
|
+
customizeLabel?: string;
|
|
12
|
+
onAccept: () => void;
|
|
13
|
+
onReject: () => void;
|
|
14
|
+
onCustomize?: () => void;
|
|
15
|
+
/** Stable ids for the buttons, e.g. for analytics click triggers. */
|
|
16
|
+
buttonIds?: {
|
|
17
|
+
accept?: string;
|
|
18
|
+
reject?: string;
|
|
19
|
+
customize?: string;
|
|
20
|
+
};
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* Cookie consent bar pinned to the bottom of the page. Presentational: the consumer decides when
|
|
24
|
+
* to show it and stores the answer. Accept and reject weigh the same visually, so rejecting is as
|
|
25
|
+
* easy as accepting. Not modal: the page stays usable.
|
|
26
|
+
*/
|
|
27
|
+
declare const CookieBanner: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "title"> & {
|
|
28
|
+
title: ReactNode;
|
|
29
|
+
/** What the cookies are for; usually ends with a link to the privacy policy. */
|
|
30
|
+
description: ReactNode;
|
|
31
|
+
acceptLabel: string;
|
|
32
|
+
rejectLabel: string;
|
|
33
|
+
/** Shown only when `onCustomize` is set (opens the preferences, e.g. `CookiePreferences`). */
|
|
34
|
+
customizeLabel?: string;
|
|
35
|
+
onAccept: () => void;
|
|
36
|
+
onReject: () => void;
|
|
37
|
+
onCustomize?: () => void;
|
|
38
|
+
/** Stable ids for the buttons, e.g. for analytics click triggers. */
|
|
39
|
+
buttonIds?: {
|
|
40
|
+
accept?: string;
|
|
41
|
+
reject?: string;
|
|
42
|
+
customize?: string;
|
|
43
|
+
};
|
|
44
|
+
} & react.RefAttributes<HTMLElement>>;
|
|
45
|
+
|
|
46
|
+
export { CookieBanner, type CookieBannerProps };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { CookieBanner } from '../../../chunk-TR7XKJCO.js';
|
|
2
|
+
import '../../../chunk-KL6I2JFC.js';
|
|
3
|
+
import '../../../chunk-P4Z7HH66.js';
|
|
4
|
+
import '../../../chunk-P4CV2EPR.js';
|
|
5
|
+
import '../../../chunk-6LLGTBM6.js';
|
|
6
|
+
//# sourceMappingURL=index.js.map
|
|
7
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
interface CookieCategory {
|
|
5
|
+
id: string;
|
|
6
|
+
title: string;
|
|
7
|
+
description: ReactNode;
|
|
8
|
+
/** Strictly necessary cookies can't be turned off; they show `requiredLabel` instead of a switch. */
|
|
9
|
+
required?: boolean;
|
|
10
|
+
}
|
|
11
|
+
interface CookiePreferencesProps {
|
|
12
|
+
open: boolean;
|
|
13
|
+
onClose: () => void;
|
|
14
|
+
title: ReactNode;
|
|
15
|
+
description?: ReactNode;
|
|
16
|
+
categories: CookieCategory[];
|
|
17
|
+
/** Enabled state of each optional category, by id. */
|
|
18
|
+
value: Record<string, boolean>;
|
|
19
|
+
onChange: (id: string, enabled: boolean) => void;
|
|
20
|
+
onSave: () => void;
|
|
21
|
+
saveLabel: string;
|
|
22
|
+
cancelLabel: string;
|
|
23
|
+
/** e.g. "Always on". */
|
|
24
|
+
requiredLabel: string;
|
|
25
|
+
/** Prefix for stable ids: `<prefix>-<category id>` switches and `<prefix>-save` / `<prefix>-cancel` buttons. */
|
|
26
|
+
idPrefix?: string;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Per-category cookie choices in a `Modal` (focus trapped, Escape closes). Controlled: the
|
|
30
|
+
* consumer holds `value` and persists it on `onSave`.
|
|
31
|
+
*/
|
|
32
|
+
declare const CookiePreferences: ({ open, onClose, title, description, categories, value, onChange, onSave, saveLabel, cancelLabel, requiredLabel, idPrefix, }: CookiePreferencesProps) => react_jsx_runtime.JSX.Element;
|
|
33
|
+
|
|
34
|
+
export { type CookieCategory, CookiePreferences, type CookiePreferencesProps };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export { CookiePreferences } from '../../../chunk-LSWJBAM6.js';
|
|
2
|
+
import '../../../chunk-4CY55XM3.js';
|
|
3
|
+
import '../../../chunk-ZABQF65Z.js';
|
|
4
|
+
import '../../../chunk-QT62VC36.js';
|
|
5
|
+
import '../../../chunk-53YMHM24.js';
|
|
6
|
+
import '../../../chunk-JCJP427C.js';
|
|
7
|
+
import '../../../chunk-BNEEI7S5.js';
|
|
8
|
+
import '../../../chunk-KL6I2JFC.js';
|
|
9
|
+
import '../../../chunk-P4Z7HH66.js';
|
|
10
|
+
import '../../../chunk-P4CV2EPR.js';
|
|
11
|
+
import '../../../chunk-6LLGTBM6.js';
|
|
12
|
+
//# sourceMappingURL=index.js.map
|
|
13
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
export { Drawer } from '../../../chunk-
|
|
1
|
+
export { Drawer } from '../../../chunk-42G4RRCZ.js';
|
|
2
|
+
import '../../../chunk-QT62VC36.js';
|
|
2
3
|
import '../../../chunk-53YMHM24.js';
|
|
3
|
-
import '../../../chunk-BNEEI7S5.js';
|
|
4
4
|
import '../../../chunk-JCJP427C.js';
|
|
5
|
-
import '../../../chunk-
|
|
5
|
+
import '../../../chunk-BNEEI7S5.js';
|
|
6
6
|
import '../../../chunk-KL6I2JFC.js';
|
|
7
7
|
import '../../../chunk-P4Z7HH66.js';
|
|
8
8
|
import '../../../chunk-P4CV2EPR.js';
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
3
|
+
import { VariantProps } from 'class-variance-authority';
|
|
4
|
+
import { s as selectStyles } from '../../../Select.styles-CeZROqOk.js';
|
|
5
|
+
|
|
6
|
+
interface DropdownOption {
|
|
7
|
+
value: string;
|
|
8
|
+
label: string;
|
|
9
|
+
}
|
|
10
|
+
type DropdownProps = VariantProps<typeof selectStyles> & {
|
|
11
|
+
label: string;
|
|
12
|
+
options: DropdownOption[];
|
|
13
|
+
value: string;
|
|
14
|
+
onChange: (value: string) => void;
|
|
15
|
+
hint?: string;
|
|
16
|
+
error?: string;
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
id?: string;
|
|
19
|
+
name?: string;
|
|
20
|
+
className?: string;
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* A select whose list is drawn with the theme (a native `<select>` opens the platform picker).
|
|
24
|
+
* WAI-ARIA "select-only combobox": focus stays on the trigger and the active option is announced
|
|
25
|
+
* through `aria-activedescendant`; arrows, Home/End, Enter/Space, Escape and typing a letter behave
|
|
26
|
+
* like a native select.
|
|
27
|
+
*/
|
|
28
|
+
declare const Dropdown: react.ForwardRefExoticComponent<VariantProps<(props?: ({
|
|
29
|
+
state?: "error" | "default" | null | undefined;
|
|
30
|
+
inputSize?: "sm" | "md" | "lg" | null | undefined;
|
|
31
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string> & {
|
|
32
|
+
label: string;
|
|
33
|
+
options: DropdownOption[];
|
|
34
|
+
value: string;
|
|
35
|
+
onChange: (value: string) => void;
|
|
36
|
+
hint?: string;
|
|
37
|
+
error?: string;
|
|
38
|
+
disabled?: boolean;
|
|
39
|
+
id?: string;
|
|
40
|
+
name?: string;
|
|
41
|
+
className?: string;
|
|
42
|
+
} & react.RefAttributes<HTMLButtonElement>>;
|
|
43
|
+
|
|
44
|
+
export { Dropdown, type DropdownOption, type DropdownProps };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export { Dropdown } from '../../../chunk-BGUNAALU.js';
|
|
2
|
+
import '../../../chunk-JCJP427C.js';
|
|
3
|
+
import '../../../chunk-4H6VER5P.js';
|
|
4
|
+
import '../../../chunk-FFKHEBQ7.js';
|
|
5
|
+
import '../../../chunk-P4CV2EPR.js';
|
|
6
|
+
import '../../../chunk-6LLGTBM6.js';
|
|
7
|
+
//# sourceMappingURL=index.js.map
|
|
8
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
export { Modal } from '../../../chunk-
|
|
1
|
+
export { Modal } from '../../../chunk-4CY55XM3.js';
|
|
2
|
+
import '../../../chunk-QT62VC36.js';
|
|
2
3
|
import '../../../chunk-53YMHM24.js';
|
|
3
|
-
import '../../../chunk-BNEEI7S5.js';
|
|
4
4
|
import '../../../chunk-JCJP427C.js';
|
|
5
|
-
import '../../../chunk-
|
|
5
|
+
import '../../../chunk-BNEEI7S5.js';
|
|
6
6
|
import '../../../chunk-P4Z7HH66.js';
|
|
7
7
|
import '../../../chunk-P4CV2EPR.js';
|
|
8
8
|
import '../../../chunk-6LLGTBM6.js';
|
package/dist/index.d.ts
CHANGED
|
@@ -11,7 +11,10 @@ export { Accordion, AccordionProps } from './components/molecules/Accordion/inde
|
|
|
11
11
|
export { BottomSheet, BottomSheetProps } from './components/molecules/BottomSheet/index.js';
|
|
12
12
|
export { BreadcrumbItem, Breadcrumbs, BreadcrumbsProps } from './components/molecules/Breadcrumbs/index.js';
|
|
13
13
|
export { Card, CardContent, CardContentProps, CardDescription, CardDescriptionProps, CardFooter, CardFooterProps, CardHeader, CardHeaderProps, CardProps, CardTitle, CardTitleProps } from './components/molecules/Card/index.js';
|
|
14
|
+
export { CookieBanner, CookieBannerProps } from './components/molecules/CookieBanner/index.js';
|
|
15
|
+
export { CookieCategory, CookiePreferences, CookiePreferencesProps } from './components/molecules/CookiePreferences/index.js';
|
|
14
16
|
export { Drawer, DrawerProps } from './components/molecules/Drawer/index.js';
|
|
17
|
+
export { Dropdown, DropdownOption, DropdownProps } from './components/molecules/Dropdown/index.js';
|
|
15
18
|
export { Language, LanguageOption, LanguageProps } from './components/molecules/Language/index.js';
|
|
16
19
|
export { Modal, ModalProps } from './components/molecules/Modal/index.js';
|
|
17
20
|
export { Snackbar, SnackbarProps } from './components/molecules/Snackbar/index.js';
|
|
@@ -28,4 +31,5 @@ import 'react';
|
|
|
28
31
|
import 'class-variance-authority/types';
|
|
29
32
|
import 'class-variance-authority';
|
|
30
33
|
import 'react/jsx-runtime';
|
|
34
|
+
import './Select.styles-CeZROqOk.js';
|
|
31
35
|
import 'clsx';
|
package/dist/index.js
CHANGED
|
@@ -1,20 +1,23 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { useMediaQuery } from './chunk-2HCMNEIQ.js';
|
|
2
|
+
export { Drawer } from './chunk-42G4RRCZ.js';
|
|
3
|
+
export { Dropdown } from './chunk-BGUNAALU.js';
|
|
4
|
+
export { Language } from './chunk-2YBZCUME.js';
|
|
2
5
|
export { Snackbar } from './chunk-BKPP4D3Q.js';
|
|
3
6
|
export { Table, TableBody, TableCell, TableHead, TableHeaderCell, TableRow } from './chunk-XCUA543I.js';
|
|
4
7
|
export { Timeline } from './chunk-UL33H4AD.js';
|
|
5
|
-
export { useMediaQuery } from './chunk-2HCMNEIQ.js';
|
|
6
|
-
export { Switch } from './chunk-ZABQF65Z.js';
|
|
7
8
|
export { Textarea } from './chunk-3YRDRHO3.js';
|
|
8
9
|
export { Accordion } from './chunk-V3YXRI7M.js';
|
|
9
|
-
export { BottomSheet } from './chunk-
|
|
10
|
+
export { BottomSheet } from './chunk-L4BPQAXU.js';
|
|
10
11
|
export { Breadcrumbs } from './chunk-PE6XEC7Y.js';
|
|
11
12
|
export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-N5CLCKR3.js';
|
|
12
|
-
export {
|
|
13
|
+
export { CookieBanner } from './chunk-TR7XKJCO.js';
|
|
14
|
+
export { CookiePreferences } from './chunk-LSWJBAM6.js';
|
|
15
|
+
export { Modal } from './chunk-4CY55XM3.js';
|
|
16
|
+
export { Switch } from './chunk-ZABQF65Z.js';
|
|
17
|
+
export { useFocusTrap } from './chunk-QT62VC36.js';
|
|
13
18
|
export { useScrollLock } from './chunk-53YMHM24.js';
|
|
14
|
-
export { useDelayedUnmount } from './chunk-BNEEI7S5.js';
|
|
15
19
|
export { useDismissableLayer } from './chunk-JCJP427C.js';
|
|
16
|
-
export {
|
|
17
|
-
export { Language } from './chunk-2YBZCUME.js';
|
|
20
|
+
export { useDelayedUnmount } from './chunk-BNEEI7S5.js';
|
|
18
21
|
import './chunk-GQMA2AQI.js';
|
|
19
22
|
export { Button, buttonStyles } from './chunk-KL6I2JFC.js';
|
|
20
23
|
export { useMergedRef } from './chunk-P4Z7HH66.js';
|
|
@@ -22,7 +25,8 @@ export { Icon } from './chunk-7HQFLM4A.js';
|
|
|
22
25
|
export { Image } from './chunk-5IHM2545.js';
|
|
23
26
|
export { Input } from './chunk-DP274HDM.js';
|
|
24
27
|
export { Link } from './chunk-D4I5OF3C.js';
|
|
25
|
-
export { Select } from './chunk-
|
|
28
|
+
export { Select } from './chunk-YYNW2PXL.js';
|
|
29
|
+
import './chunk-4H6VER5P.js';
|
|
26
30
|
import './chunk-FFKHEBQ7.js';
|
|
27
31
|
export { RichText, elementByVariant } from './chunk-P4CV2EPR.js';
|
|
28
32
|
export { cn } from './chunk-6LLGTBM6.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@inzumer/ui-library",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "React UI component library for the Inzumer design system",
|
|
6
6
|
"license": "MIT",
|
|
@@ -84,10 +84,22 @@
|
|
|
84
84
|
"types": "./dist/components/molecules/Card/index.d.ts",
|
|
85
85
|
"import": "./dist/components/molecules/Card/index.js"
|
|
86
86
|
},
|
|
87
|
+
"./cookie-banner": {
|
|
88
|
+
"types": "./dist/components/molecules/CookieBanner/index.d.ts",
|
|
89
|
+
"import": "./dist/components/molecules/CookieBanner/index.js"
|
|
90
|
+
},
|
|
91
|
+
"./cookie-preferences": {
|
|
92
|
+
"types": "./dist/components/molecules/CookiePreferences/index.d.ts",
|
|
93
|
+
"import": "./dist/components/molecules/CookiePreferences/index.js"
|
|
94
|
+
},
|
|
87
95
|
"./drawer": {
|
|
88
96
|
"types": "./dist/components/molecules/Drawer/index.d.ts",
|
|
89
97
|
"import": "./dist/components/molecules/Drawer/index.js"
|
|
90
98
|
},
|
|
99
|
+
"./dropdown": {
|
|
100
|
+
"types": "./dist/components/molecules/Dropdown/index.d.ts",
|
|
101
|
+
"import": "./dist/components/molecules/Dropdown/index.js"
|
|
102
|
+
},
|
|
91
103
|
"./language": {
|
|
92
104
|
"types": "./dist/components/molecules/Language/index.d.ts",
|
|
93
105
|
"import": "./dist/components/molecules/Language/index.js"
|
|
@@ -166,8 +178,8 @@
|
|
|
166
178
|
"typescript": "^5.7.2",
|
|
167
179
|
"vite-tsconfig-paths": "^6.1.1",
|
|
168
180
|
"vitest": "^2.1.6",
|
|
169
|
-
"@inzumer/
|
|
170
|
-
"@inzumer/
|
|
181
|
+
"@inzumer/tsconfig": "0.1.0",
|
|
182
|
+
"@inzumer/eslint-config": "0.1.0"
|
|
171
183
|
},
|
|
172
184
|
"scripts": {
|
|
173
185
|
"build": "tsup",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/atoms/Select/Select.styles.ts","../src/components/atoms/Select/Select.tsx"],"names":[],"mappings":"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","file":"chunk-WUEVXL76.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const selectStyles = cva(\n [\n 'flex w-full appearance-none rounded-md bg-no-repeat pr-10',\n 'text-[var(--input-text)] bg-[var(--input-bg)]',\n 'border border-[var(--input-border)]',\n 'transition-colors duration-150 ease-in-out',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-0',\n 'focus-visible:border-[var(--input-border-focus)]',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n ],\n {\n variants: {\n state: {\n default: '',\n error: 'border-[var(--input-border-error)] focus-visible:ring-[var(--border-error)]',\n },\n inputSize: {\n sm: 'h-8 px-2 text-xs',\n md: 'h-10 px-3 text-sm',\n lg: 'h-12 px-4 text-base',\n },\n },\n defaultVariants: {\n state: 'default',\n inputSize: 'md',\n },\n },\n);\n\n/** Chevron drawn with `currentColor`, positioned over the right padding of the select. */\nexport const selectChevronStyles =\n 'pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[var(--text-secondary)]';\n","import { RichText } from '@components';\nimport { cn } from '@utils';\nimport type { VariantProps } from 'class-variance-authority';\nimport { forwardRef, useId, type SelectHTMLAttributes } from 'react';\nimport {\n inputErrorStyles,\n inputHintStyles,\n inputLabelStyles,\n} from '@components/atoms/Input/Input.styles';\nimport { selectChevronStyles, selectStyles } from './Select.styles';\n\nexport type SelectProps = SelectHTMLAttributes<HTMLSelectElement> &\n VariantProps<typeof selectStyles> & {\n label?: string;\n hint?: string;\n error?: string;\n };\n\n/**\n * A native `<select>` with the same label / hint / error contract and look as `Input`. Native on\n * purpose: it gets the platform picker on mobile, typeahead and full screen reader support for free.\n */\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n ({ className, state, inputSize, label, hint, error, id: idProp, children, ...props }, ref) => {\n const generatedId = useId();\n const id = idProp ?? generatedId;\n const resolvedState = error ? 'error' : state;\n\n return (\n <div className=\"flex flex-col gap-1.5\">\n {label && (\n <label htmlFor={id}>\n <RichText as=\"span\" variant=\"p3\" className={inputLabelStyles}>\n {label}\n </RichText>\n </label>\n )}\n <div className=\"relative\">\n <select\n ref={ref}\n id={id}\n aria-describedby={error ? `${id}-error` : hint ? `${id}-hint` : undefined}\n aria-invalid={error ? 'true' : undefined}\n className={cn(selectStyles({ state: resolvedState, inputSize }), className)}\n {...props}\n >\n {children}\n </select>\n <svg\n aria-hidden\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth={2}\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className={selectChevronStyles}\n >\n <path d=\"m6 9 6 6 6-6\" />\n </svg>\n </div>\n {error && (\n <RichText\n as=\"p\"\n id={`${id}-error`}\n role=\"alert\"\n variant=\"p4\"\n className={inputErrorStyles}\n >\n {error}\n </RichText>\n )}\n {!error && hint && (\n <RichText as=\"p\" id={`${id}-hint`} variant=\"p4\" className={inputHintStyles}>\n {hint}\n </RichText>\n )}\n </div>\n );\n },\n);\n\nSelect.displayName = 'Select';\n"]}
|