@panneau/ui 5.0.0-alpha.4 → 5.0.0-alpha.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/command-palette/CommandPalette.css +299 -0
- package/dist/command-palette/CommandPalette.d.ts +37 -0
- package/dist/command-palette/CommandPalette.d.ts.map +1 -0
- package/dist/command-palette/CommandPalette.js +194 -0
- package/dist/command-palette/CommandPalette.js.map +1 -0
- package/dist/command-palette/CommandPalette.module.js +62 -0
- package/dist/command-palette/CommandPalette.module.js.map +1 -0
- package/dist/command-palette/match.d.ts +39 -0
- package/dist/command-palette/match.d.ts.map +1 -0
- package/dist/command-palette/match.js +44 -0
- package/dist/command-palette/match.js.map +1 -0
- package/dist/command-palette/tokens.d.ts +3 -0
- package/dist/command-palette/tokens.d.ts.map +1 -0
- package/dist/command-palette/tokens.js +23 -0
- package/dist/command-palette/tokens.js.map +1 -0
- package/dist/command-palette/useCommandShortcut.d.ts +12 -0
- package/dist/command-palette/useCommandShortcut.d.ts.map +1 -0
- package/dist/command-palette/useCommandShortcut.js +29 -0
- package/dist/command-palette/useCommandShortcut.js.map +1 -0
- package/dist/date-picker/DatePicker.css +40 -0
- package/dist/date-picker/DatePicker.d.ts +2 -1
- package/dist/date-picker/DatePicker.d.ts.map +1 -1
- package/dist/date-picker/DatePicker.js +54 -8
- package/dist/date-picker/DatePicker.js.map +1 -1
- package/dist/date-picker/DatePicker.module.js +5 -1
- package/dist/date-picker/DatePicker.module.js.map +1 -1
- package/dist/dialog/Dialog.css +36 -2
- package/dist/dialog/Dialog.d.ts +15 -3
- package/dist/dialog/Dialog.d.ts.map +1 -1
- package/dist/dialog/Dialog.js +22 -14
- package/dist/dialog/Dialog.js.map +1 -1
- package/dist/dialog/Dialog.module.js +8 -2
- package/dist/dialog/Dialog.module.js.map +1 -1
- package/dist/dialog/tokens.d.ts +1 -1
- package/dist/dialog/tokens.d.ts.map +1 -1
- package/dist/dialog/tokens.js +2 -0
- package/dist/dialog/tokens.js.map +1 -1
- package/dist/field/Field.css +9 -0
- package/dist/field/Field.module.js.map +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +6 -2
- package/dist/segmented-control/SegmentedControl.css +83 -0
- package/dist/segmented-control/SegmentedControl.d.ts +35 -0
- package/dist/segmented-control/SegmentedControl.d.ts.map +1 -0
- package/dist/segmented-control/SegmentedControl.js +44 -0
- package/dist/segmented-control/SegmentedControl.js.map +1 -0
- package/dist/segmented-control/SegmentedControl.module.js +16 -0
- package/dist/segmented-control/SegmentedControl.module.js.map +1 -0
- package/dist/segmented-control/tokens.d.ts +3 -0
- package/dist/segmented-control/tokens.d.ts.map +1 -0
- package/dist/segmented-control/tokens.js +29 -0
- package/dist/segmented-control/tokens.js.map +1 -0
- package/dist/select/ListBox.css +8 -1
- package/dist/select/ListBox.module.js +2 -2
- package/dist/select/ListBox.module.js.map +1 -1
- package/dist/select/listBoxTokens.d.ts +1 -1
- package/dist/select/listBoxTokens.d.ts.map +1 -1
- package/dist/select/listBoxTokens.js +2 -0
- package/dist/select/listBoxTokens.js.map +1 -1
- package/dist/text-input/TextInput.d.ts.map +1 -1
- package/dist/text-input/TextInput.js +2 -0
- package/dist/text-input/TextInput.js.map +1 -1
- package/dist/theme/components.d.ts +4 -2
- package/dist/theme/components.d.ts.map +1 -1
- package/dist/theme/components.js +4 -0
- package/dist/theme/components.js.map +1 -1
- package/package.json +3 -3
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/** Tokens of the options of `Select`, `ComboBox` and `Menu`. */
|
|
2
|
-
export declare const listBoxTokens: import("..").ComponentTokens<"list-box", "panneau-list-box-padding" | "panneau-list-box-item-padding-y" | "panneau-list-box-item-padding-
|
|
2
|
+
export declare const listBoxTokens: import("..").ComponentTokens<"list-box", "panneau-list-box-padding" | "panneau-list-box-item-radius" | "panneau-list-box-item-padding-y" | "panneau-list-box-item-padding-y-described" | "panneau-list-box-item-padding-x" | "panneau-list-box-item-bg-hover">;
|
|
3
3
|
//# sourceMappingURL=listBoxTokens.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"listBoxTokens.d.ts","sourceRoot":"","sources":["../../src/select/listBoxTokens.ts"],"names":[],"mappings":"AAEA,gEAAgE;AAChE,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"listBoxTokens.d.ts","sourceRoot":"","sources":["../../src/select/listBoxTokens.ts"],"names":[],"mappings":"AAEA,gEAAgE;AAChE,eAAO,MAAM,aAAa,gQAaxB,CAAC"}
|
|
@@ -6,6 +6,8 @@ var listBoxTokens = defineComponentTokens("list-box", {
|
|
|
6
6
|
padding: "var(--panneau-space-1)",
|
|
7
7
|
/** Vertical padding of an option. */
|
|
8
8
|
"item-padding-y": "calc(var(--panneau-row-padding-y) / 2)",
|
|
9
|
+
/** Vertical padding of an option with a description, on two lines. */
|
|
10
|
+
"item-padding-y-described": "var(--panneau-space-2)",
|
|
9
11
|
/** Horizontal padding of an option. */
|
|
10
12
|
"item-padding-x": "var(--panneau-space-2)",
|
|
11
13
|
/** Corner radius of an option. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"listBoxTokens.js","names":[],"sources":["../../src/select/listBoxTokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of the options of `Select`, `ComboBox` and `Menu`. */\nexport const listBoxTokens = defineComponentTokens('list-box', {\n /** Padding around the options. */\n padding: 'var(--panneau-space-1)',\n /** Vertical padding of an option. */\n 'item-padding-y': 'calc(var(--panneau-row-padding-y) / 2)',\n /** Horizontal padding of an option. */\n 'item-padding-x': 'var(--panneau-space-2)',\n /** Corner radius of an option. */\n 'item-radius': 'var(--panneau-radius-sm)',\n /** Background of a focused or hovered option. */\n 'item-bg-hover': 'var(--panneau-color-hover)',\n});\n"],"mappings":";;;AAGA,IAAa,gBAAgB,sBAAsB,YAAY;;CAE3D,SAAS;;CAET,kBAAkB;;CAElB,kBAAkB;;CAElB,eAAe;;CAEf,iBAAiB;AACrB,CAAC"}
|
|
1
|
+
{"version":3,"file":"listBoxTokens.js","names":[],"sources":["../../src/select/listBoxTokens.ts"],"sourcesContent":["import { defineComponentTokens } from '../theme/componentTokens';\n\n/** Tokens of the options of `Select`, `ComboBox` and `Menu`. */\nexport const listBoxTokens = defineComponentTokens('list-box', {\n /** Padding around the options. */\n padding: 'var(--panneau-space-1)',\n /** Vertical padding of an option. */\n 'item-padding-y': 'calc(var(--panneau-row-padding-y) / 2)',\n /** Vertical padding of an option with a description, on two lines. */\n 'item-padding-y-described': 'var(--panneau-space-2)',\n /** Horizontal padding of an option. */\n 'item-padding-x': 'var(--panneau-space-2)',\n /** Corner radius of an option. */\n 'item-radius': 'var(--panneau-radius-sm)',\n /** Background of a focused or hovered option. */\n 'item-bg-hover': 'var(--panneau-color-hover)',\n});\n"],"mappings":";;;AAGA,IAAa,gBAAgB,sBAAsB,YAAY;;CAE3D,SAAS;;CAET,kBAAkB;;CAElB,4BAA4B;;CAE5B,kBAAkB;;CAElB,eAAe;;CAEf,iBAAiB;AACrB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/text-input/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACH,KAAK,cAAc,IAAI,kBAAkB,EAI5C,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACH,KAAK,gBAAgB,EAKxB,MAAM,qBAAqB,CAAC;AAG7B,MAAM,WAAW,cACb,SACI,IAAI,CACA,kBAAkB,EAClB,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CACzE,EACD,gBAAgB;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,QAAQ,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kFAAkF;IAClF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,kDAAkD;IAClD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,uEAAuE;AACvE,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,WAAW,EACX,MAAW,EACX,WAAW,EACX,MAAM,EACN,MAAM,EACN,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACX,EAAE,cAAc,+
|
|
1
|
+
{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../src/text-input/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACH,KAAK,cAAc,IAAI,kBAAkB,EAI5C,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACH,KAAK,gBAAgB,EAKxB,MAAM,qBAAqB,CAAC;AAG7B,MAAM,WAAW,cACb,SACI,IAAI,CACA,kBAAkB,EAClB,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,CACzE,EACD,gBAAgB;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,QAAQ,CAAC;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kFAAkF;IAClF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,kDAAkD;IAClD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,2DAA2D;IAC3D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,uEAAuE;AACvE,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,WAAW,EACX,MAAW,EACX,WAAW,EACX,MAAM,EACN,MAAM,EACN,SAAS,EACT,cAAc,EACd,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACX,EAAE,cAAc,+BAkDhB"}
|
|
@@ -29,6 +29,7 @@ function TextInput({ label, description, errors = [], placeholder, prefix, suffi
|
|
|
29
29
|
children: [
|
|
30
30
|
prefix !== void 0 ? /* @__PURE__ */ jsx("span", {
|
|
31
31
|
className: Field_module_default.adornment,
|
|
32
|
+
"data-text": typeof prefix === "string" || void 0,
|
|
32
33
|
children: prefix
|
|
33
34
|
}) : null,
|
|
34
35
|
/* @__PURE__ */ jsx(Input, {
|
|
@@ -37,6 +38,7 @@ function TextInput({ label, description, errors = [], placeholder, prefix, suffi
|
|
|
37
38
|
}),
|
|
38
39
|
suffix !== void 0 ? /* @__PURE__ */ jsx("span", {
|
|
39
40
|
className: Field_module_default.adornment,
|
|
41
|
+
"data-text": typeof suffix === "string" || void 0,
|
|
40
42
|
children: suffix
|
|
41
43
|
}) : null
|
|
42
44
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput.js","names":["styles"],"sources":["../../src/text-input/TextInput.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n type TextFieldProps as AriaTextFieldProps,\n Group,\n Input,\n TextField,\n} from 'react-aria-components';\n\nimport {\n type FieldChromeProps,\n FieldDescription,\n FieldErrors,\n FieldLabel,\n fieldStyles as styles,\n} from '../field/FieldParts';\nimport { cx } from '../utils/cx';\n\nexport interface TextInputProps\n extends\n Omit<\n AriaTextFieldProps,\n 'className' | 'style' | 'children' | 'isInvalid' | 'validate' | 'type'\n >,\n FieldChromeProps {\n type?: 'text' | 'email' | 'url' | 'tel' | 'password' | 'search';\n placeholder?: string;\n /** Content before the text, inside the control: a unit, a URL prefix, an icon. */\n prefix?: ReactNode;\n /** Content after the text, inside the control. */\n suffix?: ReactNode;\n /** Class name of the control (the box around the text). */\n controlClassName?: string;\n inputClassName?: string;\n}\n\n/** A single-line text input with its label, description and errors. */\nexport function TextInput({\n label,\n description,\n errors = [],\n placeholder,\n prefix,\n suffix,\n className,\n labelClassName,\n descriptionClassName,\n errorsClassName,\n controlClassName,\n inputClassName,\n isRequired,\n isReadOnly,\n ...props\n}: TextInputProps) {\n const invalid = errors.length > 0;\n const adorned = prefix !== undefined || suffix !== undefined;\n return (\n <TextField\n {...props}\n isRequired={isRequired}\n isReadOnly={isReadOnly}\n isInvalid={invalid}\n validationBehavior=\"aria\"\n className={cx('panneau-text-input', styles.field, className)}\n >\n <FieldLabel isRequired={isRequired} className={labelClassName}>\n {label}\n </FieldLabel>\n {adorned ? (\n <Group\n className={cx(styles.control, controlClassName)}\n data-invalid={invalid || undefined}\n data-readonly={isReadOnly || undefined}\n isDisabled={props.isDisabled}\n >\n {prefix !== undefined ? (\n <span
|
|
1
|
+
{"version":3,"file":"TextInput.js","names":["styles"],"sources":["../../src/text-input/TextInput.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n type TextFieldProps as AriaTextFieldProps,\n Group,\n Input,\n TextField,\n} from 'react-aria-components';\n\nimport {\n type FieldChromeProps,\n FieldDescription,\n FieldErrors,\n FieldLabel,\n fieldStyles as styles,\n} from '../field/FieldParts';\nimport { cx } from '../utils/cx';\n\nexport interface TextInputProps\n extends\n Omit<\n AriaTextFieldProps,\n 'className' | 'style' | 'children' | 'isInvalid' | 'validate' | 'type'\n >,\n FieldChromeProps {\n type?: 'text' | 'email' | 'url' | 'tel' | 'password' | 'search';\n placeholder?: string;\n /** Content before the text, inside the control: a unit, a URL prefix, an icon. */\n prefix?: ReactNode;\n /** Content after the text, inside the control. */\n suffix?: ReactNode;\n /** Class name of the control (the box around the text). */\n controlClassName?: string;\n inputClassName?: string;\n}\n\n/** A single-line text input with its label, description and errors. */\nexport function TextInput({\n label,\n description,\n errors = [],\n placeholder,\n prefix,\n suffix,\n className,\n labelClassName,\n descriptionClassName,\n errorsClassName,\n controlClassName,\n inputClassName,\n isRequired,\n isReadOnly,\n ...props\n}: TextInputProps) {\n const invalid = errors.length > 0;\n const adorned = prefix !== undefined || suffix !== undefined;\n return (\n <TextField\n {...props}\n isRequired={isRequired}\n isReadOnly={isReadOnly}\n isInvalid={invalid}\n validationBehavior=\"aria\"\n className={cx('panneau-text-input', styles.field, className)}\n >\n <FieldLabel isRequired={isRequired} className={labelClassName}>\n {label}\n </FieldLabel>\n {adorned ? (\n <Group\n className={cx(styles.control, controlClassName)}\n data-invalid={invalid || undefined}\n data-readonly={isReadOnly || undefined}\n isDisabled={props.isDisabled}\n >\n {prefix !== undefined ? (\n <span\n className={styles.adornment}\n data-text={typeof prefix === 'string' || undefined}\n >\n {prefix}\n </span>\n ) : null}\n <Input placeholder={placeholder} className={cx(styles.bare, inputClassName)} />\n {suffix !== undefined ? (\n <span\n className={styles.adornment}\n data-text={typeof suffix === 'string' || undefined}\n >\n {suffix}\n </span>\n ) : null}\n </Group>\n ) : (\n <Input\n placeholder={placeholder}\n className={cx(styles.control, controlClassName, inputClassName)}\n />\n )}\n <FieldDescription className={descriptionClassName}>{description}</FieldDescription>\n <FieldErrors errors={errors} className={errorsClassName} />\n </TextField>\n );\n}\n"],"mappings":";;;;;;;AAoCA,SAAgB,UAAU,EACtB,OACA,aACA,SAAS,CAAA,GACT,aACA,QACA,QACA,WACA,gBACA,sBACA,iBACA,kBACA,gBACA,YACA,YACA,GAAG,SACY;CACf,MAAM,UAAU,OAAO,SAAS;CAChC,MAAM,UAAU,WAAW,KAAA,KAAa,WAAW,KAAA;CACnD,OACI,qBAAC,WAAD;EACI,GAAI;EACQ;EACA;EACZ,WAAW;EACX,oBAAmB;EACnB,WAAW,GAAG,sBAAsBA,qBAAO,OAAO,SAAS;EAN/D,UAAA;GAQI,oBAAC,YAAD;IAAwB;IAAY,WAAW;IAC1C,UAAA;GACO,CAAA;GACX,UACG,qBAAC,OAAD;IACI,WAAW,GAAGA,qBAAO,SAAS,gBAAgB;IAC9C,gBAAc,WAAW,KAAA;IACzB,iBAAe,cAAc,KAAA;IAC7B,YAAY,MAAM;IAJtB,UAAA;KAMK,WAAW,KAAA,IACR,oBAAC,QAAD;MACI,WAAWA,qBAAO;MAClB,aAAW,OAAO,WAAW,YAAY,KAAA;MAExC,UAAA;KACC,CAAA,IACN;KACJ,oBAAC,OAAD;MAAoB;MAAa,WAAW,GAAGA,qBAAO,MAAM,cAAc;KAAE,CAAA;KAC3E,WAAW,KAAA,IACR,oBAAC,QAAD;MACI,WAAWA,qBAAO;MAClB,aAAW,OAAO,WAAW,YAAY,KAAA;MAExC,UAAA;KACC,CAAA,IACN;IACD;GAEP,CAAA,IAAA,oBAAC,OAAD;IACiB;IACb,WAAW,GAAGA,qBAAO,SAAS,kBAAkB,cAAc;GAAE,CAAA;GAGxE,oBAAC,kBAAD;IAAkB,WAAW;IAAuB,UAAA;GAA8B,CAAA;GAClF,oBAAC,aAAD;IAAqB;IAAQ,WAAW;GAAgB,CAAA;EACjD;;AAEnB"}
|
|
@@ -9,8 +9,9 @@ export declare const componentTokens: Readonly<{
|
|
|
9
9
|
calendar: Readonly<Record<"panneau-calendar-cell-size" | "panneau-calendar-cell-radius" | "panneau-calendar-selected-color" | "panneau-calendar-selected-bg", string>>;
|
|
10
10
|
card: Readonly<Record<"panneau-card-radius" | "panneau-card-gap" | "panneau-card-padding-y" | "panneau-card-padding-x" | "panneau-card-border-width" | "panneau-card-title-font-weight" | "panneau-card-bg" | "panneau-card-border-color" | "panneau-card-shadow" | "panneau-card-header-padding-y" | "panneau-card-title-font-size", string>>;
|
|
11
11
|
checkbox: Readonly<Record<"panneau-checkbox-size" | "panneau-checkbox-radius" | "panneau-checkbox-bg" | "panneau-checkbox-border-color" | "panneau-checkbox-checked-color" | "panneau-checkbox-checked-bg", string>>;
|
|
12
|
+
'command-palette': Readonly<Record<"panneau-command-palette-width" | "panneau-command-palette-radius" | "panneau-command-palette-bg" | "panneau-command-palette-offset-top" | "panneau-command-palette-list-max-height" | "panneau-command-palette-item-radius" | "panneau-command-palette-item-active-bg", string>>;
|
|
12
13
|
container: Readonly<Record<"panneau-container-padding-x" | "panneau-container-width-sm" | "panneau-container-width-md" | "panneau-container-width-lg" | "panneau-container-width-xl", string>>;
|
|
13
|
-
dialog: Readonly<Record<"panneau-dialog-width" | "panneau-dialog-radius" | "panneau-dialog-padding-x" | "panneau-dialog-title-font-weight" | "panneau-dialog-bg" | "panneau-dialog-shadow" | "panneau-dialog-title-font-size" | "panneau-dialog-width-sm" | "panneau-dialog-width-lg" | "panneau-dialog-backdrop", string>>;
|
|
14
|
+
dialog: Readonly<Record<"panneau-dialog-width" | "panneau-dialog-radius" | "panneau-dialog-padding-x" | "panneau-dialog-title-font-weight" | "panneau-dialog-bg" | "panneau-dialog-shadow" | "panneau-dialog-title-font-size" | "panneau-dialog-width-sm" | "panneau-dialog-width-lg" | "panneau-dialog-width-xl" | "panneau-dialog-backdrop", string>>;
|
|
14
15
|
disclosure: Readonly<Record<"panneau-disclosure-gap" | "panneau-disclosure-title-font-weight" | "panneau-disclosure-title-font-size", string>>;
|
|
15
16
|
divider: Readonly<Record<"panneau-divider-color" | "panneau-divider-width", string>>;
|
|
16
17
|
field: Readonly<Record<"panneau-field-gap" | "panneau-field-label-font-size" | "panneau-field-label-font-weight", string>>;
|
|
@@ -18,11 +19,12 @@ export declare const componentTokens: Readonly<{
|
|
|
18
19
|
heading: Readonly<Record<"panneau-heading-color" | "panneau-heading-font-family" | "panneau-heading-display-font-family" | "panneau-heading-1-font-size" | "panneau-heading-1-font-weight" | "panneau-heading-1-line-height" | "panneau-heading-1-letter-spacing" | "panneau-heading-2-font-size" | "panneau-heading-2-font-weight" | "panneau-heading-2-line-height" | "panneau-heading-2-letter-spacing" | "panneau-heading-3-font-size" | "panneau-heading-3-font-weight" | "panneau-heading-3-line-height" | "panneau-heading-3-letter-spacing" | "panneau-heading-4-font-size" | "panneau-heading-4-font-weight" | "panneau-heading-4-line-height" | "panneau-heading-4-letter-spacing" | "panneau-heading-display-1-font-size" | "panneau-heading-display-1-font-weight" | "panneau-heading-display-1-line-height" | "panneau-heading-display-1-letter-spacing" | "panneau-heading-display-2-font-size" | "panneau-heading-display-2-font-weight" | "panneau-heading-display-2-line-height" | "panneau-heading-display-2-letter-spacing", string>>;
|
|
19
20
|
inline: Readonly<Record<"panneau-inline-gap", string>>;
|
|
20
21
|
input: Readonly<Record<"panneau-input-radius" | "panneau-input-padding-x" | "panneau-input-border-width" | "panneau-input-bg" | "panneau-input-border-color" | "panneau-input-border-color-hover", string>>;
|
|
21
|
-
'list-box': Readonly<Record<"panneau-list-box-padding" | "panneau-list-box-item-padding-y" | "panneau-list-box-item-padding-
|
|
22
|
+
'list-box': Readonly<Record<"panneau-list-box-padding" | "panneau-list-box-item-radius" | "panneau-list-box-item-padding-y" | "panneau-list-box-item-padding-y-described" | "panneau-list-box-item-padding-x" | "panneau-list-box-item-bg-hover", string>>;
|
|
22
23
|
'number-input': Readonly<Record<"panneau-number-input-stepper-width", string>>;
|
|
23
24
|
popover: Readonly<Record<"panneau-popover-radius" | "panneau-popover-padding" | "panneau-popover-bg" | "panneau-popover-border-color" | "panneau-popover-shadow", string>>;
|
|
24
25
|
prose: Readonly<Record<"panneau-prose-gap" | "panneau-prose-border-color" | "panneau-prose-line-height" | "panneau-prose-heading-gap" | "panneau-prose-list-indent" | "panneau-prose-link-color" | "panneau-prose-code-font-size" | "panneau-prose-code-color" | "panneau-prose-code-bg" | "panneau-prose-code-radius" | "panneau-prose-quote-border-color" | "panneau-prose-quote-color", string>>;
|
|
25
26
|
radio: Readonly<Record<"panneau-radio-size" | "panneau-radio-bg" | "panneau-radio-border-color" | "panneau-radio-checked-color" | "panneau-radio-checked-border-width", string>>;
|
|
27
|
+
'segmented-control': Readonly<Record<"panneau-segmented-control-radius" | "panneau-segmented-control-padding" | "panneau-segmented-control-bg" | "panneau-segmented-control-border-color" | "panneau-segmented-control-segment-padding-x" | "panneau-segmented-control-segment-font-weight" | "panneau-segmented-control-segment-color" | "panneau-segmented-control-segment-color-selected" | "panneau-segmented-control-segment-bg-selected" | "panneau-segmented-control-segment-shadow-selected", string>>;
|
|
26
28
|
spinner: Readonly<Record<"panneau-spinner-border-width", string>>;
|
|
27
29
|
stack: Readonly<Record<"panneau-stack-gap", string>>;
|
|
28
30
|
switch: Readonly<Record<"panneau-switch-height" | "panneau-switch-width" | "panneau-switch-radius" | "panneau-switch-checked-bg" | "panneau-switch-track-bg" | "panneau-switch-thumb-size" | "panneau-switch-thumb-bg" | "panneau-switch-checked-thumb-bg", string>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/theme/components.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/theme/components.ts"],"names":[],"mappings":"AA8BA;;;GAGG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8B1B,CAAC;AAEH,gFAAgF;AAChF,MAAM,MAAM,kBAAkB,GAAG;KAC5B,SAAS,IAAI,MAAM,OAAO,eAAe,GAAG,MAAM,CAAC,OAAO,eAAe,CAAC,CAAC,SAAS,CAAC;CACzF,CAAC,MAAM,OAAO,eAAe,CAAC,CAAC"}
|
package/dist/theme/components.js
CHANGED
|
@@ -3,6 +3,7 @@ import { badgeTokens } from "../badge/tokens.js";
|
|
|
3
3
|
import { buttonTokens } from "../button/tokens.js";
|
|
4
4
|
import { cardTokens } from "../card/tokens.js";
|
|
5
5
|
import { checkboxTokens } from "../checkbox/tokens.js";
|
|
6
|
+
import { commandPaletteTokens } from "../command-palette/tokens.js";
|
|
6
7
|
import { containerTokens } from "../container/tokens.js";
|
|
7
8
|
import { calendarTokens } from "../date-picker/calendarTokens.js";
|
|
8
9
|
import { dialogTokens } from "../dialog/tokens.js";
|
|
@@ -17,6 +18,7 @@ import { numberInputTokens } from "../number-input/tokens.js";
|
|
|
17
18
|
import { popoverTokens } from "../popover/tokens.js";
|
|
18
19
|
import { proseTokens } from "../prose/tokens.js";
|
|
19
20
|
import { radioTokens } from "../radio-group/tokens.js";
|
|
21
|
+
import { segmentedControlTokens } from "../segmented-control/tokens.js";
|
|
20
22
|
import { listBoxTokens } from "../select/listBoxTokens.js";
|
|
21
23
|
import { spinnerTokens } from "../spinner/tokens.js";
|
|
22
24
|
import { stackTokens } from "../stack/tokens.js";
|
|
@@ -37,6 +39,7 @@ var componentTokens = Object.freeze({
|
|
|
37
39
|
calendar: calendarTokens.tokens,
|
|
38
40
|
card: cardTokens.tokens,
|
|
39
41
|
checkbox: checkboxTokens.tokens,
|
|
42
|
+
"command-palette": commandPaletteTokens.tokens,
|
|
40
43
|
container: containerTokens.tokens,
|
|
41
44
|
dialog: dialogTokens.tokens,
|
|
42
45
|
disclosure: disclosureTokens.tokens,
|
|
@@ -51,6 +54,7 @@ var componentTokens = Object.freeze({
|
|
|
51
54
|
popover: popoverTokens.tokens,
|
|
52
55
|
prose: proseTokens.tokens,
|
|
53
56
|
radio: radioTokens.tokens,
|
|
57
|
+
"segmented-control": segmentedControlTokens.tokens,
|
|
54
58
|
spinner: spinnerTokens.tokens,
|
|
55
59
|
stack: stackTokens.tokens,
|
|
56
60
|
switch: switchTokens.tokens,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.js","names":[],"sources":["../../src/theme/components.ts"],"sourcesContent":["import { alertTokens } from '../alert/tokens';\nimport { badgeTokens } from '../badge/tokens';\nimport { buttonTokens } from '../button/tokens';\nimport { cardTokens } from '../card/tokens';\nimport { checkboxTokens } from '../checkbox/tokens';\nimport { containerTokens } from '../container/tokens';\nimport { calendarTokens } from '../date-picker/calendarTokens';\nimport { dialogTokens } from '../dialog/tokens';\nimport { disclosureTokens } from '../disclosure/tokens';\nimport { dividerTokens } from '../divider/tokens';\nimport { inputTokens } from '../field/inputTokens';\nimport { fieldTokens } from '../field/tokens';\nimport { gridTokens } from '../grid/tokens';\nimport { headingTokens } from '../heading/tokens';\nimport { inlineTokens } from '../inline/tokens';\nimport { numberInputTokens } from '../number-input/tokens';\nimport { popoverTokens } from '../popover/tokens';\nimport { proseTokens } from '../prose/tokens';\nimport { radioTokens } from '../radio-group/tokens';\nimport { listBoxTokens } from '../select/listBoxTokens';\nimport { spinnerTokens } from '../spinner/tokens';\nimport { stackTokens } from '../stack/tokens';\nimport { switchTokens } from '../switch/tokens';\nimport { tabsTokens } from '../tabs/tokens';\nimport { textTokens } from '../text/tokens';\nimport { toastTokens } from '../toast/tokens';\nimport { tooltipTokens } from '../tooltip/tokens';\n\n/**\n * The component tokens of `@panneau/ui` and their defaults, by component: what a theme, a scope or\n * a project's CSS can set to restyle one component without touching the others (decision 0024).\n */\nexport const componentTokens = Object.freeze({\n alert: alertTokens.tokens,\n badge: badgeTokens.tokens,\n button: buttonTokens.tokens,\n calendar: calendarTokens.tokens,\n card: cardTokens.tokens,\n checkbox: checkboxTokens.tokens,\n container: containerTokens.tokens,\n dialog: dialogTokens.tokens,\n disclosure: disclosureTokens.tokens,\n divider: dividerTokens.tokens,\n field: fieldTokens.tokens,\n grid: gridTokens.tokens,\n heading: headingTokens.tokens,\n inline: inlineTokens.tokens,\n input: inputTokens.tokens,\n 'list-box': listBoxTokens.tokens,\n 'number-input': numberInputTokens.tokens,\n popover: popoverTokens.tokens,\n prose: proseTokens.tokens,\n radio: radioTokens.tokens,\n spinner: spinnerTokens.tokens,\n stack: stackTokens.tokens,\n switch: switchTokens.tokens,\n tabs: tabsTokens.tokens,\n text: textTokens.tokens,\n toast: toastTokens.tokens,\n tooltip: tooltipTokens.tokens,\n});\n\n/** The name of a component token of `@panneau/ui`, without the leading `--`. */\nexport type ComponentTokenName = {\n [Component in keyof typeof componentTokens]: keyof (typeof componentTokens)[Component];\n}[keyof typeof componentTokens];\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"components.js","names":[],"sources":["../../src/theme/components.ts"],"sourcesContent":["import { alertTokens } from '../alert/tokens';\nimport { badgeTokens } from '../badge/tokens';\nimport { buttonTokens } from '../button/tokens';\nimport { cardTokens } from '../card/tokens';\nimport { checkboxTokens } from '../checkbox/tokens';\nimport { commandPaletteTokens } from '../command-palette/tokens';\nimport { containerTokens } from '../container/tokens';\nimport { calendarTokens } from '../date-picker/calendarTokens';\nimport { dialogTokens } from '../dialog/tokens';\nimport { disclosureTokens } from '../disclosure/tokens';\nimport { dividerTokens } from '../divider/tokens';\nimport { inputTokens } from '../field/inputTokens';\nimport { fieldTokens } from '../field/tokens';\nimport { gridTokens } from '../grid/tokens';\nimport { headingTokens } from '../heading/tokens';\nimport { inlineTokens } from '../inline/tokens';\nimport { numberInputTokens } from '../number-input/tokens';\nimport { popoverTokens } from '../popover/tokens';\nimport { proseTokens } from '../prose/tokens';\nimport { radioTokens } from '../radio-group/tokens';\nimport { segmentedControlTokens } from '../segmented-control/tokens';\nimport { listBoxTokens } from '../select/listBoxTokens';\nimport { spinnerTokens } from '../spinner/tokens';\nimport { stackTokens } from '../stack/tokens';\nimport { switchTokens } from '../switch/tokens';\nimport { tabsTokens } from '../tabs/tokens';\nimport { textTokens } from '../text/tokens';\nimport { toastTokens } from '../toast/tokens';\nimport { tooltipTokens } from '../tooltip/tokens';\n\n/**\n * The component tokens of `@panneau/ui` and their defaults, by component: what a theme, a scope or\n * a project's CSS can set to restyle one component without touching the others (decision 0024).\n */\nexport const componentTokens = Object.freeze({\n alert: alertTokens.tokens,\n badge: badgeTokens.tokens,\n button: buttonTokens.tokens,\n calendar: calendarTokens.tokens,\n card: cardTokens.tokens,\n checkbox: checkboxTokens.tokens,\n 'command-palette': commandPaletteTokens.tokens,\n container: containerTokens.tokens,\n dialog: dialogTokens.tokens,\n disclosure: disclosureTokens.tokens,\n divider: dividerTokens.tokens,\n field: fieldTokens.tokens,\n grid: gridTokens.tokens,\n heading: headingTokens.tokens,\n inline: inlineTokens.tokens,\n input: inputTokens.tokens,\n 'list-box': listBoxTokens.tokens,\n 'number-input': numberInputTokens.tokens,\n popover: popoverTokens.tokens,\n prose: proseTokens.tokens,\n radio: radioTokens.tokens,\n 'segmented-control': segmentedControlTokens.tokens,\n spinner: spinnerTokens.tokens,\n stack: stackTokens.tokens,\n switch: switchTokens.tokens,\n tabs: tabsTokens.tokens,\n text: textTokens.tokens,\n toast: toastTokens.tokens,\n tooltip: tooltipTokens.tokens,\n});\n\n/** The name of a component token of `@panneau/ui`, without the leading `--`. */\nexport type ComponentTokenName = {\n [Component in keyof typeof componentTokens]: keyof (typeof componentTokens)[Component];\n}[keyof typeof componentTokens];\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,IAAa,kBAAkB,OAAO,OAAO;CACzC,OAAO,YAAY;CACnB,OAAO,YAAY;CACnB,QAAQ,aAAa;CACrB,UAAU,eAAe;CACzB,MAAM,WAAW;CACjB,UAAU,eAAe;CACzB,mBAAmB,qBAAqB;CACxC,WAAW,gBAAgB;CAC3B,QAAQ,aAAa;CACrB,YAAY,iBAAiB;CAC7B,SAAS,cAAc;CACvB,OAAO,YAAY;CACnB,MAAM,WAAW;CACjB,SAAS,cAAc;CACvB,QAAQ,aAAa;CACrB,OAAO,YAAY;CACnB,YAAY,cAAc;CAC1B,gBAAgB,kBAAkB;CAClC,SAAS,cAAc;CACvB,OAAO,YAAY;CACnB,OAAO,YAAY;CACnB,qBAAqB,uBAAuB;CAC5C,SAAS,cAAc;CACvB,OAAO,YAAY;CACnB,QAAQ,aAAa;CACrB,MAAM,WAAW;CACjB,MAAM,WAAW;CACjB,OAAO,YAAY;CACnB,SAAS,cAAc;AAC3B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@panneau/ui",
|
|
3
|
-
"version": "5.0.0-alpha.
|
|
3
|
+
"version": "5.0.0-alpha.5",
|
|
4
4
|
"description": "Design tokens, themes and accessible primitives of Panneau, built on React Aria Components.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -57,10 +57,10 @@
|
|
|
57
57
|
"react-intl": "^12.0.0"
|
|
58
58
|
},
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@panneau/intl": "5.0.0-alpha.
|
|
60
|
+
"@panneau/intl": "5.0.0-alpha.5",
|
|
61
61
|
"lucide-react": "^1.57.0"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
|
-
"@panneau/protocol": "5.0.0-alpha.
|
|
64
|
+
"@panneau/protocol": "5.0.0-alpha.5"
|
|
65
65
|
}
|
|
66
66
|
}
|