prime-ui-kit 0.7.3 → 0.7.7

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.
Files changed (41) hide show
  1. package/dist/components/index.css +326 -34
  2. package/dist/components/index.css.map +4 -4
  3. package/dist/components/index.d.ts +2 -0
  4. package/dist/components/index.d.ts.map +1 -1
  5. package/dist/components/index.js +1363 -588
  6. package/dist/components/index.js.map +4 -4
  7. package/dist/components/select/Select.d.ts +26 -9
  8. package/dist/components/select/Select.d.ts.map +1 -1
  9. package/dist/components/select/examples/pattern-multiple.d.ts +3 -0
  10. package/dist/components/select/examples/pattern-multiple.d.ts.map +1 -0
  11. package/dist/components/tag-select/TagSelect.d.ts +43 -0
  12. package/dist/components/tag-select/TagSelect.d.ts.map +1 -0
  13. package/dist/components/tag-select/examples/pattern-canonical.d.ts +3 -0
  14. package/dist/components/tag-select/examples/pattern-canonical.d.ts.map +1 -0
  15. package/dist/components/tag-select/examples/pattern-features.d.ts +3 -0
  16. package/dist/components/tag-select/examples/pattern-features.d.ts.map +1 -0
  17. package/dist/hooks/usePosition.d.ts.map +1 -1
  18. package/dist/index.css +328 -36
  19. package/dist/index.css.map +4 -4
  20. package/dist/index.js +1363 -588
  21. package/dist/index.js.map +4 -4
  22. package/dist/layout/index.d.ts +1 -0
  23. package/dist/layout/index.d.ts.map +1 -1
  24. package/dist/layout/sidebar/Sidebar.d.ts +2 -0
  25. package/dist/layout/sidebar/Sidebar.d.ts.map +1 -1
  26. package/dist/layout/sidebar/SidebarRoot.d.ts +10 -0
  27. package/dist/layout/sidebar/SidebarRoot.d.ts.map +1 -1
  28. package/dist/layout/sidebar/sidebarDesktopStorage.d.ts +5 -0
  29. package/dist/layout/sidebar/sidebarDesktopStorage.d.ts.map +1 -0
  30. package/dist/layout/sidebar/useSidebarNarrowViewport.d.ts +6 -0
  31. package/dist/layout/sidebar/useSidebarNarrowViewport.d.ts.map +1 -0
  32. package/dist/tokens/semantic.d.ts +1 -1
  33. package/package.json +1 -1
  34. package/src/components/select/COMPONENT.md +91 -32
  35. package/src/components/select/examples/pattern-multiple.tsx +30 -0
  36. package/src/components/tag-select/COMPONENT.md +108 -0
  37. package/src/components/tag-select/examples/examples.module.css +14 -0
  38. package/src/components/tag-select/examples/pattern-canonical.tsx +28 -0
  39. package/src/components/tag-select/examples/pattern-features.tsx +32 -0
  40. package/src/styles/theme-dark.css +1 -1
  41. package/src/styles/theme-light.css +1 -1
@@ -1,20 +1,37 @@
1
1
  import * as React from "react";
2
2
  import type { SelectSize } from "@/internal/states";
3
- export type SelectRootProps = {
3
+ type SelectRootBase = {
4
4
  size?: SelectSize;
5
- value?: string;
6
- defaultValue?: string;
7
- onChange?: (value: string) => void;
8
5
  disabled?: boolean;
9
6
  placeholder?: string;
10
7
  hasError?: boolean;
11
- /**
12
- * When `true`, renders a native `<select>` (options from `Select.Item` / groups in the tree).
13
- * Default `false` — custom combobox with portaled listbox.
14
- */
15
- native?: boolean;
16
8
  children: React.ReactNode;
17
9
  };
10
+ export type SelectRootProps = (SelectRootBase & {
11
+ multiple?: false;
12
+ native?: false;
13
+ value?: string;
14
+ defaultValue?: string;
15
+ onChange?: (value: string) => void;
16
+ }) | (SelectRootBase & {
17
+ multiple: true;
18
+ native?: false;
19
+ value?: string[];
20
+ defaultValue?: string[];
21
+ onChange?: (value: string[]) => void;
22
+ }) | (SelectRootBase & {
23
+ multiple?: false;
24
+ native: true;
25
+ value?: string;
26
+ defaultValue?: string;
27
+ onChange?: (value: string) => void;
28
+ }) | (SelectRootBase & {
29
+ multiple: true;
30
+ native: true;
31
+ value?: string[];
32
+ defaultValue?: string[];
33
+ onChange?: (value: string[]) => void;
34
+ });
18
35
  declare function SelectRoot(props: SelectRootProps): import("react/jsx-runtime").JSX.Element;
19
36
  declare namespace SelectRoot {
20
37
  var displayName: string;
@@ -1 +1 @@
1
- {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAiCpD,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,iBAAS,UAAU,CAAC,KAAK,EAAE,eAAe,2CAMzC;kBANQ,UAAU;;;AA8FnB,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,IAAI,GAAG,MAAM,GAAG,MAAM,CACvB,CAAC;AA+DF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAenD;kBAfQ,WAAW;;;AAoBpB,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;AAE3E,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,sBAAsB,2CAMlF;kBANQ,iBAAiB;;;AAW1B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAkGjE;kBAlGQ,aAAa;;;AAuGtB,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;AAExE,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,mBAAmB,2CAM5E;kBANQ,cAAc;;;AAqCvB,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,uFAAuF;IACvF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AA4EF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEpE,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,2CAG5D;kBAHQ,WAAW;;;AAQpB,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEzE,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,qBAAqB,2CAEtE;kBAFQ,gBAAgB;;;AAOzB,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;AAEvE,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,oBAAoB,2CAEpE;kBAFQ,eAAe;;;AA0KxB,eAAO,MAAM,MAAM;;;;;;;;;;;CAWlB,CAAC"}
1
+ {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/select/Select.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,3 @@
1
+ /** Controlled multiselect; mirrors `playground/snippets/select/multiple.tsx` (English labels). */
2
+ export default function SelectPatternMultipleExample(): import("react/jsx-runtime").JSX.Element;
3
+ //# sourceMappingURL=pattern-multiple.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pattern-multiple.d.ts","sourceRoot":"","sources":["../../../../../src/components/select/examples/pattern-multiple.tsx"],"names":[],"mappings":"AAOA,kGAAkG;AAClG,MAAM,CAAC,OAAO,UAAU,4BAA4B,4CAqBnD"}
@@ -0,0 +1,43 @@
1
+ import * as React from "react";
2
+ import { type BadgeColor } from "@/components/badge/Badge";
3
+ import type { SelectSize } from "@/internal/states";
4
+ export type TagSelectOption = {
5
+ value: string;
6
+ label: string;
7
+ color?: BadgeColor;
8
+ disabled?: boolean;
9
+ };
10
+ export type TagSelectRootProps = {
11
+ /** Доступные теги (значение + подпись + цвет Badge `filled`). */
12
+ options: TagSelectOption[];
13
+ value?: string[];
14
+ defaultValue?: string[];
15
+ onValueChange?: (next: string[]) => void;
16
+ /** Разрешить ввод нового значения, если его нет в списке. */
17
+ creatable?: boolean;
18
+ /** Только для creatable: значение добавлено через Create / Enter, не выбрано из `options` (сохранение в БД и т.п.). */
19
+ onCreated?: (value: string) => void;
20
+ /** Цвет чипа для созданных вручную значений (если нет в `options`). */
21
+ defaultTagColor?: BadgeColor;
22
+ /** Текст над списком. */
23
+ hint?: React.ReactNode;
24
+ /** Подпись действия создания (перед превью тега). */
25
+ createActionLabel?: string;
26
+ disabled?: boolean;
27
+ placeholder?: string;
28
+ hasError?: boolean;
29
+ /** Как у `Select`: одна ось для поля (`data-size` на контроле) и панели списка; `Badge` без своего `size` берёт размер из этого контекста. */
30
+ size?: SelectSize;
31
+ id?: string;
32
+ className?: string;
33
+ "aria-label"?: string;
34
+ "aria-labelledby"?: string;
35
+ };
36
+ export declare function TagSelectRoot({ options, value: valueProp, defaultValue, onValueChange, creatable, onCreated, defaultTagColor, hint, createActionLabel, disabled, placeholder, hasError, size, id: idProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: TagSelectRootProps): import("react/jsx-runtime").JSX.Element;
37
+ export declare namespace TagSelectRoot {
38
+ var displayName: string;
39
+ }
40
+ export declare const TagSelect: {
41
+ Root: typeof TagSelectRoot;
42
+ };
43
+ //# sourceMappingURL=TagSelect.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"TagSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/tag-select/TagSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAalE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAKpD,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAIF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,iEAAiE;IACjE,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACzC,6DAA6D;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uHAAuH;IACvH,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,uEAAuE;IACvE,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,yBAAyB;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qDAAqD;IACrD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8IAA8I;IAC9I,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAmDF,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,KAAK,EAAE,SAAS,EAChB,YAAiB,EACjB,aAAa,EACb,SAAiB,EACjB,SAAS,EACT,eAAwB,EACxB,IAAuC,EACvC,iBAA4B,EAC5B,QAAgB,EAChB,WAAgB,EAChB,QAAgB,EAChB,IAAU,EACV,EAAE,EAAE,MAAM,EACV,SAAS,EACT,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,GAClC,EAAE,kBAAkB,2CAqapB;yBAvbe,aAAa;;;AA2b7B,eAAO,MAAM,SAAS;;CAErB,CAAC"}
@@ -0,0 +1,3 @@
1
+ /** Controlled multi-select from `options`; `prime-ui-kit` import for published consumers. */
2
+ export default function TagSelectPatternCanonicalExample(): import("react/jsx-runtime").JSX.Element;
3
+ //# sourceMappingURL=pattern-canonical.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pattern-canonical.d.ts","sourceRoot":"","sources":["../../../../../src/components/tag-select/examples/pattern-canonical.tsx"],"names":[],"mappings":"AAKA,6FAA6F;AAC7F,MAAM,CAAC,OAAO,UAAU,gCAAgC,4CAqBvD"}
@@ -0,0 +1,3 @@
1
+ /** `creatable` + filter; mirrors `playground/snippets/tag-select/features.tsx`. */
2
+ export default function TagSelectPatternFeaturesExample(): import("react/jsx-runtime").JSX.Element;
3
+ //# sourceMappingURL=pattern-features.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"pattern-features.d.ts","sourceRoot":"","sources":["../../../../../src/components/tag-select/examples/pattern-features.tsx"],"names":[],"mappings":"AAOA,mFAAmF;AACnF,MAAM,CAAC,OAAO,UAAU,+BAA+B,4CAuBtD"}
@@ -1 +1 @@
1
- {"version":3,"file":"usePosition.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,KAAK,CAAC;AAC5C,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEvD,KAAK,kBAAkB,GAAG;IACxB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAUF,MAAM,MAAM,kBAAkB,GAAG;IAAE,YAAY,EAAE,YAAY,CAAA;CAAE,CAAC;AAShE,MAAM,MAAM,sBAAsB,GAAG;IACnC,aAAa,EAAE,YAAY,CAAC;IAC5B,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,qFAAqF;IACrF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,oBAAoB,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,YAAY,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAsBF,mGAAmG;AACnG,wBAAgB,uBAAuB,CACrC,UAAU,EAAE,eAAe,EAC3B,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,sBAAsB,GAC3B,qBAAqB,CAwCvB;AAED,KAAK,iBAAiB,GAAG;IACvB,YAAY,EAAE,YAAY,CAAC;IAC3B,MAAM,EAAE,MAAM,kBAAkB,GAAG,SAAS,CAAC;CAC9C,CAAC;AAEF,wBAAgB,WAAW,CACzB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC9C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC/C,OAAO,GAAE,kBAAuB,GAC/B,iBAAiB,CAgEnB"}
1
+ {"version":3,"file":"usePosition.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,KAAK,CAAC;AAC5C,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEvD,KAAK,kBAAkB,GAAG;IACxB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uEAAuE;IACvE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC;AAUF,MAAM,MAAM,kBAAkB,GAAG;IAAE,YAAY,EAAE,YAAY,CAAA;CAAE,CAAC;AAShE,MAAM,MAAM,sBAAsB,GAAG;IACnC,aAAa,EAAE,YAAY,CAAC;IAC5B,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,qFAAqF;IACrF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,oBAAoB,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,YAAY,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAsBF,mGAAmG;AACnG,wBAAgB,uBAAuB,CACrC,UAAU,EAAE,eAAe,EAC3B,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,IAAI,EAAE,sBAAsB,GAC3B,qBAAqB,CAwCvB;AAED,KAAK,iBAAiB,GAAG;IACvB,YAAY,EAAE,YAAY,CAAC;IAC3B,MAAM,EAAE,MAAM,kBAAkB,GAAG,SAAS,CAAC;CAC9C,CAAC;AAEF,wBAAgB,WAAW,CACzB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC9C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC/C,OAAO,GAAE,kBAAuB,GAC/B,iBAAiB,CAqEnB"}
package/dist/index.css CHANGED
@@ -609,7 +609,7 @@ select {
609
609
  --prime-sys-size-modal-paddingX: var(--prime-sys-spacing-xl);
610
610
  --prime-sys-size-modal-paddingY: var(--prime-sys-spacing-xl);
611
611
  --prime-sys-size-modal-radius: var(--prime-sys-shape-radius-4xl);
612
- --prime-sys-size-modal-titleGap: var(--prime-sys-spacing-s);
612
+ --prime-sys-size-modal-titleGap: var(--prime-sys-spacing-x1);
613
613
  --prime-sys-size-switch-l-thumb: var(--prime-ref-icon-m);
614
614
  --prime-sys-size-switch-l-trackHeight: 1.25rem;
615
615
  --prime-sys-size-switch-l-trackWidth: 2.25rem;
@@ -1075,7 +1075,7 @@ select {
1075
1075
  --prime-sys-size-modal-paddingX: var(--prime-sys-spacing-xl);
1076
1076
  --prime-sys-size-modal-paddingY: var(--prime-sys-spacing-xl);
1077
1077
  --prime-sys-size-modal-radius: var(--prime-sys-shape-radius-4xl);
1078
- --prime-sys-size-modal-titleGap: var(--prime-sys-spacing-s);
1078
+ --prime-sys-size-modal-titleGap: var(--prime-sys-spacing-x1);
1079
1079
  --prime-sys-size-switch-l-thumb: var(--prime-ref-icon-m);
1080
1080
  --prime-sys-size-switch-l-trackHeight: 1.25rem;
1081
1081
  --prime-sys-size-switch-l-trackWidth: 2.25rem;
@@ -5148,12 +5148,6 @@ textarea::-moz-focus-inner {
5148
5148
  display: block;
5149
5149
  }
5150
5150
  .Select_content {
5151
- --select-item-min-height: var(--prime-sys-size-control-m-height);
5152
- --select-item-text: var(--prime-sys-typography-control-s);
5153
- --select-item-pad-x: var(--prime-sys-size-control-m-inputPaddingX);
5154
- --select-item-icon-size: var(--prime-sys-size-control-m-icon);
5155
- --select-item-gap: var(--prime-sys-size-control-m-gap);
5156
- --select-item-radius: var(--prime-sys-size-control-m-radius);
5157
5151
  display: flex;
5158
5152
  flex-direction: column;
5159
5153
  gap: var(--prime-sys-spacing-x1);
@@ -5169,6 +5163,9 @@ textarea::-moz-focus-inner {
5169
5163
  font-family: inherit;
5170
5164
  color: var(--prime-sys-color-content-primary);
5171
5165
  }
5166
+ .Select_content[aria-hidden=true] {
5167
+ pointer-events: none;
5168
+ }
5172
5169
  .Select_content[data-overlay-portal-layer=page] {
5173
5170
  z-index: var(--prime-sys-elevation-zIndex-dropdown);
5174
5171
  }
@@ -5181,7 +5178,33 @@ textarea::-moz-focus-inner {
5181
5178
  .Select_content[data-overlay-portal-layer=drawerInModal] {
5182
5179
  z-index: var(--prime-sys-elevation-zIndex-dropdownInDrawerInModal);
5183
5180
  }
5184
- .Select_content[data-size=s] {
5181
+ .Select_item {
5182
+ --select-item-min-height: var(--prime-sys-size-control-m-height);
5183
+ --select-item-text: var(--prime-sys-typography-control-s);
5184
+ --select-item-pad-x: var(--prime-sys-size-control-m-inputPaddingX);
5185
+ --select-item-icon-size: var(--prime-sys-size-control-m-icon);
5186
+ --select-item-gap: var(--prime-sys-size-control-m-gap);
5187
+ --select-item-radius: var(--prime-sys-size-control-m-radius);
5188
+ display: flex;
5189
+ align-items: center;
5190
+ gap: var(--select-item-gap);
5191
+ box-sizing: border-box;
5192
+ width: 100%;
5193
+ min-height: var(--select-item-min-height);
5194
+ padding-block: 0;
5195
+ padding-inline: var(--select-item-pad-x);
5196
+ border-radius: var(--select-item-radius);
5197
+ cursor: pointer;
5198
+ font-size: var(--select-item-text);
5199
+ font-weight: var(--prime-sys-typography-weight-medium);
5200
+ line-height: 1.2;
5201
+ color: var(--prime-sys-color-content-primary);
5202
+ text-align: start;
5203
+ transition: background-color var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
5204
+ outline: none;
5205
+ user-select: none;
5206
+ }
5207
+ .Select_item[data-size=s] {
5185
5208
  --select-item-min-height: var(--prime-sys-size-control-s-height);
5186
5209
  --select-item-text: var(--prime-sys-typography-support-2xs);
5187
5210
  --select-item-pad-x: var(--prime-sys-size-control-s-inputPaddingX);
@@ -5189,7 +5212,7 @@ textarea::-moz-focus-inner {
5189
5212
  --select-item-gap: var(--prime-sys-size-control-s-gap);
5190
5213
  --select-item-radius: var(--prime-sys-size-control-s-radius);
5191
5214
  }
5192
- .Select_content[data-size=m] {
5215
+ .Select_item[data-size=m] {
5193
5216
  --select-item-min-height: var(--prime-sys-size-control-m-height);
5194
5217
  --select-item-text: var(--prime-sys-typography-control-s);
5195
5218
  --select-item-pad-x: var(--prime-sys-size-control-m-inputPaddingX);
@@ -5197,7 +5220,7 @@ textarea::-moz-focus-inner {
5197
5220
  --select-item-gap: var(--prime-sys-size-control-m-gap);
5198
5221
  --select-item-radius: var(--prime-sys-size-control-m-radius);
5199
5222
  }
5200
- .Select_content[data-size=l] {
5223
+ .Select_item[data-size=l] {
5201
5224
  --select-item-min-height: var(--prime-sys-size-control-l-height);
5202
5225
  --select-item-text: var(--prime-sys-typography-control-m);
5203
5226
  --select-item-pad-x: var(--prime-sys-size-control-l-inputPaddingX);
@@ -5205,7 +5228,7 @@ textarea::-moz-focus-inner {
5205
5228
  --select-item-gap: var(--prime-sys-size-control-l-gap);
5206
5229
  --select-item-radius: var(--prime-sys-size-control-l-radius);
5207
5230
  }
5208
- .Select_content[data-size=xl] {
5231
+ .Select_item[data-size=xl] {
5209
5232
  --select-item-min-height: var(--prime-sys-size-control-xl-height);
5210
5233
  --select-item-text: var(--prime-sys-typography-control-l);
5211
5234
  --select-item-pad-x: var(--prime-sys-size-control-xl-inputPaddingX);
@@ -5213,26 +5236,6 @@ textarea::-moz-focus-inner {
5213
5236
  --select-item-gap: var(--prime-sys-size-control-xl-gap);
5214
5237
  --select-item-radius: var(--prime-sys-size-control-xl-radius);
5215
5238
  }
5216
- .Select_item {
5217
- display: flex;
5218
- align-items: center;
5219
- gap: var(--select-item-gap);
5220
- box-sizing: border-box;
5221
- width: 100%;
5222
- min-height: var(--select-item-min-height);
5223
- padding-block: 0;
5224
- padding-inline: var(--select-item-pad-x);
5225
- border-radius: var(--select-item-radius);
5226
- cursor: pointer;
5227
- font-size: var(--select-item-text);
5228
- font-weight: var(--prime-sys-typography-weight-medium);
5229
- line-height: 1.2;
5230
- color: var(--prime-sys-color-content-primary);
5231
- text-align: start;
5232
- transition: background-color var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
5233
- outline: none;
5234
- user-select: none;
5235
- }
5236
5239
  .Select_item:hover,
5237
5240
  .Select_item[data-highlighted=true] {
5238
5241
  background: color-mix(in srgb, var(--prime-sys-color-action-neutralBackgroundHover) 90%, var(--prime-sys-color-field-text) 10%);
@@ -5292,12 +5295,24 @@ textarea::-moz-focus-inner {
5292
5295
  .Select_groupLabel {
5293
5296
  display: flex;
5294
5297
  align-items: center;
5295
- padding-inline: var(--select-item-pad-x);
5298
+ padding-inline: var(--prime-sys-size-control-m-inputPaddingX);
5296
5299
  padding-block: var(--prime-sys-spacing-x1);
5297
5300
  font-size: var(--prime-sys-typography-support-2xs);
5298
5301
  color: var(--prime-sys-color-content-muted);
5299
5302
  font-weight: var(--prime-sys-typography-weight-medium);
5300
5303
  }
5304
+ .Select_groupLabel[data-size=s] {
5305
+ padding-inline: var(--prime-sys-size-control-s-inputPaddingX);
5306
+ }
5307
+ .Select_groupLabel[data-size=m] {
5308
+ padding-inline: var(--prime-sys-size-control-m-inputPaddingX);
5309
+ }
5310
+ .Select_groupLabel[data-size=l] {
5311
+ padding-inline: var(--prime-sys-size-control-l-inputPaddingX);
5312
+ }
5313
+ .Select_groupLabel[data-size=xl] {
5314
+ padding-inline: var(--prime-sys-size-control-xl-inputPaddingX);
5315
+ }
5301
5316
  .Select_separator {
5302
5317
  flex-shrink: 0;
5303
5318
  align-self: stretch;
@@ -5627,24 +5642,30 @@ textarea::-moz-focus-inner {
5627
5642
  align-items: center;
5628
5643
  }
5629
5644
  .Modal_title {
5645
+ margin: 0;
5630
5646
  line-height: 1.2;
5631
5647
  font-weight: var(--prime-sys-typography-title-weight);
5632
5648
  font-size: var(--prime-sys-size-control-m-text);
5633
5649
  }
5634
5650
  .Modal_description {
5651
+ margin: 0;
5635
5652
  color: var(--prime-sys-color-content-secondary);
5636
- font-size: var(--prime-sys-size-control-m-supportText);
5653
+ font-size: var(--prime-sys-size-control-s-text);
5654
+ line-height: 1.4;
5637
5655
  }
5638
5656
  .Modal_headText {
5639
- display: grid;
5657
+ display: flex;
5658
+ flex-direction: column;
5659
+ align-items: stretch;
5640
5660
  gap: var(--prime-sys-size-modal-titleGap);
5661
+ min-width: 0;
5641
5662
  padding-right: var(--prime-sys-size-modal-headTextPaddingRight);
5642
5663
  }
5643
5664
  .Modal_headerIcon {
5644
5665
  display: inline-flex;
5645
5666
  align-items: center;
5646
5667
  justify-content: center;
5647
- background: var(--prime-sys-color-surface-raised);
5668
+ background: var(--prime-sys-color-surface-default);
5648
5669
  color: var(--prime-sys-color-content-secondary);
5649
5670
  flex: 0 0 auto;
5650
5671
  width: var(--prime-sys-size-modal-headerIconSize);
@@ -9911,6 +9932,277 @@ textarea::-moz-focus-inner {
9911
9932
  flex-shrink: 0;
9912
9933
  }
9913
9934
 
9935
+ /* src/components/tag-select/TagSelect.module.css */
9936
+ .TagSelect_control {
9937
+ --ts-pad-x: var(--prime-sys-size-control-m-inputPaddingX);
9938
+ --ts-pad-y: var(--prime-sys-size-control-m-inputPaddingY);
9939
+ --ts-gap: var(--prime-sys-size-control-m-gap);
9940
+ --ts-chevron: var(--prime-sys-size-control-m-icon);
9941
+ position: relative;
9942
+ box-sizing: border-box;
9943
+ display: flex;
9944
+ flex-wrap: wrap;
9945
+ align-items: flex-start;
9946
+ gap: var(--ts-gap);
9947
+ width: 100%;
9948
+ min-width: 0;
9949
+ padding-inline-start: var(--ts-pad-x);
9950
+ padding-inline-end: calc(var(--ts-pad-x) + var(--ts-chevron) + var(--ts-gap));
9951
+ padding-block: var(--ts-pad-y);
9952
+ border-radius: var(--prime-sys-size-control-m-radius);
9953
+ border: var(--prime-sys-border-width-control) solid var(--prime-sys-color-field-border);
9954
+ background: var(--prime-sys-color-field-bg);
9955
+ color: var(--prime-sys-color-field-text);
9956
+ font-size: var(--prime-sys-size-control-m-text);
9957
+ font-family: inherit;
9958
+ box-shadow: var(--prime-sys-elevation-shadow-surface);
9959
+ cursor: text;
9960
+ text-align: left;
9961
+ outline: none;
9962
+ transition:
9963
+ border-color var(--prime-sys-motion-medium) var(--prime-sys-motion-standard),
9964
+ box-shadow var(--prime-sys-motion-medium) var(--prime-sys-motion-standard),
9965
+ background-color var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
9966
+ }
9967
+ .TagSelect_control[data-size=s] {
9968
+ --ts-pad-x: var(--prime-sys-size-control-s-inputPaddingX);
9969
+ --ts-pad-y: var(--prime-sys-size-control-s-inputPaddingY);
9970
+ --ts-gap: var(--prime-sys-size-control-s-gap);
9971
+ --ts-chevron: var(--prime-sys-size-control-s-icon);
9972
+ border-radius: var(--prime-sys-size-control-s-radius);
9973
+ font-size: var(--prime-sys-size-control-s-text);
9974
+ }
9975
+ .TagSelect_control[data-size=m] {
9976
+ --ts-gap: var(--prime-sys-size-control-m-gap);
9977
+ --ts-chevron: var(--prime-sys-size-control-m-icon);
9978
+ border-radius: var(--prime-sys-size-control-m-radius);
9979
+ font-size: var(--prime-sys-size-control-m-text);
9980
+ }
9981
+ .TagSelect_control[data-size=l] {
9982
+ --ts-pad-x: var(--prime-sys-size-control-l-inputPaddingX);
9983
+ --ts-pad-y: var(--prime-sys-size-control-l-inputPaddingY);
9984
+ --ts-gap: var(--prime-sys-size-control-l-gap);
9985
+ --ts-chevron: var(--prime-sys-size-control-l-icon);
9986
+ border-radius: var(--prime-sys-size-control-l-radius);
9987
+ font-size: var(--prime-sys-size-control-l-text);
9988
+ }
9989
+ .TagSelect_control[data-size=xl] {
9990
+ --ts-pad-x: var(--prime-sys-size-control-xl-inputPaddingX);
9991
+ --ts-pad-y: var(--prime-sys-size-control-xl-inputPaddingY);
9992
+ --ts-gap: var(--prime-sys-size-control-xl-gap);
9993
+ --ts-chevron: var(--prime-sys-size-control-xl-icon);
9994
+ border-radius: var(--prime-sys-size-control-xl-radius);
9995
+ font-size: var(--prime-sys-size-control-xl-text);
9996
+ }
9997
+ .TagSelect_control[data-empty=true] {
9998
+ min-height: var(--prime-sys-size-control-m-height);
9999
+ }
10000
+ .TagSelect_control[data-empty=true][data-size=s] {
10001
+ min-height: var(--prime-sys-size-control-s-height);
10002
+ }
10003
+ .TagSelect_control[data-empty=true][data-size=m] {
10004
+ min-height: var(--prime-sys-size-control-m-height);
10005
+ }
10006
+ .TagSelect_control[data-empty=true][data-size=l] {
10007
+ min-height: var(--prime-sys-size-control-l-height);
10008
+ }
10009
+ .TagSelect_control[data-empty=true][data-size=xl] {
10010
+ min-height: var(--prime-sys-size-control-xl-height);
10011
+ }
10012
+ .TagSelect_control:hover:not([data-disabled=true]) {
10013
+ border-color: var(--prime-sys-color-field-borderHover);
10014
+ background: color-mix(in srgb, var(--prime-sys-color-action-neutralBackgroundHover) 90%, var(--prime-sys-color-field-text) 10%);
10015
+ box-shadow: none;
10016
+ }
10017
+ .TagSelect_control:focus-within:not([data-disabled=true]) {
10018
+ border-color: var(--prime-sys-color-field-borderFocus);
10019
+ box-shadow: var(--prime-sys-elevation-shadow-buttonFocus);
10020
+ }
10021
+ .TagSelect_control[data-has-error=true] {
10022
+ border-color: var(--prime-sys-color-field-borderError);
10023
+ }
10024
+ .TagSelect_control[data-has-error=true]:focus-within {
10025
+ box-shadow: var(--prime-sys-elevation-shadow-errorFocus);
10026
+ }
10027
+ .TagSelect_control[data-disabled=true] {
10028
+ background: var(--prime-sys-color-surface-accentSoft);
10029
+ border-color: transparent;
10030
+ box-shadow: none;
10031
+ cursor: not-allowed;
10032
+ color: var(--prime-sys-color-content-disabled);
10033
+ }
10034
+ .TagSelect_chips {
10035
+ display: flex;
10036
+ flex: 1 1 auto;
10037
+ flex-wrap: wrap;
10038
+ align-items: center;
10039
+ gap: var(--ts-gap);
10040
+ box-sizing: border-box;
10041
+ width: 100%;
10042
+ min-width: 0;
10043
+ }
10044
+ .TagSelect_chip {
10045
+ display: inline-flex;
10046
+ max-width: 100%;
10047
+ }
10048
+ .TagSelect_chipBadge {
10049
+ max-width: 100%;
10050
+ min-width: 0;
10051
+ }
10052
+ .TagSelect_chipLabel {
10053
+ min-width: 0;
10054
+ overflow: hidden;
10055
+ text-overflow: ellipsis;
10056
+ }
10057
+ .TagSelect_chipRemove {
10058
+ display: inline-flex;
10059
+ flex-shrink: 0;
10060
+ align-items: center;
10061
+ justify-content: center;
10062
+ margin: 0;
10063
+ padding: 0;
10064
+ border: none;
10065
+ border-radius: var(--prime-sys-shape-radius-s);
10066
+ background: transparent;
10067
+ color: inherit;
10068
+ opacity: 0.8;
10069
+ cursor: pointer;
10070
+ transition: opacity var(--prime-sys-motion-fast) var(--prime-sys-motion-standard);
10071
+ }
10072
+ .TagSelect_chipRemove:hover:not(:disabled) {
10073
+ opacity: 1;
10074
+ }
10075
+ .TagSelect_chipRemove:focus-visible {
10076
+ outline: none;
10077
+ box-shadow: var(--prime-sys-elevation-shadow-buttonFocus);
10078
+ }
10079
+ .TagSelect_chipRemove:disabled {
10080
+ cursor: not-allowed;
10081
+ opacity: 0.45;
10082
+ }
10083
+ .TagSelect_removeIcon {
10084
+ display: block;
10085
+ width: 0.625rem;
10086
+ height: 0.625rem;
10087
+ }
10088
+ .TagSelect_input {
10089
+ flex: 1 1 4rem;
10090
+ min-width: 2rem;
10091
+ margin: 0;
10092
+ padding: 0;
10093
+ border: none;
10094
+ background: transparent;
10095
+ color: inherit;
10096
+ font: inherit;
10097
+ line-height: var(--prime-sys-typography-body-lineHeight);
10098
+ outline: none;
10099
+ }
10100
+ .TagSelect_inputCollapsed {
10101
+ flex: 0 1 0;
10102
+ min-width: 0;
10103
+ width: 0;
10104
+ height: 0;
10105
+ min-height: 0;
10106
+ overflow: hidden;
10107
+ opacity: 0;
10108
+ line-height: 0;
10109
+ font-size: 0;
10110
+ }
10111
+ .TagSelect_input::placeholder {
10112
+ color: var(--prime-sys-color-field-placeholder);
10113
+ }
10114
+ .TagSelect_control[data-disabled=true] .TagSelect_input::placeholder {
10115
+ color: var(--prime-sys-color-content-disabled);
10116
+ }
10117
+ .TagSelect_chevronSlot {
10118
+ position: absolute;
10119
+ top: 50%;
10120
+ right: var(--ts-pad-x);
10121
+ display: inline-flex;
10122
+ align-items: center;
10123
+ justify-content: center;
10124
+ width: var(--ts-chevron);
10125
+ min-width: var(--ts-chevron);
10126
+ pointer-events: none;
10127
+ transform: translateY(-50%);
10128
+ }
10129
+ .TagSelect_chevron {
10130
+ display: block;
10131
+ flex-shrink: 0;
10132
+ width: var(--prime-sys-unit-0p45rem);
10133
+ height: var(--prime-sys-unit-0p45rem);
10134
+ border-right: var(--prime-sys-unit-1p5px) solid currentColor;
10135
+ border-bottom: var(--prime-sys-unit-1p5px) solid currentColor;
10136
+ transform: rotate(45deg) translateY(-10%);
10137
+ opacity: 0.6;
10138
+ transition: transform var(--prime-sys-motion-medium) var(--prime-sys-motion-standard), opacity var(--prime-sys-motion-medium) var(--prime-sys-motion-standard);
10139
+ }
10140
+ .TagSelect_control[data-open=true] .TagSelect_chevron {
10141
+ transform: rotate(225deg) translateY(-10%);
10142
+ }
10143
+ .TagSelect_panelInner {
10144
+ display: flex;
10145
+ flex-direction: column;
10146
+ gap: 0;
10147
+ min-width: 0;
10148
+ }
10149
+ .TagSelect_hint {
10150
+ padding-inline: var(--prime-sys-spacing-x3);
10151
+ padding-block: var(--prime-sys-spacing-x2) var(--prime-sys-spacing-x1);
10152
+ }
10153
+ .TagSelect_optionRow {
10154
+ display: flex;
10155
+ align-items: center;
10156
+ gap: var(--prime-sys-spacing-x2);
10157
+ width: 100%;
10158
+ min-width: 0;
10159
+ cursor: pointer;
10160
+ border: none;
10161
+ background: none;
10162
+ text-align: left;
10163
+ font: inherit;
10164
+ color: inherit;
10165
+ padding-inline: var(--prime-sys-spacing-x3);
10166
+ padding-block: var(--prime-sys-spacing-x2);
10167
+ border-radius: var(--prime-sys-shape-radius-m);
10168
+ transition: background var(--prime-sys-motion-fast) var(--prime-sys-motion-standard);
10169
+ }
10170
+ .TagSelect_optionRow:hover:not([data-disabled=true]) {
10171
+ background: var(--prime-sys-color-action-neutralBackgroundHover);
10172
+ }
10173
+ .TagSelect_optionRow[data-highlighted=true]:not([data-disabled=true]) {
10174
+ background: var(--prime-sys-color-action-neutralBackgroundHover);
10175
+ }
10176
+ .TagSelect_optionRow[data-disabled=true] {
10177
+ opacity: 0.45;
10178
+ cursor: not-allowed;
10179
+ }
10180
+ .TagSelect_createRow {
10181
+ display: flex;
10182
+ align-items: center;
10183
+ flex-wrap: wrap;
10184
+ gap: var(--prime-sys-spacing-x2);
10185
+ width: 100%;
10186
+ min-width: 0;
10187
+ cursor: pointer;
10188
+ border: none;
10189
+ background: none;
10190
+ text-align: left;
10191
+ font: inherit;
10192
+ color: inherit;
10193
+ padding-inline: var(--prime-sys-spacing-x3);
10194
+ padding-block: var(--prime-sys-spacing-x2);
10195
+ border-radius: var(--prime-sys-shape-radius-m);
10196
+ transition: background var(--prime-sys-motion-fast) var(--prime-sys-motion-standard);
10197
+ }
10198
+ .TagSelect_createRow:hover:not([data-disabled=true]),
10199
+ .TagSelect_createRow[data-highlighted=true]:not([data-disabled=true]) {
10200
+ background: var(--prime-sys-color-action-neutralBackgroundHover);
10201
+ }
10202
+ .TagSelect_createLabel {
10203
+ flex-shrink: 0;
10204
+ }
10205
+
9914
10206
  /* src/components/textarea/Textarea.module.css */
9915
10207
  .Textarea_field {
9916
10208
  --prime-textarea-body-size: var(--prime-sys-size-control-m-text);