@panneau/ui 5.0.0-alpha.5 → 5.0.0-alpha.6

package/dist/tags-input/TagsInput.module.js

@@ -0,0 +1,20 @@
+import "./TagsInput.css";
+//#region src/tags-input/TagsInput.module.css
+var control = "panneau-tags-input-control";
+var group = "panneau-tags-input-group";
+var list = "panneau-tags-input-list";
+var tag = "panneau-tags-input-tag";
+var remove = "panneau-tags-input-remove";
+var input = "panneau-tags-input-input";
+var TagsInput_module_default = {
+	control,
+	group,
+	list,
+	tag,
+	remove,
+	input
+};
+//#endregion
+export { control, TagsInput_module_default as default, group, input, list, remove, tag };
+
+//# sourceMappingURL=TagsInput.module.js.map

package/dist/tags-input/TagsInput.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagsInput.module.js","names":[],"sources":["../../src/tags-input/TagsInput.module.css"],"sourcesContent":["/* The tags as chips in the control, before the input. */\n\n.control.control {\n    flex-wrap: wrap;\n    gap: var(--panneau-space-1);\n    height: auto;\n    padding-block: var(--panneau-space-1);\n}\n\n.group {\n    display: contents;\n}\n\n.list {\n    display: contents;\n}\n\n.tag {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--panneau-space-1);\n    max-width: 100%;\n    padding: 0.125rem var(--panneau-space-1) 0.125rem var(--panneau-space-2);\n    font-size: var(--panneau-font-size-sm);\n    line-height: var(--panneau-line-height-tight);\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-surface-sunken);\n    border: var(--panneau-border-width) solid var(--panneau-color-border);\n    border-radius: var(--panneau-radius-full);\n    outline: none;\n    overflow-wrap: anywhere;\n}\n\n.tag[data-focus-visible] {\n    outline: var(--panneau-focus-width) solid var(--panneau-color-focus);\n    outline-offset: 1px;\n}\n\n.remove {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0.125rem;\n    color: var(--panneau-color-text-muted);\n    cursor: pointer;\n    background: none;\n    border: 0;\n    border-radius: var(--panneau-radius-full);\n    outline: none;\n}\n\n.remove[data-hovered] {\n    color: var(--panneau-color-text);\n    background-color: var(--panneau-color-hover);\n}\n\n.input {\n    flex: 1 1 6rem;\n    min-width: 6rem;\n}\n"],"mappings":""}

package/dist/theme/components.d.ts

@@ -20,10 +20,12 @@ export declare const componentTokens: Readonly<{
     inline: Readonly<Record<"panneau-inline-gap", string>>;
     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>>;
     '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>>;
+    menu: Readonly<Record<"panneau-menu-header-font-size" | "panneau-menu-header-font-weight" | "panneau-menu-header-color" | "panneau-menu-header-text-transform" | "panneau-menu-header-letter-spacing" | "panneau-menu-footer-font-size" | "panneau-menu-footer-color" | "panneau-menu-media-size" | "panneau-menu-media-size-described" | "panneau-menu-media-radius" | "panneau-menu-item-bg-selected", string>>;
     'number-input': Readonly<Record<"panneau-number-input-stepper-width", string>>;
+    'pill-trigger': Readonly<Record<"panneau-pill-trigger-color" | "panneau-pill-trigger-radius" | "panneau-pill-trigger-gap" | "panneau-pill-trigger-padding-x" | "panneau-pill-trigger-font-size" | "panneau-pill-trigger-font-weight" | "panneau-pill-trigger-padding-x-sm" | "panneau-pill-trigger-font-size-sm" | "panneau-pill-trigger-bg" | "panneau-pill-trigger-border-color" | "panneau-pill-trigger-media-size" | "panneau-pill-trigger-media-radius" | "panneau-pill-trigger-bg-hover" | "panneau-pill-trigger-media-size-sm", string>>;
     popover: Readonly<Record<"panneau-popover-radius" | "panneau-popover-padding" | "panneau-popover-bg" | "panneau-popover-border-color" | "panneau-popover-shadow", string>>;
     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>>;
-    radio: Readonly<Record<"panneau-radio-size" | "panneau-radio-bg" | "panneau-radio-border-color" | "panneau-radio-checked-color" | "panneau-radio-checked-border-width", string>>;
+    radio: Readonly<Record<"panneau-radio-size" | "panneau-radio-bg" | "panneau-radio-border-color" | "panneau-radio-checked-color" | "panneau-radio-media-size" | "panneau-radio-media-radius" | "panneau-radio-checked-border-width" | "panneau-radio-card-gap" | "panneau-radio-card-padding" | "panneau-radio-card-bg" | "panneau-radio-card-border-color" | "panneau-radio-card-border-color-hover" | "panneau-radio-card-border-color-selected" | "panneau-radio-card-radius" | "panneau-radio-card-label-font-weight", string>>;
     '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>>;
     spinner: Readonly<Record<"panneau-spinner-border-width", string>>;
     stack: Readonly<Record<"panneau-stack-gap", string>>;

package/dist/theme/components.d.ts.map

@@ -1 +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"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/theme/components.ts"],"names":[],"mappings":"AAgCA;;;GAGG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgC1B,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

@@ -14,7 +14,9 @@ import { fieldTokens } from "../field/tokens.js";
 import { gridTokens } from "../grid/tokens.js";
 import { headingTokens } from "../heading/tokens.js";
 import { inlineTokens } from "../inline/tokens.js";
+import { menuTokens } from "../menu/tokens.js";
 import { numberInputTokens } from "../number-input/tokens.js";
+import { pillTriggerTokens } from "../pill-trigger/tokens.js";
 import { popoverTokens } from "../popover/tokens.js";
 import { proseTokens } from "../prose/tokens.js";
 import { radioTokens } from "../radio-group/tokens.js";
@@ -50,7 +52,9 @@ var componentTokens = Object.freeze({
 	inline: inlineTokens.tokens,
 	input: inputTokens.tokens,
 	"list-box": listBoxTokens.tokens,
+	menu: menuTokens.tokens,
 	"number-input": numberInputTokens.tokens,
+	"pill-trigger": pillTriggerTokens.tokens,
 	popover: popoverTokens.tokens,
 	prose: proseTokens.tokens,
 	radio: radioTokens.tokens,

package/dist/theme/components.js.map

@@ -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 { 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"}
+{"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 { menuTokens } from '../menu/tokens';\nimport { numberInputTokens } from '../number-input/tokens';\nimport { pillTriggerTokens } from '../pill-trigger/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    menu: menuTokens.tokens,\n    'number-input': numberInputTokens.tokens,\n    'pill-trigger': pillTriggerTokens.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,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,MAAM,WAAW;CACjB,gBAAgB,kBAAkB;CAClC,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

@@ -1,6 +1,6 @@
 {
     "name": "@panneau/ui",
-    "version": "5.0.0-alpha.5",
+    "version": "5.0.0-alpha.6",
     "description": "Design tokens, themes and accessible primitives of Panneau, built on React Aria Components.",
     "type": "module",
     "license": "MIT",
@@ -57,10 +57,10 @@
         "react-intl": "^12.0.0"
     },
     "dependencies": {
-        "@panneau/intl": "5.0.0-alpha.5",
+        "@panneau/intl": "5.0.0-alpha.6",
         "lucide-react": "^1.57.0"
     },
     "devDependencies": {
-        "@panneau/protocol": "5.0.0-alpha.5"
+        "@panneau/protocol": "5.0.0-alpha.6"
     }
 }