@leabankab/component-library 6.1.0 → 7.1.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/CHANGELOG.md +213 -0
- package/README.md +1 -0
- package/dist/component-library.es.js +2043 -1789
- package/dist/component-library.es.js.map +1 -1
- package/dist/component-library.umd.js +12 -11
- package/dist/component-library.umd.js.map +1 -1
- package/dist/components/buttons/button-base.d.ts +34 -0
- package/dist/components/buttons/button.d.ts +29 -13
- package/dist/components/buttons/close-button.d.ts +14 -0
- package/dist/components/buttons/download-trigger.d.ts +5 -15
- package/dist/components/buttons/icon-button.d.ts +38 -8
- package/dist/components/buttons/index.d.ts +1 -0
- package/dist/components/dev-panel/use-dev-panel-labels.d.ts +1 -1
- package/dist/components/feedback/dialog.d.ts +79 -19
- package/dist/components/feedback/drawer.d.ts +84 -19
- package/dist/components/feedback/index.d.ts +4 -2
- package/dist/components/feedback/simple-dialog.d.ts +40 -0
- package/dist/components/feedback/simple-drawer.d.ts +30 -0
- package/dist/components/form/datepicker/use-view-toggle-labels.d.ts +1 -1
- package/dist/components/form/index.d.ts +1 -0
- package/dist/components/form/switch.d.ts +33 -0
- package/dist/components/form/use-autocomplete-labels.d.ts +1 -1
- package/dist/components/surfaces/accordion.d.ts +81 -12
- package/dist/components/surfaces/index.d.ts +2 -1
- package/dist/components/surfaces/simple-accordion.d.ts +64 -0
- package/dist/index.css +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/utils/merge-class-name.d.ts +11 -0
- package/package.json +9 -2
|
@@ -1,15 +1,84 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export type
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
|
|
2
|
+
export type Variant = "outline" | "solid" | "divided" | "ghost";
|
|
3
|
+
export type IconPosition = "start" | "end";
|
|
4
|
+
export type RootProps = BaseAccordion.Root.Props & {
|
|
5
|
+
/**
|
|
6
|
+
* Surface treatment of each item.
|
|
7
|
+
* - `"outline"` — transparent cards with a light `border.subtle` border
|
|
8
|
+
* (default). Hovering outlines the header.
|
|
9
|
+
* - `"solid"` — borderless cards filled light grey (`bg.subtle`). Hovering
|
|
10
|
+
* darkens the header instead of outlining it.
|
|
11
|
+
* - `"divided"` — a flush list with no cards, items separated by thin lines.
|
|
12
|
+
* Suits long FAQ lists.
|
|
13
|
+
* - `"ghost"` — no border or fill; only the hover tint shows. Use it on
|
|
14
|
+
* tinted backgrounds.
|
|
15
|
+
* @default "outline"
|
|
16
|
+
*/
|
|
17
|
+
variant?: Variant;
|
|
18
|
+
/**
|
|
19
|
+
* Which side of the title the expand arrow sits on. Use `"start"` when the
|
|
20
|
+
* header also holds a control (such as a `Switch`), so the arrow stays next
|
|
21
|
+
* to the title it belongs to.
|
|
22
|
+
* @default "end"
|
|
23
|
+
*/
|
|
24
|
+
iconPosition?: IconPosition;
|
|
5
25
|
};
|
|
6
26
|
/**
|
|
7
|
-
* A
|
|
8
|
-
*
|
|
9
|
-
*
|
|
27
|
+
* A set of collapsible panels built on Base UI's accessible `Accordion`
|
|
28
|
+
* primitive, styled with Lea's design tokens.
|
|
29
|
+
*
|
|
30
|
+
* Heading semantics, `aria-expanded`, `aria-controls` and the unique ids
|
|
31
|
+
* linking each trigger to its panel are generated by Base UI, so the
|
|
32
|
+
* relationships can never dangle and consumers never supply ids by hand.
|
|
33
|
+
* Only one panel opens at a time unless you pass `multiple`.
|
|
34
|
+
*
|
|
35
|
+
* ```tsx
|
|
36
|
+
* <Accordion.Root defaultValue={["shipping"]}>
|
|
37
|
+
* <Accordion.Item value="shipping">
|
|
38
|
+
* <Accordion.Header>
|
|
39
|
+
* <Accordion.Trigger>How long does shipping take?</Accordion.Trigger>
|
|
40
|
+
* </Accordion.Header>
|
|
41
|
+
* <Accordion.Panel>Three to five business days.</Accordion.Panel>
|
|
42
|
+
* </Accordion.Item>
|
|
43
|
+
* </Accordion.Root>
|
|
44
|
+
* ```
|
|
45
|
+
*
|
|
46
|
+
* For the common title-and-content case, reach for `SimpleAccordion` instead.
|
|
10
47
|
*/
|
|
11
|
-
export declare
|
|
12
|
-
export
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
48
|
+
export declare function Root({ variant, iconPosition, className, ...rest }: RootProps): import("react").JSX.Element;
|
|
49
|
+
export type ItemProps = BaseAccordion.Item.Props;
|
|
50
|
+
/**
|
|
51
|
+
* One panel of the accordion, pairing a `Header` with a `Panel`. Give it a
|
|
52
|
+
* `value` to open it initially or to control it programmatically.
|
|
53
|
+
*/
|
|
54
|
+
export declare function Item({ className, ...rest }: ItemProps): import("react").JSX.Element;
|
|
55
|
+
export type HeaderProps = BaseAccordion.Header.Props;
|
|
56
|
+
/**
|
|
57
|
+
* The heading that labels the panel. Renders an `<h3>` and must wrap a
|
|
58
|
+
* `Trigger` so the accordion stays navigable by heading.
|
|
59
|
+
*
|
|
60
|
+
* Anything rendered after the `Trigger` sits on the same row, which is where a
|
|
61
|
+
* per-item control belongs. It must go beside the trigger rather than inside
|
|
62
|
+
* it, because the trigger is a `<button>` and nesting controls is invalid.
|
|
63
|
+
*
|
|
64
|
+
* ```tsx
|
|
65
|
+
* <Accordion.Header>
|
|
66
|
+
* <Accordion.Trigger>Analyse</Accordion.Trigger>
|
|
67
|
+
* <Switch aria-label="Analyse-informasjonskapsler" />
|
|
68
|
+
* </Accordion.Header>
|
|
69
|
+
* ```
|
|
70
|
+
*/
|
|
71
|
+
export declare function Header({ className, ...rest }: HeaderProps): import("react").JSX.Element;
|
|
72
|
+
export type TriggerProps = BaseAccordion.Trigger.Props;
|
|
73
|
+
/**
|
|
74
|
+
* The button that opens and closes its panel. Pass the question or label as
|
|
75
|
+
* children; the chevron is rendered internally and hidden from assistive
|
|
76
|
+
* technology.
|
|
77
|
+
*/
|
|
78
|
+
export declare function Trigger({ children, className, ...rest }: TriggerProps): import("react").JSX.Element;
|
|
79
|
+
export type PanelProps = BaseAccordion.Panel.Props;
|
|
80
|
+
/**
|
|
81
|
+
* The collapsible content of an item. Padding sits on an inner element so the
|
|
82
|
+
* open/close height animation stays smooth.
|
|
83
|
+
*/
|
|
84
|
+
export declare function Panel({ children, className, ...rest }: PanelProps): import("react").JSX.Element;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export * from './accordion';
|
|
1
|
+
export * as Accordion from './accordion';
|
|
2
|
+
export * from './simple-accordion';
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import * as Accordion from "./accordion";
|
|
3
|
+
export type SimpleAccordionItem = {
|
|
4
|
+
/** The heading shown on the row. */
|
|
5
|
+
title: ReactNode;
|
|
6
|
+
/** The collapsible body revealed when the row is opened. */
|
|
7
|
+
content: ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* A control rendered on the row beside the title, typically a `Switch`.
|
|
10
|
+
* It sits outside the trigger, so operating it doesn't open the panel.
|
|
11
|
+
*/
|
|
12
|
+
action?: ReactNode;
|
|
13
|
+
/**
|
|
14
|
+
* Identifies the item for `defaultValue` / `value`. Defaults to the item's
|
|
15
|
+
* position, so only set it when you open or control items programmatically.
|
|
16
|
+
* Only meaningful inside `items`.
|
|
17
|
+
*/
|
|
18
|
+
value?: string;
|
|
19
|
+
/** Whether this item can be opened. Only meaningful inside `items`. */
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* The single-item form. `value` and `disabled` are left to `Accordion.Root`
|
|
24
|
+
* (they'd otherwise collide with the root's own props of the same name); the
|
|
25
|
+
* lone item always has the value `"0"`, so `defaultValue={["0"]}` opens it.
|
|
26
|
+
*/
|
|
27
|
+
type SingleItemProps = Omit<SimpleAccordionItem, "value" | "disabled"> & {
|
|
28
|
+
items?: never;
|
|
29
|
+
};
|
|
30
|
+
type MultipleItemsProps = {
|
|
31
|
+
items: SimpleAccordionItem[];
|
|
32
|
+
title?: never;
|
|
33
|
+
content?: never;
|
|
34
|
+
action?: never;
|
|
35
|
+
};
|
|
36
|
+
export type SimpleAccordionProps = Omit<Accordion.RootProps, "children" | "title" | "content"> & (SingleItemProps | MultipleItemsProps);
|
|
37
|
+
/**
|
|
38
|
+
* The props-driven form of `Accordion` for the common case: a title and some
|
|
39
|
+
* content, with an optional control on the row.
|
|
40
|
+
*
|
|
41
|
+
* Pass `title` and `content` for a single collapsible panel, or `items` for
|
|
42
|
+
* several. Everything `Accordion.Root` accepts — `variant`, `iconPosition`,
|
|
43
|
+
* `multiple`, `defaultValue` — is forwarded. Compose `Accordion.Root` by hand
|
|
44
|
+
* when you need markup the `title` / `content` pair can't express.
|
|
45
|
+
*
|
|
46
|
+
* ```tsx
|
|
47
|
+
* <SimpleAccordion
|
|
48
|
+
* iconPosition="start"
|
|
49
|
+
* title="Nødvendige"
|
|
50
|
+
* content={<Text>Alltid påskrudd.</Text>}
|
|
51
|
+
* action={<Switch aria-label="Nødvendige" checked disabled />}
|
|
52
|
+
* />
|
|
53
|
+
*
|
|
54
|
+
* <SimpleAccordion
|
|
55
|
+
* multiple
|
|
56
|
+
* items={[
|
|
57
|
+
* { title: "Levering", content: "Tre til fem virkedager." },
|
|
58
|
+
* { title: "Retur", content: "30 dagers angrerett." },
|
|
59
|
+
* ]}
|
|
60
|
+
* />
|
|
61
|
+
* ```
|
|
62
|
+
*/
|
|
63
|
+
export declare function SimpleAccordion({ items, title, content, action, ...rest }: SimpleAccordionProps): import("react").JSX.Element;
|
|
64
|
+
export {};
|
package/dist/index.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--lea-spacing:.5rem;--lea-palette-bg-base:#fff;--lea-palette-bg-subtle:#f7f7f6;--lea-palette-bg-muted:#f0e9e5;--lea-palette-bg-contrast:#0f1010;--lea-palette-bg-accent:#e2d8e4;--lea-palette-text-base:#0f1010;--lea-palette-text-subtle:#757575;--lea-palette-text-muted:#a2a2a2;--lea-palette-text-accent:#70427b;--lea-palette-text-contrast:#fff;--lea-palette-border-base:#dbdbdb;--lea-palette-border-subtle:#ebebeb;--lea-palette-border-strong:#0f1010;--lea-palette-border-accent:#70427b;--lea-palette-border-contrast:#fff;--lea-palette-primary-main:#70427b;--lea-palette-primary-dark:#5a3463;--lea-palette-primary-light:#e2d8e4;--lea-palette-primary-contrastText:#fff;--lea-palette-purple-base:#70427b;--lea-palette-purple-hover:#5a3463;--lea-palette-purple-subtle:#e2d8e4;--lea-palette-purple-contrast:#fff;--lea-palette-teal-base:#08c2a7;--lea-palette-teal-hover:#46d1bd;--lea-palette-teal-subtle:#daf6f1;--lea-palette-teal-contrast:#fff;--lea-palette-secondary-main:#08c2a7;--lea-palette-secondary-dark:#46d1bd;--lea-palette-secondary-light:#daf6f1;--lea-palette-secondary-contrastText:#fff;--lea-palette-status-error-base:#d32f2f;--lea-palette-status-error-subtle:#fcdcdc;--lea-palette-status-warning-base:#fe653e;--lea-palette-status-warning-subtle:#ffdfd7;--lea-palette-status-info-base:#057ef2;--lea-palette-status-info-subtle:#cbe5fd;--lea-palette-status-success-base:#46d1bd;--lea-palette-status-success-subtle:#daf6f1;--lea-color-purple-50:#faf7fb;--lea-color-purple-100:#e2d8e4;--lea-color-purple-200:#c5b1ca;--lea-color-purple-300:#c29ac2;--lea-color-purple-400:#9e6da8;--lea-color-purple-500:#855888;--lea-color-purple-600:#70427b;--lea-color-purple-700:#5a3463;--lea-color-purple-800:#422349;--lea-color-purple-900:#2e1834;--lea-color-purple-950:#1a0e1e;--lea-color-teal-50:#f0fcfa;--lea-color-teal-100:#daf6f1;--lea-color-teal-200:#cef3ed;--lea-color-teal-300:#08c2a7;--lea-color-teal-400:#46d1bd;--lea-color-teal-500:#06a892;--lea-color-teal-600:#058f7d;--lea-color-teal-700:#047568;--lea-color-teal-800:#035c53;--lea-color-teal-900:#02433e;--lea-color-teal-950:#012a28;--lea-color-blue-50:#eff6ff;--lea-color-blue-100:#cbe5fd;--lea-color-blue-200:#93cbfc;--lea-color-blue-300:#4da8f7;--lea-color-blue-400:#057ef2;--lea-color-blue-500:#0468c9;--lea-color-blue-600:#0354a3;--lea-color-blue-700:#02417d;--lea-color-blue-800:#012e57;--lea-color-blue-900:#011b31;--lea-color-blue-950:#000e19;--lea-color-orange-50:#fff5f2;--lea-color-orange-100:#ffdfd7;--lea-color-orange-200:#ffc4b5;--lea-color-orange-300:#ff9e87;--lea-color-orange-400:#fe653e;--lea-color-orange-500:#e54e28;--lea-color-orange-600:#c43e1c;--lea-color-orange-700:#a33218;--lea-color-orange-800:#822814;--lea-color-orange-900:#611e0f;--lea-color-orange-950:#401408;--lea-color-red-50:#fef2f2;--lea-color-red-100:#fcdcdc;--lea-color-red-200:#f9bbbb;--lea-color-red-300:#f28888;--lea-color-red-400:#e85555;--lea-color-red-500:#d32f2f;--lea-color-red-600:#ad2121;--lea-color-red-700:#8a1919;--lea-color-red-800:#6f1313;--lea-color-red-900:#4d0e0e;--lea-color-red-950:#2e0808;--lea-color-beige-50:#faf7f5;--lea-color-beige-100:#f0e9e5;--lea-color-beige-200:#e0d4cd;--lea-color-beige-300:#c9b8ad;--lea-color-beige-400:#b09a8c;--lea-color-beige-500:#977c6b;--lea-color-beige-600:#7e6556;--lea-color-beige-700:#654f42;--lea-color-beige-800:#4c3a32;--lea-color-beige-900:#332722;--lea-color-beige-950:#1a1411;--lea-color-neutral-50:#f7f7f6;--lea-color-neutral-100:#ebebeb;--lea-color-neutral-200:#dbdbdb;--lea-color-neutral-300:#c4c4c4;--lea-color-neutral-400:#a2a2a2;--lea-color-neutral-500:#757575;--lea-color-neutral-600:#5e5e5e;--lea-color-neutral-700:#454545;--lea-color-neutral-800:#2e2e2e;--lea-color-neutral-900:#1a1a1a;--lea-color-neutral-950:#0f1010;--lea-color-white:#fff;--lea-color-black:#0f1010;--lea-radius-sm:4px;--lea-radius-md:5px;--lea-radius-lg:6px;--lea-radius-xl:8px;--lea-radius-2xl:10px;--lea-radius-3xl:12px;--lea-radius-4xl:16px;--lea-radius-5xl:32px;--lea-radius-huge:64px;--lea-radius-full:100px;--lea-shadow-xs:0 1px 2px 0 #0000000d;--lea-shadow-sm:0px 1px 3px 0px #0000001a, 0px 1px 2px -1px #0000001a;--lea-shadow-md:0px 4px 6px -1px #0000001a, 0px 2px 4px -2px #0000001a;--lea-shadow-lg:0px 10px 15px -3px #0000001a, 0px 4px 6px -4px #0000001a;--lea-shadow-xl:0px 20px 25px -5px #0000001a, 0px 8px 10px -6px #0000001a;--lea-shadow-2xl:0px 25px 50px -12px #00000040;--lea-shadow-inner:0px 2px 4px 0px #0000000d inset;--lea-font-size-xs:.75rem;--lea-font-size-sm:.875rem;--lea-font-size-md:1rem;--lea-font-size-lg:1.25rem;--lea-font-size-xl:1.5rem;--lea-font-size-2xl:2rem;--lea-font-size-3xl:2.5rem;--lea-font-size-4xl:3rem;--lea-font-size-5xl:3.5rem;--lea-font-size-6xl:4rem;--lea-font-weight-thin:200;--lea-font-weight-light:300;--lea-font-weight-regular:400;--lea-font-weight-medium:500;--lea-font-weight-semibold:600;--lea-font-weight-bold:700;--lea-font-weight-black:800;--lea-duration-fast:.15s;--lea-duration-normal:.2s;--lea-duration-emphasis:.3s;--lea-easing-standard:ease-in-out;--lea-easing-spring:cubic-bezier(.34, 1.56, .64, 1)}._Button_rnbia_9{--button-solid:var(--lea-palette-purple-base);--button-solid-hover:var(--lea-palette-purple-hover);--button-on-solid:var(--lea-palette-purple-contrast);--button-tint:var(--lea-palette-purple-subtle);--button-fg:var(--lea-palette-purple-base);--button-border:var(--lea-palette-purple-base);--button-height:2.75rem;--button-icon-size:1.25rem;--button-padding-inline:calc(var(--lea-spacing) * 2.5);box-sizing:border-box;min-height:var(--button-height);justify-content:center;align-items:center;gap:var(--lea-spacing);padding-block:calc(var(--lea-spacing) * .5);padding-inline:var(--button-padding-inline);border-radius:var(--lea-radius-3xl);color:var(--button-fg);font-family:inherit;font-size:var(--lea-font-size-md);font-weight:var(--lea-font-weight-medium);text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--lea-duration-normal) var(--lea-easing-standard), border-color var(--lea-duration-normal) var(--lea-easing-standard), color var(--lea-duration-normal) var(--lea-easing-standard), opacity var(--lea-duration-normal) var(--lea-easing-standard);background-color:#0000;border:1px solid #0000;flex-shrink:0;margin:0;line-height:1.25;text-decoration:none;display:inline-flex}._Button_rnbia_9 svg{width:var(--button-icon-size);height:var(--button-icon-size);flex-shrink:0}._Button_rnbia_9:focus-visible{outline:2px solid var(--lea-palette-text-base);outline-offset:.125rem}._Button_rnbia_9[data-color=neutral]{--button-solid:var(--lea-palette-bg-contrast);--button-solid-hover:var(--lea-color-neutral-800);--button-on-solid:var(--lea-palette-text-contrast);--button-tint:var(--lea-palette-bg-subtle);--button-fg:var(--lea-palette-text-base);--button-border:var(--lea-palette-border-strong)}._Button_rnbia_9[data-color=danger]{--button-solid:var(--lea-color-red-600);--button-solid-hover:var(--lea-color-red-500);--button-on-solid:var(--lea-palette-text-contrast);--button-tint:var(--lea-palette-status-error-subtle);--button-fg:var(--lea-color-red-600);--button-border:var(--lea-color-red-600)}._Button_rnbia_9[data-variant=primary]{background-color:var(--button-solid);color:var(--button-on-solid)}._Button_rnbia_9[data-variant=secondary]{border-color:var(--button-border)}@media (hover:hover){._Button_rnbia_9[data-variant=primary]:not([data-disabled]):hover{background-color:var(--button-solid-hover)}._Button_rnbia_9[data-variant=secondary]:not([data-disabled]):hover,._Button_rnbia_9[data-variant=tertiary]:not([data-disabled]):hover{background-color:var(--button-tint)}}._Button_rnbia_9[data-size=sm]{--button-height:2.25rem;--button-icon-size:1rem;--button-padding-inline:calc(var(--lea-spacing) * 2)}._Button_rnbia_9[data-size=lg]{--button-height:3.25rem;--button-icon-size:1.5rem;--button-padding-inline:calc(var(--lea-spacing) * 2.5)}._Button_rnbia_9[data-start-icon]{padding-inline-start:calc(var(--button-padding-inline) - var(--lea-spacing))}._Button_rnbia_9[data-end-icon]{padding-inline-end:calc(var(--button-padding-inline) - var(--lea-spacing))}._Button_rnbia_9._IconButton_rnbia_132{width:var(--button-height);height:var(--button-height);padding:0}._Button_rnbia_9[data-disabled]:not([data-loading]){color:var(--lea-color-neutral-400);cursor:not-allowed}._Button_rnbia_9[data-variant=primary][data-disabled]:not([data-loading]){background-color:var(--lea-color-neutral-200);color:var(--lea-color-neutral-600)}._Button_rnbia_9[data-variant=secondary][data-disabled]:not([data-loading]){border-color:var(--lea-palette-border-base)}._Button_rnbia_9[data-loading]{cursor:progress;opacity:.7}._Spinner_rnbia_159{box-sizing:border-box;width:var(--button-icon-size);height:var(--button-icon-size);border:2px solid;border-radius:var(--lea-radius-full);border-inline-end-color:#0000;flex-shrink:0;animation:.8s linear infinite _button-spin_rnbia_1;display:inline-block}@keyframes _button-spin_rnbia_1{to{rotate:360deg}}._SrOnly_rnbia_177{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){._Button_rnbia_9{transition-duration:.01ms}._Spinner_rnbia_159{animation:none}}._Backdrop_novdb_8{z-index:1300;opacity:1;transition:opacity var(--lea-duration-normal) var(--lea-easing-standard);background-color:#0f101080;position:fixed;inset:0}._Backdrop_novdb_8[data-starting-style],._Backdrop_novdb_8[data-ending-style]{opacity:0}._Viewport_novdb_22{z-index:1300;padding:calc(var(--lea-spacing) * 2);pointer-events:none;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}._Popup_novdb_38{border-radius:var(--lea-radius-4xl);background-color:var(--lea-palette-bg-base);width:100%;max-height:100%;box-shadow:var(--lea-shadow-xl);color:var(--lea-palette-text-base);opacity:1;pointer-events:auto;transition:opacity var(--lea-duration-normal) var(--lea-easing-standard), transform var(--lea-duration-normal) var(--lea-easing-standard);flex-direction:column;display:flex;overflow:hidden;transform:scale(1)}._Popup_novdb_38[data-starting-style],._Popup_novdb_38[data-ending-style]{opacity:0;transform:scale(.95)}._Popup_novdb_38[data-size=xs]{max-width:27.75rem}._Popup_novdb_38[data-size=sm]{max-width:37.5rem}._Popup_novdb_38[data-size=md]{max-width:56.25rem}._Popup_novdb_38[data-size=lg]{max-width:75rem}._Header_novdb_78{justify-content:space-between;align-items:flex-start;gap:var(--lea-spacing);padding:calc(var(--lea-spacing) * 3) calc(var(--lea-spacing) * 3) calc(var(--lea-spacing) * 2);flex-shrink:0;display:flex}._Title_novdb_88{color:var(--lea-palette-text-base);font-size:var(--lea-font-size-lg);font-weight:var(--lea-font-weight-semibold);margin:0;line-height:1.4}._Description_novdb_96{margin:0 0 calc(var(--lea-spacing) * 2);color:var(--lea-palette-text-subtle)}._Description_novdb_96[data-last]{margin-bottom:0}._Content_novdb_110{padding:0 calc(var(--lea-spacing) * 3) calc(var(--lea-spacing) * 3);color:var(--lea-palette-text-base);flex:1;overflow-y:auto}._CloseButton_novdb_117{border:2px solid var(--lea-palette-border-base);border-radius:var(--lea-radius-full);width:2.5rem;height:2.5rem;color:var(--lea-palette-text-base);cursor:pointer;transition:border-color var(--lea-duration-emphasis) var(--lea-easing-spring), background-color var(--lea-duration-emphasis) var(--lea-easing-spring), color var(--lea-duration-emphasis) var(--lea-easing-spring);background-color:#0000;flex-shrink:0;justify-content:center;align-items:center;margin-inline-end:calc(var(--lea-spacing) * -.5);padding:0;display:inline-flex}@media (hover:hover){._CloseButton_novdb_117:hover{border-color:var(--lea-palette-purple-base);background-color:var(--lea-palette-purple-base);color:var(--lea-palette-purple-contrast)}}._CloseButton_novdb_117:focus-visible{outline:2px solid var(--lea-palette-text-base);outline-offset:.125rem}@media (width<=599.95px){._Viewport_novdb_22:has(._Popup_novdb_38[data-full-screen-on-mobile]){padding:0}._Popup_novdb_38[data-full-screen-on-mobile]{border-radius:0;width:100vw;max-width:none;height:100dvh;max-height:none}._Popup_novdb_38[data-full-screen-on-mobile] ._Content_novdb_110{padding-bottom:calc(var(--lea-spacing) * 3 + env(safe-area-inset-bottom))}}@media (prefers-reduced-motion:reduce){._Backdrop_novdb_8,._Popup_novdb_38,._CloseButton_novdb_117{transition-duration:.01ms}}._Backdrop_plujs_12{z-index:1300;opacity:calc(1 - var(--drawer-swipe-progress,0));transition:opacity var(--lea-duration-normal) var(--lea-easing-standard);background-color:#0f101080;position:fixed;inset:0}._Backdrop_plujs_12[data-starting-style],._Backdrop_plujs_12[data-ending-style]{opacity:0}._Viewport_plujs_27{z-index:1300;pointer-events:none;position:fixed;inset:0}._Popup_plujs_35{background-color:var(--lea-palette-bg-base);box-shadow:var(--lea-shadow-xl);color:var(--lea-palette-text-base);pointer-events:auto;transition:transform var(--lea-duration-normal) var(--lea-easing-standard);flex-direction:column;display:flex;position:absolute}._Popup_plujs_35[data-swipe-direction=left],._Popup_plujs_35[data-swipe-direction=right]{width:min(var(--drawer-size,22.5rem), 100vw);height:100%;transform:translateX(var(--drawer-swipe-movement-x,0px));top:0}._Popup_plujs_35[data-swipe-direction=left]{left:0}._Popup_plujs_35[data-swipe-direction=right]{right:0}._Popup_plujs_35[data-swipe-direction=up],._Popup_plujs_35[data-swipe-direction=down]{width:100%;max-height:var(--drawer-size,90dvh);transform:translateY(calc(var(--drawer-snap-point-offset,0px) + var(--drawer-swipe-movement-y,0px)));left:0}._Popup_plujs_35[data-swipe-direction=up]{border-radius:0 0 var(--drawer-radius,var(--lea-radius-4xl)) var(--drawer-radius,var(--lea-radius-4xl));top:0}._Popup_plujs_35[data-swipe-direction=down]{border-radius:var(--drawer-radius,var(--lea-radius-4xl)) var(--drawer-radius,var(--lea-radius-4xl)) 0 0;padding-bottom:env(safe-area-inset-bottom);bottom:0}._Popup_plujs_35[data-starting-style][data-swipe-direction=left],._Popup_plujs_35[data-ending-style][data-swipe-direction=left]{transform:translate(-100%)}._Popup_plujs_35[data-starting-style][data-swipe-direction=right],._Popup_plujs_35[data-ending-style][data-swipe-direction=right]{transform:translate(100%)}._Popup_plujs_35[data-starting-style][data-swipe-direction=up],._Popup_plujs_35[data-ending-style][data-swipe-direction=up]{transform:translateY(-100%)}._Popup_plujs_35[data-starting-style][data-swipe-direction=down],._Popup_plujs_35[data-ending-style][data-swipe-direction=down]{transform:translateY(100%)}._Popup_plujs_35[data-ending-style],._Backdrop_plujs_12[data-ending-style]{transition-duration:calc(var(--drawer-swipe-strength,1) * var(--lea-duration-normal))}._Popup_plujs_35[data-swiping],._Backdrop_plujs_12[data-swiping]{transition-duration:0s}._Handle_plujs_120{width:calc(var(--lea-spacing) * 5);height:calc(var(--lea-spacing) * .5);border-radius:var(--lea-radius-sm);margin:calc(var(--lea-spacing) * 1.5) auto calc(var(--lea-spacing) * .5);background-color:var(--lea-palette-border-base);flex-shrink:0}._Popup_plujs_35[data-swipe-direction=up] ._Handle_plujs_120{margin:calc(var(--lea-spacing) * .5) auto calc(var(--lea-spacing) * 1.5)}._Header_plujs_134{justify-content:space-between;align-items:flex-start;gap:var(--lea-spacing);padding:calc(var(--lea-spacing) * 3) calc(var(--lea-spacing) * 3) calc(var(--lea-spacing) * 2);flex-shrink:0;display:flex}._Title_plujs_144{color:var(--lea-palette-text-base);font-size:var(--lea-font-size-lg);font-weight:var(--lea-font-weight-semibold);margin:0;line-height:1.4}._Description_plujs_152{margin:0 0 calc(var(--lea-spacing) * 2);color:var(--lea-palette-text-subtle)}._Description_plujs_152[data-last]{margin-bottom:0}._Content_plujs_166{padding:0 calc(var(--lea-spacing) * 3) calc(var(--lea-spacing) * 3);color:var(--lea-palette-text-base);flex:1;overflow-y:auto}._CloseButton_plujs_173{border:2px solid var(--lea-palette-border-base);border-radius:var(--lea-radius-full);width:2.5rem;height:2.5rem;color:var(--lea-palette-text-base);cursor:pointer;transition:border-color var(--lea-duration-emphasis) var(--lea-easing-spring), background-color var(--lea-duration-emphasis) var(--lea-easing-spring), color var(--lea-duration-emphasis) var(--lea-easing-spring);background-color:#0000;flex-shrink:0;justify-content:center;align-items:center;margin-inline-end:calc(var(--lea-spacing) * -.5);padding:0;display:inline-flex}@media (hover:hover){._CloseButton_plujs_173:hover{border-color:var(--lea-palette-purple-base);background-color:var(--lea-palette-purple-base);color:var(--lea-palette-purple-contrast)}}._CloseButton_plujs_173:focus-visible{outline:2px solid var(--lea-palette-text-base);outline-offset:.125rem}@media (prefers-reduced-motion:reduce){._Backdrop_plujs_12,._Popup_plujs_35,._CloseButton_plujs_173{transition-duration:.01ms}}._Popup_1yvkz_7{--drawer-radius:1.5rem}._Switch_d3xdl_7{border-radius:var(--lea-radius-full);background-color:var(--lea-color-neutral-200);cursor:pointer;width:2.5rem;height:1.5rem;transition:background-color var(--lea-duration-normal) var(--lea-easing-standard);border:none;flex-shrink:0;align-items:center;padding:.125rem;display:inline-flex}._Switch_d3xdl_7[data-checked]{background-color:var(--lea-palette-purple-base)}._Switch_d3xdl_7:focus-visible{outline:2px solid var(--lea-palette-text-base);outline-offset:.125rem}._Switch_d3xdl_7[data-disabled]{cursor:not-allowed;opacity:.5}._Thumb_d3xdl_36{border-radius:var(--lea-radius-full);background-color:var(--lea-palette-bg-base);width:1.25rem;height:1.25rem;transition:translate var(--lea-duration-normal) var(--lea-easing-standard);display:block}._Thumb_d3xdl_36[data-checked]{translate:1rem}@media (prefers-reduced-motion:reduce){._Switch_d3xdl_7,._Thumb_d3xdl_36{transition-duration:.01ms}}._Root_168xx_13{--accordion-gap:var(--lea-spacing);--accordion-item-bg:transparent;--accordion-item-border:var(--lea-palette-border-subtle);--accordion-item-radius:var(--lea-radius-4xl);--accordion-header-radius:var(--lea-radius-4xl);--accordion-hover-border:var(--lea-palette-border-strong);--accordion-hover-bg:transparent;--accordion-active-bg:var(--lea-color-purple-50);gap:var(--accordion-gap);flex-direction:column;width:100%;display:flex}._Root_168xx_13[data-variant=solid]{--accordion-item-bg:var(--lea-palette-bg-subtle);--accordion-item-border:transparent;--accordion-hover-border:transparent;--accordion-hover-bg:var(--lea-color-neutral-100);--accordion-active-bg:var(--lea-color-neutral-200)}._Root_168xx_13[data-variant=divided]{--accordion-gap:0;--accordion-item-border:transparent;--accordion-item-radius:0;--accordion-header-radius:var(--lea-radius-xl);--accordion-hover-border:transparent;--accordion-hover-bg:var(--lea-palette-bg-subtle);--accordion-active-bg:var(--lea-color-neutral-100)}._Root_168xx_13[data-variant=ghost]{--accordion-item-border:transparent;--accordion-header-radius:var(--lea-radius-xl);--accordion-hover-border:transparent;--accordion-hover-bg:var(--lea-palette-bg-subtle);--accordion-active-bg:var(--lea-color-neutral-100)}._Item_168xx_10{border:1px solid var(--accordion-item-border);border-radius:var(--accordion-item-radius);background-color:var(--accordion-item-bg)}._Root_168xx_13[data-variant=divided]>._Item_168xx_10:not(:last-child){border-block-end-color:var(--lea-palette-border-subtle)}._Header_168xx_10{align-items:center;gap:calc(var(--lea-spacing) * 2);padding:var(--lea-spacing) calc(var(--lea-spacing) * 2);border-radius:var(--accordion-header-radius);transition:border-color var(--lea-duration-emphasis) var(--lea-easing-standard), background-color var(--lea-duration-emphasis) var(--lea-easing-standard);border:1px solid #0000;margin:0;display:flex}@media (hover:hover){._Header_168xx_10:has(._Trigger_168xx_83:hover:not([data-disabled])){border-color:var(--accordion-hover-border);background-color:var(--accordion-hover-bg)}}._Header_168xx_10:has(._Trigger_168xx_83:active:not([data-disabled])){background-color:var(--accordion-active-bg)}._Trigger_168xx_83{justify-content:space-between;align-items:center;gap:var(--lea-spacing);min-width:0;color:var(--lea-palette-text-base);cursor:pointer;font-family:inherit;font-size:var(--lea-font-size-md);font-weight:var(--lea-font-weight-medium);text-align:left;background-color:#0000;border:none;flex:1;margin:0;padding:0;line-height:1.5;display:flex}._Trigger_168xx_83:focus-visible{outline:2px solid var(--lea-palette-text-base);outline-offset:.125rem}._Trigger_168xx_83[data-disabled]{color:var(--lea-palette-text-muted);cursor:not-allowed}._Label_168xx_123{min-width:0}._Icon_168xx_127{transition:transform var(--lea-duration-emphasis) var(--lea-easing-standard);flex-shrink:0}._Trigger_168xx_83[data-panel-open] ._Icon_168xx_127{transform:rotate(180deg)}._Root_168xx_13[data-icon-position=start] ._Trigger_168xx_83{justify-content:flex-start}._Root_168xx_13[data-icon-position=start] ._Icon_168xx_127{order:-1}._Panel_168xx_146{height:var(--accordion-panel-height);transition:height var(--lea-duration-emphasis) var(--lea-easing-standard);overflow:hidden}._Panel_168xx_146[data-starting-style],._Panel_168xx_146[data-ending-style]{height:0}._Content_168xx_157{padding-inline:calc(var(--lea-spacing) * 2);padding-block:var(--lea-spacing);color:var(--lea-palette-text-base);font-size:var(--lea-font-size-md);line-height:1.5}@media (prefers-reduced-motion:reduce){._Header_168xx_10,._Icon_168xx_127,._Panel_168xx_146{transition-duration:.01ms}}
|
package/dist/index.d.ts
CHANGED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
type ClassNameProp<State> = string | ((state: State) => string | undefined) | undefined;
|
|
2
|
+
/**
|
|
3
|
+
* Base UI replaces `className` wholesale, which would drop the module class of
|
|
4
|
+
* a wrapper component. Returning a callback keeps the state argument working
|
|
5
|
+
* for consumers who pass a function.
|
|
6
|
+
*
|
|
7
|
+
* Internal helper — not part of the public API, so it isn't re-exported from
|
|
8
|
+
* `src/utils/index.ts`.
|
|
9
|
+
*/
|
|
10
|
+
export declare const mergeClassName: <State>(base: string, className: ClassNameProp<State>) => (state: State) => string;
|
|
11
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@leabankab/component-library",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "7.1.0",
|
|
4
4
|
"description": "@leabankab/component-library — Lea Bank's React component library built on MUI.",
|
|
5
5
|
"engines": {
|
|
6
6
|
"node": ">=20"
|
|
@@ -16,9 +16,13 @@
|
|
|
16
16
|
"import": "./dist/component-library.es.js",
|
|
17
17
|
"require": "./dist/component-library.umd.js"
|
|
18
18
|
},
|
|
19
|
+
"./styles.css": "./dist/index.css",
|
|
19
20
|
"./package.json": "./package.json",
|
|
20
21
|
"./dist/*": "./dist/*"
|
|
21
22
|
},
|
|
23
|
+
"sideEffects": [
|
|
24
|
+
"**/*.css"
|
|
25
|
+
],
|
|
22
26
|
"files": [
|
|
23
27
|
"dist",
|
|
24
28
|
"README.md",
|
|
@@ -86,6 +90,7 @@
|
|
|
86
90
|
"typescript-eslint": "^8.65.0",
|
|
87
91
|
"vite": "^8.2.0",
|
|
88
92
|
"vite-plugin-dts": "^5.0.3",
|
|
93
|
+
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
89
94
|
"vitest": "^4.1.10"
|
|
90
95
|
},
|
|
91
96
|
"scripts": {
|
|
@@ -98,7 +103,9 @@
|
|
|
98
103
|
"lint": "eslint .",
|
|
99
104
|
"lint:ci": "eslint . --max-warnings=0",
|
|
100
105
|
"typecheck": "tsc --noEmit",
|
|
101
|
-
"
|
|
106
|
+
"tokens:css": "node scripts/generate-tokens-css.mjs",
|
|
107
|
+
"test:node": "vitest run --project node",
|
|
108
|
+
"ci:check": "tsc --noEmit && eslint . --max-warnings=0 && vitest run --project node",
|
|
102
109
|
"changeset": "changeset",
|
|
103
110
|
"changeset:status": "changeset status --since=origin/main",
|
|
104
111
|
"version-packages": "changeset version",
|