@pibit.ai/cure-design-system 0.6.24 → 0.6.26

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 (37) hide show
  1. package/dist/index.d.ts +6 -1
  2. package/dist/index.d.ts.map +1 -1
  3. package/dist/index.js +391 -374
  4. package/dist/primitives/button-group/button-group.d.ts +45 -0
  5. package/dist/primitives/button-group/button-group.d.ts.map +1 -0
  6. package/dist/primitives/button-group/button-group.js +73 -0
  7. package/dist/primitives/button-group/index.d.ts +2 -0
  8. package/dist/primitives/button-group/index.d.ts.map +1 -0
  9. package/dist/primitives/file-icon/file-icon.d.ts +16 -0
  10. package/dist/primitives/file-icon/file-icon.d.ts.map +1 -0
  11. package/dist/primitives/file-icon/index.d.ts +2 -0
  12. package/dist/primitives/file-icon/index.d.ts.map +1 -0
  13. package/dist/primitives/input/index.d.ts +1 -0
  14. package/dist/primitives/input/index.d.ts.map +1 -1
  15. package/dist/primitives/input/input-group.d.ts +31 -0
  16. package/dist/primitives/input/input-group.d.ts.map +1 -0
  17. package/dist/primitives/input/input-group.js +116 -0
  18. package/dist/primitives/progress-bar/index.d.ts +2 -0
  19. package/dist/primitives/progress-bar/index.d.ts.map +1 -0
  20. package/dist/primitives/progress-bar/progress-bar.d.ts +52 -0
  21. package/dist/primitives/progress-bar/progress-bar.d.ts.map +1 -0
  22. package/dist/primitives/progress-bar/progress-bar.js +96 -0
  23. package/dist/primitives/segmented-control/index.d.ts +2 -0
  24. package/dist/primitives/segmented-control/index.d.ts.map +1 -0
  25. package/dist/primitives/segmented-control/segmented-control.d.ts +21 -0
  26. package/dist/primitives/segmented-control/segmented-control.d.ts.map +1 -0
  27. package/dist/primitives/segmented-control/segmented-control.js +43 -0
  28. package/dist/primitives/slider/index.d.ts +3 -0
  29. package/dist/primitives/slider/index.d.ts.map +1 -0
  30. package/dist/primitives/slider/range-slider.d.ts +24 -0
  31. package/dist/primitives/slider/range-slider.d.ts.map +1 -0
  32. package/dist/primitives/slider/range-slider.js +115 -0
  33. package/dist/primitives/slider/slider.d.ts +13 -0
  34. package/dist/primitives/slider/slider.d.ts.map +1 -0
  35. package/dist/primitives/slider/slider.js +55 -0
  36. package/dist/styles/components.css +1 -1
  37. package/package.json +2 -1
@@ -0,0 +1,45 @@
1
+ import { FC, PropsWithChildren, ReactNode, RefAttributes } from 'react';
2
+ import { ToggleButtonGroupProps, ToggleButtonProps } from 'react-aria-components';
3
+ declare const styles: {
4
+ common: {
5
+ root: string;
6
+ icon: string;
7
+ };
8
+ sizes: {
9
+ xs: {
10
+ root: string;
11
+ icon: string;
12
+ };
13
+ sm: {
14
+ root: string;
15
+ icon: string;
16
+ };
17
+ md: {
18
+ root: string;
19
+ icon: string;
20
+ };
21
+ lg: {
22
+ root: string;
23
+ icon: string;
24
+ };
25
+ };
26
+ };
27
+ type ButtonSize = keyof typeof styles.sizes;
28
+ export interface ButtonGroupItemProps extends ToggleButtonProps, RefAttributes<HTMLButtonElement> {
29
+ iconLeading?: FC<{
30
+ className?: string;
31
+ }> | ReactNode;
32
+ iconTrailing?: FC<{
33
+ className?: string;
34
+ }> | ReactNode;
35
+ onClick?: () => void;
36
+ className?: string;
37
+ }
38
+ export declare const ButtonGroupItem: ({ iconLeading: IconLeading, iconTrailing: IconTrailing, children, className, ...otherProps }: PropsWithChildren<ButtonGroupItemProps>) => import("react/jsx-runtime").JSX.Element;
39
+ export interface ButtonGroupProps extends Omit<ToggleButtonGroupProps, "orientation">, RefAttributes<HTMLDivElement> {
40
+ size?: ButtonSize;
41
+ className?: string;
42
+ }
43
+ export declare const ButtonGroup: ({ children, size, className, ...otherProps }: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
44
+ export {};
45
+ //# sourceMappingURL=button-group.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/primitives/button-group/button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,KAAK,EAAE,EACP,KAAK,iBAAiB,EACtB,KAAK,SAAS,EACd,KAAK,aAAa,EAIrB,MAAM,OAAO,CAAC;AACf,OAAO,EAGH,KAAK,sBAAsB,EAC3B,KAAK,iBAAiB,EACzB,MAAM,uBAAuB,CAAC;AAI/B,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;CAgCV,CAAC;AAEH,KAAK,UAAU,GAAG,MAAM,OAAO,MAAM,CAAC,KAAK,CAAC;AAI5C,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB,EAAE,aAAa,CAAC,iBAAiB,CAAC;IAC7F,WAAW,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,SAAS,CAAC;IACrD,YAAY,CAAC,EAAE,EAAE,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,GAAG,SAAS,CAAC;IACtD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,GAAI,8FAM7B,iBAAiB,CAAC,oBAAoB,CAAC,4CAyBzC,CAAC;AAEF,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,sBAAsB,EAAE,aAAa,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC;IAChH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,GAAI,8CAAqD,gBAAgB,4CAYhG,CAAC"}
@@ -0,0 +1,73 @@
1
+ import { jsx as n, jsxs as u } from "react/jsx-runtime";
2
+ import { createContext as m, useContext as x, isValidElement as l } from "react";
3
+ import { ToggleButtonGroup as g, ToggleButton as b } from "react-aria-components";
4
+ import { cx as s, sortCx as v } from "../../utils/cn.js";
5
+ import { isReactComponent as d } from "../../utils/is-react-component.js";
6
+ const t = v({
7
+ common: {
8
+ root: [
9
+ "group/button-group inline-flex h-max cursor-pointer items-center bg-primary font-semibold whitespace-nowrap text-secondary shadow-skeumorphic ring-1 ring-[var(--border-color-secondary)] outline-[var(--border-color-secondary)] transition duration-100 ease-linear ring-inset",
10
+ // Hover and focus styles
11
+ "hover:bg-primary_hover hover:text-secondary_hover focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-offset-2",
12
+ // Disabled styles
13
+ "disabled:cursor-not-allowed disabled:bg-primary disabled:text-disabled",
14
+ // Selected styles
15
+ "selected:bg-active selected:text-secondary_hover selected:disabled:bg-disabled_subtle"
16
+ ].join(" "),
17
+ icon: "pointer-events-none text-fg-quaternary transition-[inherit] group-hover/button-group:text-fg-quaternary_hover group-disabled/button-group:text-fg-disabled_subtle"
18
+ },
19
+ sizes: {
20
+ xs: {
21
+ root: "gap-1.5 px-2 py-1.5 text-[12px] first:rounded-l-md last:rounded-r-md data-icon-leading:pl-1.5 data-icon-only:p-1.5 ",
22
+ icon: "size-4.5"
23
+ },
24
+ sm: {
25
+ root: "gap-1.5 px-3.5 py-2 text-sm not-last:pr-[calc(calc(var(--spacing)*3.5)+1px)] first:rounded-l-lg last:rounded-r-lg data-icon-leading:pl-3 data-icon-only:p-2",
26
+ icon: "size-5"
27
+ },
28
+ md: {
29
+ root: "gap-1.5 px-4 py-2.5 text-sm not-last:pr-[calc(calc(var(--spacing)*4)+1px)] first:rounded-l-lg last:rounded-r-lg data-icon-leading:pl-3.5 data-icon-only:px-3",
30
+ icon: "size-5"
31
+ },
32
+ lg: {
33
+ root: "gap-2 px-4.5 py-2.5 text-md not-last:pr-[calc(calc(var(--spacing)*4.5)+1px)] first:rounded-l-lg last:rounded-r-lg data-icon-leading:pl-4 data-icon-only:p-3",
34
+ icon: "size-5"
35
+ }
36
+ }
37
+ }), c = m({ size: "md" }), B = ({
38
+ iconLeading: o,
39
+ iconTrailing: e,
40
+ children: r,
41
+ className: i,
42
+ ...p
43
+ }) => {
44
+ const { size: a } = x(c);
45
+ return /* @__PURE__ */ u(
46
+ b,
47
+ {
48
+ ...p,
49
+ "data-icon-only": (o || e) && !r ? !0 : void 0,
50
+ "data-icon-leading": o ? !0 : void 0,
51
+ className: s(t.common.root, t.sizes[a].root, i),
52
+ children: [
53
+ d(o) && /* @__PURE__ */ n(o, { className: s(t.common.icon, t.sizes[a].icon) }),
54
+ l(o) && o,
55
+ r,
56
+ d(e) && /* @__PURE__ */ n(e, { className: s(t.common.icon, t.sizes[a].icon) }),
57
+ l(e) && e
58
+ ]
59
+ }
60
+ );
61
+ }, C = ({ children: o, size: e = "md", className: r, ...i }) => /* @__PURE__ */ n(c.Provider, { value: { size: e }, children: /* @__PURE__ */ n(
62
+ g,
63
+ {
64
+ selectionMode: "single",
65
+ className: s("relative z-0 inline-flex w-max -space-x-px rounded-lg shadow-xs", r),
66
+ ...i,
67
+ children: o
68
+ }
69
+ ) });
70
+ export {
71
+ C as ButtonGroup,
72
+ B as ButtonGroupItem
73
+ };
@@ -0,0 +1,2 @@
1
+ export { ButtonGroup, ButtonGroupItem, type ButtonGroupProps, type ButtonGroupItemProps } from './button-group';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/button-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,KAAK,gBAAgB,EAAE,KAAK,oBAAoB,EAAE,MAAM,gBAAgB,CAAC"}
@@ -0,0 +1,16 @@
1
+ import { ComponentProps } from 'react';
2
+ import { FileIcon } from '@untitledui/file-icons';
3
+ /**
4
+ * File-type icons (PDF, DOCX, XLSX, images, …) from Untitled UI, re-exported so consumers
5
+ * import them from the design system rather than `@untitledui/file-icons` directly.
6
+ *
7
+ * @example
8
+ * <FileIcon type="pdf" size={24} />
9
+ * <FileIcon type="xlsx" variant="solid" size={28} />
10
+ */
11
+ export { FileIcon };
12
+ /** The `type` a `FileIcon` accepts: a file extension such as `"pdf"`, or `"empty"` / `"folder"` / … */
13
+ export type FileIconType = ComponentProps<typeof FileIcon>["type"];
14
+ /** All props of `FileIcon`. */
15
+ export type FileIconProps = ComponentProps<typeof FileIcon>;
16
+ //# sourceMappingURL=file-icon.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"file-icon.d.ts","sourceRoot":"","sources":["../../../src/primitives/file-icon/file-icon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD;;;;;;;GAOG;AACH,OAAO,EAAE,QAAQ,EAAE,CAAC;AAEpB,uGAAuG;AACvG,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;AAEnE,+BAA+B;AAC/B,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { FileIcon, type FileIconType, type FileIconProps } from './file-icon';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/file-icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC"}
@@ -1,4 +1,5 @@
1
1
  export { Input, InputBase, TextField, type InputProps, type InputBaseProps, type TextFieldProps } from './input';
2
2
  export { Label, type LabelProps } from './label';
3
3
  export { HintText, type HintTextProps } from './hint-text';
4
+ export { InputGroup, InputPrefix, type InputGroupProps, type InputPrefixProps } from './input-group';
4
5
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,UAAU,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AACjH,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,UAAU,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AACjH,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,eAAe,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC"}
@@ -0,0 +1,31 @@
1
+ import { HTMLAttributes, ReactNode } from 'react';
2
+ import { InputBaseProps } from './input';
3
+ export interface InputPrefixProps extends HTMLAttributes<HTMLDivElement> {
4
+ /** The position of the prefix. */
5
+ position?: "leading" | "trailing";
6
+ /** The size of the prefix. */
7
+ size?: "sm" | "md";
8
+ /** Indicates that the prefix is disabled. */
9
+ isDisabled?: boolean;
10
+ }
11
+ export declare const InputPrefix: ({ isDisabled, children, ...props }: InputPrefixProps) => import("react/jsx-runtime").JSX.Element;
12
+ export interface InputGroupProps extends Omit<InputBaseProps, "type" | "icon" | "placeholder" | "tooltip" | "shortcut" | `${string}ClassName`> {
13
+ /** A prefix text that is displayed in the same box as the input.*/
14
+ prefix?: string;
15
+ /** A leading addon that is displayed with visual separation from the input. */
16
+ leadingAddon?: ReactNode;
17
+ /** A trailing addon that is displayed with visual separation from the input. */
18
+ trailingAddon?: ReactNode;
19
+ /** The class name to apply to the input group. */
20
+ className?: string;
21
+ /** The children of the input group (i.e `<InputBase />`) */
22
+ children: ReactNode;
23
+ /** The class name to apply to the input. */
24
+ inputClassName?: string;
25
+ }
26
+ export declare const InputGroup: {
27
+ ({ size, isReadOnly, prefix, leadingAddon, trailingAddon, label, hint, children, ...props }: InputGroupProps): import("react/jsx-runtime").JSX.Element;
28
+ Prefix: ({ isDisabled, children, ...props }: InputPrefixProps) => import("react/jsx-runtime").JSX.Element;
29
+ displayName: string;
30
+ };
31
+ //# sourceMappingURL=input-group.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../src/primitives/input/input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5D,OAAO,EAAE,KAAK,cAAc,EAAa,MAAM,SAAS,CAAC;AAGzD,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,kCAAkC;IAClC,QAAQ,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAClC,8BAA8B;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,GAAI,oCAAoC,gBAAgB,4CAmB/E,CAAC;AAGF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CACzC,cAAc,EACd,MAAM,GAAG,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,UAAU,GAAG,GAAG,MAAM,WAAW,CAClF;IACG,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+EAA+E;IAC/E,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,gFAAgF;IAChF,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,QAAQ,EAAE,SAAS,CAAC;IACpB,4CAA4C;IAC5C,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU;iGAUpB,eAAe;iDAlD8C,gBAAgB;;CAmJ/E,CAAC"}
@@ -0,0 +1,116 @@
1
+ import { jsx as a, jsxs as x, Fragment as y } from "react/jsx-runtime";
2
+ import { sortCx as T, cx as e } from "../../utils/cn.js";
3
+ import { HintText as C } from "./hint-text.js";
4
+ import { TextField as v } from "./input.js";
5
+ import { Label as z } from "./label.js";
6
+ const _ = ({ isDisabled: t, children: s, ...r }) => /* @__PURE__ */ a(
7
+ "span",
8
+ {
9
+ ...r,
10
+ className: e(
11
+ "flex text-md text-tertiary",
12
+ // Styles when the prefix is within an `InputGroup`
13
+ "in-data-input-wrapper:in-data-leading:-mr-px in-data-input-wrapper:in-data-leading:rounded-l-lg",
14
+ "in-data-input-wrapper:in-data-trailing:-ml-px in-data-input-wrapper:in-data-trailing:rounded-r-lg",
15
+ // Size styles based on size when within an `InputGroup`
16
+ "in-data-input-wrapper:in-data-[input-size=md]:py-2.5 in-data-input-wrapper:in-data-[input-size=md]:pr-3 in-data-input-wrapper:in-data-[input-size=md]:pl-3.5 in-data-input-wrapper:in-data-[input-size=sm]:px-3 in-data-input-wrapper:in-data-[input-size=sm]:py-2",
17
+ // Disabled styles
18
+ t && "border-disabled bg-disabled_subtle text-tertiary",
19
+ "in-data-input-wrapper:group-disabled:bg-disabled_subtle in-data-input-wrapper:group-disabled:text-disabled in-data-input-wrapper:group-disabled:ring-border-disabled",
20
+ r.className
21
+ ),
22
+ children: s
23
+ }
24
+ ), w = ({
25
+ size: t = "sm",
26
+ isReadOnly: s,
27
+ prefix: r,
28
+ leadingAddon: n,
29
+ trailingAddon: l,
30
+ label: d,
31
+ hint: o,
32
+ children: f,
33
+ ...u
34
+ }) => {
35
+ var g;
36
+ const i = !!n, p = !!l, c = T({
37
+ sm: {
38
+ input: e(
39
+ // Apply padding styles when select element is passed as a child
40
+ i && "group-has-[&>select]:px-2.5 group-has-[&>select]:pl-2.5",
41
+ p && (r ? "group-has-[&>select]:pr-6 group-has-[&>select]:pl-0" : "group-has-[&>select]:pr-6 group-has-[&>select]:pl-3")
42
+ ),
43
+ leadingText: "pl-3"
44
+ },
45
+ md: {
46
+ input: e(
47
+ // Apply padding styles when select element is passed as a child
48
+ i && "group-has-[&>select]:px-3 group-has-[&>select]:pl-3",
49
+ p && (r ? "group-has-[&>select]:pr-6 group-has-[&>select]:pl-0" : "group-has-[&>select]:pr-6 group-has-[&>select]:pl-3")
50
+ ),
51
+ leadingText: "pl-3.5"
52
+ }
53
+ });
54
+ return /* @__PURE__ */ a(
55
+ v,
56
+ {
57
+ size: t,
58
+ isReadOnly: s,
59
+ "aria-label": d || void 0,
60
+ inputClassName: e((g = c[t]) == null ? void 0 : g.input),
61
+ tooltipClassName: e(p && !i && "group-has-[&>select]:right-0"),
62
+ wrapperClassName: e(
63
+ "z-10",
64
+ // Apply styles based on the presence of leading or trailing elements
65
+ i && "rounded-l-none",
66
+ p && "rounded-r-none",
67
+ // When select element is passed as a child
68
+ "group-has-[&>select]:bg-transparent group-has-[&>select]:shadow-none group-has-[&>select]:ring-0 group-has-[&>select]:focus-within:ring-0",
69
+ // In `Input` component, there is "group-disabled" class so here we need to use "group-disabled:group-has-[&>select]" to avoid conflict
70
+ "group-disabled:group-has-[&>select]:bg-transparent",
71
+ u.inputClassName
72
+ ),
73
+ ...u,
74
+ children: ({ isDisabled: h, isInvalid: m, isRequired: N }) => {
75
+ var b;
76
+ return /* @__PURE__ */ x(y, { children: [
77
+ d && /* @__PURE__ */ a(z, { isRequired: N, className: "text-xs", children: d }),
78
+ /* @__PURE__ */ x(
79
+ "div",
80
+ {
81
+ "data-input-size": t,
82
+ className: e(
83
+ "group relative flex h-max w-full flex-row justify-center rounded-lg bg-primary border border-secondary transition-all duration-100 ease-linear",
84
+ // Only apply focus ring when child is select and input is focused (not read-only)
85
+ "has-[&>select]:shadow-xs has-[&>select]:ring-1 has-[&>select]:ring-border-primary has-[&>select]:ring-inset",
86
+ !s && "has-[&>select]:has-[input:focus]:ring-2 has-[&>select]:has-[input:focus]:ring-border-brand",
87
+ s && "cursor-default has-[&>select]:has-[input:focus]:ring-1 has-[&>select]:has-[input:focus]:ring-border-primary",
88
+ h && "cursor-not-allowed has-[&>select]:bg-disabled_subtle has-[&>select]:ring-border-disabled",
89
+ m && !s && "has-[&>select]:ring-border-error_subtle has-[&>select]:has-[input:focus]:ring-border-error"
90
+ ),
91
+ children: [
92
+ n && /* @__PURE__ */ a("section", { "data-leading": i || void 0, children: n }),
93
+ r && /* @__PURE__ */ a(
94
+ "span",
95
+ {
96
+ className: e("my-auto grow pr-2", (b = c[t]) == null ? void 0 : b.leadingText),
97
+ children: /* @__PURE__ */ a("p", { className: e("text-md text-tertiary", h && "text-disabled"), children: r })
98
+ }
99
+ ),
100
+ f,
101
+ l && /* @__PURE__ */ a("section", { "data-trailing": p || void 0, children: l })
102
+ ]
103
+ }
104
+ ),
105
+ o && /* @__PURE__ */ a(C, { isInvalid: m, children: o })
106
+ ] });
107
+ }
108
+ }
109
+ );
110
+ };
111
+ w.Prefix = _;
112
+ w.displayName = "InputGroup";
113
+ export {
114
+ w as InputGroup,
115
+ _ as InputPrefix
116
+ };
@@ -0,0 +1,2 @@
1
+ export { ProgressBar, ProgressBarBase, type ProgressBarProps, type ProgressIndicatorWithTextProps } from './progress-bar';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/progress-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,KAAK,gBAAgB,EAAE,KAAK,8BAA8B,EAAE,MAAM,gBAAgB,CAAC"}
@@ -0,0 +1,52 @@
1
+ export interface ProgressBarProps {
2
+ /**
3
+ * The current value of the progress bar.
4
+ */
5
+ value: number;
6
+ /**
7
+ * The minimum value of the progress bar.
8
+ * @default 0
9
+ */
10
+ min?: number;
11
+ /**
12
+ * The maximum value of the progress bar.
13
+ * @default 100
14
+ */
15
+ max?: number;
16
+ /**
17
+ * Optional additional CSS class names for the progress bar container.
18
+ */
19
+ className?: string;
20
+ /**
21
+ * Optional additional CSS class names for the progress bar indicator element.
22
+ */
23
+ progressClassName?: string;
24
+ /**
25
+ * Optional function to format the displayed value.
26
+ * It receives the raw value and the calculated percentage.
27
+ */
28
+ valueFormatter?: (value: number, valueInPercentage: number) => string | number;
29
+ /** Accessible name for the progress bar. */
30
+ "aria-label"?: string;
31
+ }
32
+ /**
33
+ * A basic progress bar component.
34
+ */
35
+ export declare const ProgressBarBase: ({ value, min, max, className, progressClassName, "aria-label": ariaLabel, }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
36
+ type ProgressBarLabelPosition = "right" | "bottom" | "top-floating" | "bottom-floating";
37
+ export interface ProgressIndicatorWithTextProps extends ProgressBarProps {
38
+ /**
39
+ * Specifies the layout of the text relative to the progress bar.
40
+ * - `right`: Text is displayed to the right of the progress bar.
41
+ * - `bottom`: Text is displayed below the progress bar, aligned to the right.
42
+ * - `top-floating`: Text is displayed in a floating tooltip above the progress indicator.
43
+ * - `bottom-floating`: Text is displayed in a floating tooltip below the progress indicator.
44
+ */
45
+ labelPosition?: ProgressBarLabelPosition;
46
+ }
47
+ /**
48
+ * A progress bar component that displays the value text in various configurable layouts.
49
+ */
50
+ export declare const ProgressBar: ({ value, min, max, valueFormatter, labelPosition, className, progressClassName, "aria-label": ariaLabel, }: ProgressIndicatorWithTextProps) => import("react/jsx-runtime").JSX.Element;
51
+ export {};
52
+ //# sourceMappingURL=progress-bar.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"progress-bar.d.ts","sourceRoot":"","sources":["../../../src/primitives/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,gBAAgB;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAC;IAC/E,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAMD;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,6EAO7B,gBAAgB,4CAsBlB,CAAC;AAEF,KAAK,wBAAwB,GAAG,OAAO,GAAG,QAAQ,GAAG,cAAc,GAAG,iBAAiB,CAAC;AAExF,MAAM,WAAW,8BAA+B,SAAQ,gBAAgB;IACpE;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,wBAAwB,CAAC;CAC5C;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,4GASzB,8BAA8B,4CA0DhC,CAAC"}
@@ -0,0 +1,96 @@
1
+ import { jsx as a, jsxs as i } from "react/jsx-runtime";
2
+ import { cx as g } from "../../utils/cn.js";
3
+ const u = (r, e, t) => t > e ? Math.min(100, Math.max(0, (r - e) * 100 / (t - e))) : 0, x = ({
4
+ value: r,
5
+ min: e = 0,
6
+ max: t = 100,
7
+ className: l,
8
+ progressClassName: d,
9
+ "aria-label": c
10
+ }) => {
11
+ const m = u(r, e, t);
12
+ return /* @__PURE__ */ a(
13
+ "div",
14
+ {
15
+ role: "progressbar",
16
+ "aria-label": c,
17
+ "aria-valuenow": r,
18
+ "aria-valuemin": e,
19
+ "aria-valuemax": t,
20
+ className: g("h-2 w-full overflow-hidden rounded-md bg-quaternary", l),
21
+ children: /* @__PURE__ */ a(
22
+ "div",
23
+ {
24
+ style: { transform: `translateX(-${100 - m}%)` },
25
+ className: g(
26
+ "size-full rounded-md bg-fg-brand-primary transition duration-75 ease-linear",
27
+ d
28
+ )
29
+ }
30
+ )
31
+ }
32
+ );
33
+ }, h = ({
34
+ value: r,
35
+ min: e = 0,
36
+ max: t = 100,
37
+ valueFormatter: l,
38
+ labelPosition: d,
39
+ className: c,
40
+ progressClassName: m,
41
+ "aria-label": f
42
+ }) => {
43
+ const n = u(r, e, t), o = l ? l(r, n) : `${n.toFixed(0)}%`, s = /* @__PURE__ */ a(
44
+ x,
45
+ {
46
+ min: e,
47
+ max: t,
48
+ value: r,
49
+ className: c,
50
+ progressClassName: m,
51
+ "aria-label": f
52
+ }
53
+ );
54
+ switch (d) {
55
+ case "right":
56
+ return /* @__PURE__ */ i("div", { className: "flex items-center gap-3", children: [
57
+ s,
58
+ /* @__PURE__ */ a("span", { className: "shrink-0 text-sm font-medium text-secondary tabular-nums", children: o })
59
+ ] });
60
+ case "bottom":
61
+ return /* @__PURE__ */ i("div", { className: "flex flex-col items-end gap-2", children: [
62
+ s,
63
+ /* @__PURE__ */ a("span", { className: "text-sm font-medium text-secondary tabular-nums", children: o })
64
+ ] });
65
+ case "top-floating":
66
+ return /* @__PURE__ */ i("div", { className: "relative flex flex-col items-end gap-2", children: [
67
+ s,
68
+ /* @__PURE__ */ a(
69
+ "div",
70
+ {
71
+ style: { left: `${n}%` },
72
+ className: "absolute -top-2 -translate-x-1/2 -translate-y-full rounded-lg bg-primary_alt px-3 py-2 shadow-lg ring-1 ring-secondary_alt",
73
+ children: /* @__PURE__ */ a("div", { className: "text-xs font-semibold text-secondary tabular-nums", children: o })
74
+ }
75
+ )
76
+ ] });
77
+ case "bottom-floating":
78
+ return /* @__PURE__ */ i("div", { className: "relative flex flex-col items-end gap-2", children: [
79
+ s,
80
+ /* @__PURE__ */ a(
81
+ "div",
82
+ {
83
+ style: { left: `${n}%` },
84
+ className: "absolute -bottom-2 -translate-x-1/2 translate-y-full rounded-lg bg-primary_alt px-3 py-2 shadow-lg ring-1 ring-secondary_alt",
85
+ children: /* @__PURE__ */ a("div", { className: "text-xs font-semibold text-secondary", children: o })
86
+ }
87
+ )
88
+ ] });
89
+ default:
90
+ return s;
91
+ }
92
+ };
93
+ export {
94
+ h as ProgressBar,
95
+ x as ProgressBarBase
96
+ };
@@ -0,0 +1,2 @@
1
+ export { SegmentedControl, type SegmentedControlOption, type SegmentedControlProps } from './segmented-control';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/segmented-control/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,KAAK,sBAAsB,EAAE,KAAK,qBAAqB,EAAE,MAAM,qBAAqB,CAAC"}
@@ -0,0 +1,21 @@
1
+ export interface SegmentedControlOption {
2
+ label: string;
3
+ onClick: () => void;
4
+ /** Shown after the label; a shimmer stands in while `isLoading`. */
5
+ count?: number;
6
+ }
7
+ export interface SegmentedControlProps {
8
+ buttonsArray: SegmentedControlOption[];
9
+ /** Controlled active option. Without it the control starts on the first option and tracks clicks itself. */
10
+ activeIndex?: number;
11
+ isLoading?: boolean;
12
+ buttonDisabled?: boolean;
13
+ /** Called after an option's own `onClick`, e.g. for analytics. */
14
+ onChange?: (index: number, option: SegmentedControlOption) => void;
15
+ }
16
+ /**
17
+ * A row of text buttons where one is active (brand-tinted, `aria-pressed`), each with an optional
18
+ * count. Used for view filters such as the notification panel's All / Unread / Mentions.
19
+ */
20
+ export declare const SegmentedControl: ({ buttonsArray, activeIndex: controlledIndex, isLoading, buttonDisabled, onChange, }: SegmentedControlProps) => import("react/jsx-runtime").JSX.Element;
21
+ //# sourceMappingURL=segmented-control.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../src/primitives/segmented-control/segmented-control.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,sBAAsB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,qBAAqB;IAClC,YAAY,EAAE,sBAAsB,EAAE,CAAC;IACvC,4GAA4G;IAC5G,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;CACtE;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,GAAI,sFAM9B,qBAAqB,4CAgDvB,CAAC"}
@@ -0,0 +1,43 @@
1
+ import { jsx as a, jsxs as p, Fragment as n } from "react/jsx-runtime";
2
+ import { useState as v, useEffect as b } from "react";
3
+ import { cx as f } from "../../utils/cn.js";
4
+ import { Button as h } from "../button/button.js";
5
+ import g from "../shimmer/shimmer.js";
6
+ const S = ({
7
+ buttonsArray: i,
8
+ activeIndex: o,
9
+ isLoading: l = !1,
10
+ buttonDisabled: m,
11
+ onChange: c
12
+ }) => {
13
+ const [s, t] = v(o ?? 0);
14
+ b(() => {
15
+ o !== void 0 && t(o);
16
+ }, [o]);
17
+ const d = (r) => {
18
+ var e;
19
+ t(r), (e = i[r]) == null || e.onClick(), i[r] && (c == null || c(r, i[r]));
20
+ };
21
+ return /* @__PURE__ */ a("div", { className: "inline-flex gap-1", children: i.map((r, e) => /* @__PURE__ */ p(
22
+ h,
23
+ {
24
+ onClick: () => d(e),
25
+ size: "xs",
26
+ color: "tertiary",
27
+ className: f(
28
+ "h-8 px-3 border-0 border-white cursor-pointer text-xs font-medium text-[var(--color-gray-600)] transition-all duration-150",
29
+ s === e && "text-[var(--color-text-brand-tertiary)] rounded-sm bg-[var(--color-bg-brand-primary)] border border-[var(--color-border-brand)] hover:bg-[var(--color-bg-brand-primary)]"
30
+ ),
31
+ isDisabled: m,
32
+ "aria-pressed": s === e,
33
+ children: [
34
+ /* @__PURE__ */ a("span", { children: r.label }),
35
+ r.count !== void 0 && /* @__PURE__ */ a(n, { children: l ? /* @__PURE__ */ a(g, { className: "ml-1 inline-block", children: /* @__PURE__ */ a("div", { className: "bg-gray-200 rounded h-3.5 w-4" }) }) : /* @__PURE__ */ a("span", { className: "ml-1 ", children: r.count }) })
36
+ ]
37
+ },
38
+ e
39
+ )) });
40
+ };
41
+ export {
42
+ S as SegmentedControl
43
+ };
@@ -0,0 +1,3 @@
1
+ export { Slider, type SliderProps } from './slider';
2
+ export { RangeSlider, type RangeSliderProps, type RangeSliderZoneLabel } from './range-slider';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/slider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,oBAAoB,EAAE,MAAM,gBAAgB,CAAC"}
@@ -0,0 +1,24 @@
1
+ export interface RangeSliderZoneLabel {
2
+ title: string;
3
+ value: string;
4
+ }
5
+ export interface RangeSliderProps {
6
+ minValue: number;
7
+ maxValue: number;
8
+ step?: number;
9
+ value: [number, number];
10
+ onChange: (value: [number, number]) => void;
11
+ isDisabled?: boolean;
12
+ marks?: number[];
13
+ zoneLabels?: {
14
+ left: RangeSliderZoneLabel;
15
+ middle: RangeSliderZoneLabel;
16
+ right: RangeSliderZoneLabel;
17
+ };
18
+ leftSegmentClassName?: string;
19
+ middleSegmentClassName?: string;
20
+ rightSegmentClassName?: string;
21
+ trackClassName?: string;
22
+ }
23
+ export declare function RangeSlider({ minValue, maxValue, step, value, onChange, isDisabled, marks, zoneLabels, leftSegmentClassName, middleSegmentClassName, rightSegmentClassName, trackClassName, }: RangeSliderProps): import("react/jsx-runtime").JSX.Element;
24
+ //# sourceMappingURL=range-slider.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"range-slider.d.ts","sourceRoot":"","sources":["../../../src/primitives/slider/range-slider.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,oBAAoB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,UAAU,CAAC,EAAE;QACT,IAAI,EAAE,oBAAoB,CAAC;QAC3B,MAAM,EAAE,oBAAoB,CAAC;QAC7B,KAAK,EAAE,oBAAoB,CAAC;KAC/B,CAAC;IACF,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,wBAAgB,WAAW,CAAC,EACxB,QAAQ,EACR,QAAQ,EACR,IAAQ,EACR,KAAK,EACL,QAAQ,EACR,UAAkB,EAClB,KAAK,EACL,UAAU,EACV,oBAA6C,EAC7C,sBAAuC,EACvC,qBAAgD,EAChD,cAA+B,GAClC,EAAE,gBAAgB,2CAkHlB"}