@jbpark/ui-kit 10.1.0 → 10.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (91) hide show
  1. package/dist/Alert.d.mts +24 -0
  2. package/dist/Alert.d.mts.map +1 -0
  3. package/dist/Alert.mjs +68 -0
  4. package/dist/Alert.mjs.map +1 -0
  5. package/dist/Avatar.d.mts +19 -0
  6. package/dist/Avatar.d.mts.map +1 -0
  7. package/dist/Avatar.mjs +43 -0
  8. package/dist/Avatar.mjs.map +1 -0
  9. package/dist/Badge.d.mts +23 -0
  10. package/dist/Badge.d.mts.map +1 -0
  11. package/dist/Badge.mjs +41 -0
  12. package/dist/Badge.mjs.map +1 -0
  13. package/dist/Button.mjs +1 -1
  14. package/dist/Pagination.mjs +1 -1
  15. package/dist/Segmented.d.mts +26 -0
  16. package/dist/Segmented.d.mts.map +1 -0
  17. package/dist/Segmented.mjs +57 -0
  18. package/dist/Segmented.mjs.map +1 -0
  19. package/dist/Steps.d.mts +28 -0
  20. package/dist/Steps.d.mts.map +1 -0
  21. package/dist/Steps.mjs +70 -0
  22. package/dist/Steps.mjs.map +1 -0
  23. package/dist/components/atoms/checkbox/checkbox.mjs +1 -1
  24. package/dist/components/atoms/date-picker.mjs +1 -1
  25. package/dist/components/atoms/float-button/back-top.mjs +1 -1
  26. package/dist/components/atoms/index.d.mts +5 -1
  27. package/dist/components/atoms/input/index.d.mts +3 -1
  28. package/dist/components/atoms/input/index.d.mts.map +1 -1
  29. package/dist/components/atoms/input/index.mjs +3 -1
  30. package/dist/components/atoms/input/index.mjs.map +1 -1
  31. package/dist/components/atoms/input/number.d.mts +23 -0
  32. package/dist/components/atoms/input/number.d.mts.map +1 -0
  33. package/dist/components/atoms/input/number.mjs +71 -0
  34. package/dist/components/atoms/input/number.mjs.map +1 -0
  35. package/dist/components/atoms/input/search.d.mts +0 -5
  36. package/dist/components/atoms/input/search.d.mts.map +1 -1
  37. package/dist/components/atoms/input/search.mjs +5 -7
  38. package/dist/components/atoms/input/search.mjs.map +1 -1
  39. package/dist/components/atoms/progress.d.mts +3 -1
  40. package/dist/components/atoms/progress.d.mts.map +1 -1
  41. package/dist/components/atoms/progress.mjs +2 -2
  42. package/dist/components/atoms/progress.mjs.map +1 -1
  43. package/dist/components/atoms/radio/radio.mjs +1 -1
  44. package/dist/components/atoms/rich-text-editor/rich-text-editor.d.mts +6 -1
  45. package/dist/components/atoms/rich-text-editor/rich-text-editor.d.mts.map +1 -1
  46. package/dist/components/atoms/rich-text-editor/rich-text-editor.mjs +7 -2
  47. package/dist/components/atoms/rich-text-editor/rich-text-editor.mjs.map +1 -1
  48. package/dist/components/atoms/rich-text-editor/toolbar-presets.mjs +1 -1
  49. package/dist/components/atoms/select-multiple.mjs +1 -1
  50. package/dist/components/atoms/select.d.mts +1 -1
  51. package/dist/components/atoms/select.mjs +1 -1
  52. package/dist/components/atoms/select.mjs.map +1 -1
  53. package/dist/components/atoms/skeleton/skeleton.d.mts +3 -1
  54. package/dist/components/atoms/skeleton/skeleton.d.mts.map +1 -1
  55. package/dist/components/atoms/skeleton/skeleton.mjs +2 -2
  56. package/dist/components/atoms/skeleton/skeleton.mjs.map +1 -1
  57. package/dist/components/molecules/collapse.d.mts +8 -8
  58. package/dist/components/molecules/collapse.d.mts.map +1 -1
  59. package/dist/components/molecules/collapse.mjs +11 -2
  60. package/dist/components/molecules/collapse.mjs.map +1 -1
  61. package/dist/components/molecules/index.d.mts +15 -13
  62. package/dist/components/molecules/menu/item/item.mjs +1 -1
  63. package/dist/components/molecules/menu/menu.d.mts +1 -1
  64. package/dist/components/molecules/menu/menu.d.mts.map +1 -1
  65. package/dist/components/molecules/menu/menu.mjs +3 -1
  66. package/dist/components/molecules/menu/menu.mjs.map +1 -1
  67. package/dist/components/molecules/tabs.d.mts +6 -2
  68. package/dist/components/molecules/tabs.d.mts.map +1 -1
  69. package/dist/components/molecules/tabs.mjs +5 -1
  70. package/dist/components/molecules/tabs.mjs.map +1 -1
  71. package/dist/components/molecules/upload.mjs +1 -1
  72. package/dist/components/organisms/drawer.d.mts +1 -1
  73. package/dist/components/organisms/drawer.d.mts.map +1 -1
  74. package/dist/components/organisms/drawer.mjs +3 -2
  75. package/dist/components/organisms/drawer.mjs.map +1 -1
  76. package/dist/components/organisms/modal.mjs +1 -1
  77. package/dist/components/organisms/toast.mjs +1 -1
  78. package/dist/components/templates/layout/sider.mjs +1 -1
  79. package/dist/core/accordion.mjs +1 -1
  80. package/dist/core/badge.d.mts +1 -1
  81. package/dist/core/button.d.mts +1 -1
  82. package/dist/core/calendar.mjs +1 -1
  83. package/dist/core/checkbox.mjs +1 -1
  84. package/dist/core/combobox.mjs +1 -1
  85. package/dist/core/dialog.mjs +1 -1
  86. package/dist/core/radio-group.mjs +1 -1
  87. package/dist/core/select.mjs +1 -1
  88. package/dist/index.d.mts +39 -33
  89. package/dist/index.mjs +6 -1
  90. package/dist/style.css +193 -0
  91. package/package.json +26 -1
@@ -0,0 +1,24 @@
1
+ //#region src/components/molecules/alert.d.ts
2
+ type Status = 'info' | 'success' | 'warning' | 'error';
3
+ interface Props extends Omit<React.ComponentPropsWithRef<'div'>, 'title'> {
4
+ status?: Status;
5
+ variant?: 'outlined' | 'filled';
6
+ title: React.ReactNode;
7
+ description?: React.ReactNode;
8
+ /** Pass `null` to hide the status icon. */
9
+ icon?: React.ReactNode;
10
+ action?: React.ReactNode;
11
+ closable?: boolean;
12
+ onClose?: () => void;
13
+ classNames?: {
14
+ icon?: string;
15
+ title?: string;
16
+ description?: string;
17
+ action?: string;
18
+ close?: string;
19
+ };
20
+ }
21
+ declare const Alert: ({ status, variant, title, description, icon, action, closable, onClose, className, classNames, role, ...props }: Props) => import("react").JSX.Element | null;
22
+ //#endregion
23
+ export { Props, Alert as default };
24
+ //# sourceMappingURL=Alert.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Alert.d.mts","names":[],"sources":["../src/components/molecules/alert.tsx"],"mappings":";KAWK;UAEY,cAAc,KAC7B,MAAM;EAGN,SAAS;EACT;EACA,OAAO,MAAM;EACb,cAAc,MAAM;;EAEpB,OAAO,MAAM;EACb,SAAS,MAAM;EACf;EACA;EACA;IACE;IACA;IACA;IACA;IACA;;;cAWE,UAAS,QAAA,SAAA,OAAA,aAAA,MAAA,QAAA,UAAA,SAAA,WAAA,YAAA,SAAA,SAaZ,0BAAK,IAAA"}
package/dist/Alert.mjs ADDED
@@ -0,0 +1,68 @@
1
+ "use client";
2
+ import { cn } from "./utils.mjs";
3
+ import { DEFAULT_LOCALE, useConfig } from "./providers/config/context.mjs";
4
+ import Button from "./Button.mjs";
5
+ import { Check, Info, OctagonAlert, OctagonX, X } from "lucide-react";
6
+ import { useState } from "react";
7
+ import { jsx, jsxs } from "react/jsx-runtime";
8
+ //#region src/components/molecules/alert.tsx
9
+ const STATUS_ICONS = {
10
+ info: /* @__PURE__ */ jsx(Info, {}),
11
+ success: /* @__PURE__ */ jsx(Check, {}),
12
+ warning: /* @__PURE__ */ jsx(OctagonAlert, {}),
13
+ error: /* @__PURE__ */ jsx(OctagonX, {})
14
+ };
15
+ const Alert = ({ status = "info", variant = "outlined", title, description, icon, action, closable = false, onClose, className, classNames, role = "status", ...props }) => {
16
+ const { locale } = useConfig();
17
+ const [visible, setVisible] = useState(true);
18
+ const renderedIcon = icon === void 0 ? STATUS_ICONS[status] : icon;
19
+ if (!visible) return null;
20
+ return /* @__PURE__ */ jsxs("div", {
21
+ ...props,
22
+ "data-slot": "alert",
23
+ "data-status": status,
24
+ "data-variant": variant,
25
+ role,
26
+ className: cn("flex w-full items-start gap-3 rounded-lg border p-4", className),
27
+ children: [
28
+ renderedIcon && /* @__PURE__ */ jsx("span", {
29
+ "aria-hidden": "true",
30
+ className: cn("mt-0.5 shrink-0 [&_svg]:size-5", classNames?.icon),
31
+ children: renderedIcon
32
+ }),
33
+ /* @__PURE__ */ jsxs("div", {
34
+ className: "min-w-0 flex-1",
35
+ children: [
36
+ /* @__PURE__ */ jsx("div", {
37
+ className: cn("text-sm font-semibold", classNames?.title),
38
+ children: title
39
+ }),
40
+ description && /* @__PURE__ */ jsx("div", {
41
+ className: cn("text-muted-foreground mt-1 text-sm", classNames?.description),
42
+ children: description
43
+ }),
44
+ action && /* @__PURE__ */ jsx("div", {
45
+ className: cn("mt-3", classNames?.action),
46
+ children: action
47
+ })
48
+ ]
49
+ }),
50
+ closable && /* @__PURE__ */ jsx(Button, {
51
+ variant: "text",
52
+ shape: "circle",
53
+ size: "small",
54
+ "aria-label": locale.close ?? DEFAULT_LOCALE.close,
55
+ icon: /* @__PURE__ */ jsx(X, {}),
56
+ className: classNames?.close,
57
+ onClick: () => {
58
+ onClose?.();
59
+ setVisible(false);
60
+ }
61
+ })
62
+ ]
63
+ });
64
+ };
65
+ //#endregion
66
+ export { Alert as default };
67
+
68
+ //# sourceMappingURL=Alert.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Alert.mjs","names":[],"sources":["../src/components/molecules/alert.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { Check, Info, OctagonAlert, OctagonX, X } from 'lucide-react';\n\nimport { DEFAULT_LOCALE, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport Button from '../atoms/button';\n\ntype Status = 'info' | 'success' | 'warning' | 'error';\n\nexport interface Props extends Omit<\n React.ComponentPropsWithRef<'div'>,\n 'title'\n> {\n status?: Status;\n variant?: 'outlined' | 'filled';\n title: React.ReactNode;\n description?: React.ReactNode;\n /** Pass `null` to hide the status icon. */\n icon?: React.ReactNode;\n action?: React.ReactNode;\n closable?: boolean;\n onClose?: () => void;\n classNames?: {\n icon?: string;\n title?: string;\n description?: string;\n action?: string;\n close?: string;\n };\n}\n\nconst STATUS_ICONS: Record<Status, React.ReactNode> = {\n info: <Info />,\n success: <Check />,\n warning: <OctagonAlert />,\n error: <OctagonX />,\n};\n\nconst Alert = ({\n status = 'info',\n variant = 'outlined',\n title,\n description,\n icon,\n action,\n closable = false,\n onClose,\n className,\n classNames,\n role = 'status',\n ...props\n}: Props) => {\n const { locale } = useConfig();\n const [visible, setVisible] = useState(true);\n const renderedIcon = icon === undefined ? STATUS_ICONS[status] : icon;\n\n if (!visible) {\n return null;\n }\n\n return (\n <div\n {...props}\n data-slot=\"alert\"\n data-status={status}\n data-variant={variant}\n role={role}\n className={cn(\n 'flex w-full items-start gap-3 rounded-lg border p-4',\n className,\n //\n )}\n >\n {renderedIcon && (\n <span\n aria-hidden=\"true\"\n className={cn(\n 'mt-0.5 shrink-0 [&_svg]:size-5',\n classNames?.icon,\n //\n )}\n >\n {renderedIcon}\n </span>\n )}\n <div className=\"min-w-0 flex-1\">\n <div\n className={cn(\n 'text-sm font-semibold',\n classNames?.title,\n //\n )}\n >\n {title}\n </div>\n {description && (\n <div\n className={cn(\n 'text-muted-foreground mt-1 text-sm',\n classNames?.description,\n //\n )}\n >\n {description}\n </div>\n )}\n {action && (\n <div\n className={cn(\n 'mt-3',\n classNames?.action,\n //\n )}\n >\n {action}\n </div>\n )}\n </div>\n {closable && (\n <Button\n variant=\"text\"\n shape=\"circle\"\n size=\"small\"\n aria-label={locale.close ?? DEFAULT_LOCALE.close}\n icon={<X />}\n className={classNames?.close}\n onClick={() => {\n onClose?.();\n setVisible(false);\n }}\n />\n )}\n </div>\n );\n};\n\nexport default Alert;\n"],"mappings":";;;;;;;;AAmCA,MAAM,eAAgD;CACpD,MAAM,oBAAC,MAAD,CAAO,CAAA;CACb,SAAS,oBAAC,OAAD,CAAQ,CAAA;CACjB,SAAS,oBAAC,cAAD,CAAe,CAAA;CACxB,OAAO,oBAAC,UAAD,CAAW,CAAA;AACpB;AAEA,MAAM,SAAS,EACb,SAAS,QACT,UAAU,YACV,OACA,aACA,MACA,QACA,WAAW,OACX,SACA,WACA,YACA,OAAO,UACP,GAAG,YACQ;CACX,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,CAAC,SAAS,cAAc,SAAS,IAAI;CAC3C,MAAM,eAAe,SAAS,KAAA,IAAY,aAAa,UAAU;CAEjE,IAAI,CAAC,SACH,OAAO;CAGT,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,eAAa;EACb,gBAAc;EACR;EACN,WAAW,GACT,uDACA,SAEF;EAVF,UAAA;GAYG,gBACC,oBAAC,QAAD;IACE,eAAY;IACZ,WAAW,GACT,kCACA,YAAY,IAEd;IAEC,UAAA;GACG,CAAA;GAER,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,OAAD;MACE,WAAW,GACT,yBACA,YAAY,KAEd;MAEC,UAAA;KACE,CAAA;KACJ,eACC,oBAAC,OAAD;MACE,WAAW,GACT,sCACA,YAAY,WAEd;MAEC,UAAA;KACE,CAAA;KAEN,UACC,oBAAC,OAAD;MACE,WAAW,GACT,QACA,YAAY,MAEd;MAEC,UAAA;KACE,CAAA;IAEJ;;GACJ,YACC,oBAAC,QAAD;IACE,SAAQ;IACR,OAAM;IACN,MAAK;IACL,cAAY,OAAO,SAAS,eAAe;IAC3C,MAAM,oBAAC,GAAD,CAAI,CAAA;IACV,WAAW,YAAY;IACvB,eAAe;KACb,UAAU;KACV,WAAW,KAAK;IAClB;GACD,CAAA;EAEA;;AAET"}
@@ -0,0 +1,19 @@
1
+ import { ComponentSize } from "./providers/config/types.mjs";
2
+ //#region src/components/atoms/avatar.d.ts
3
+ interface Props extends Omit<React.ComponentPropsWithoutRef<'span'>, 'children'> {
4
+ src?: string;
5
+ /** A person's name or image description. Use an empty string for a decorative avatar. */
6
+ alt: string;
7
+ /** Initials, an icon, or other content shown until the image loads or if it fails. */
8
+ fallback?: React.ReactNode;
9
+ size?: ComponentSize;
10
+ loading?: 'eager' | 'lazy';
11
+ classNames?: {
12
+ image?: string;
13
+ fallback?: string;
14
+ };
15
+ }
16
+ declare const Avatar: ({ src, alt, fallback, size, loading, className, classNames, ...props }: Props) => import("react").JSX.Element;
17
+ //#endregion
18
+ export { Props, Avatar as default };
19
+ //# sourceMappingURL=Avatar.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Avatar.d.mts","names":[],"sources":["../src/components/atoms/avatar.tsx"],"mappings":";;UAciB,cAAc,KAC7B,MAAM;EAGN;;EAEA;;EAEA,WAAW,MAAM;EACjB,OAAO;EACP;EACA;IACE;IACA;;;cAIE,WAAU,KAAA,KAAA,UAAA,MAAA,SAAA,WAAA,eAAA,SASb,0BAAK,IAAA"}
@@ -0,0 +1,43 @@
1
+ "use client";
2
+ import { cn } from "./utils.mjs";
3
+ import { useConfig } from "./providers/config/context.mjs";
4
+ import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
5
+ import { UserRound } from "lucide-react";
6
+ import { jsx, jsxs } from "react/jsx-runtime";
7
+ //#region src/components/atoms/avatar.tsx
8
+ const sizes = {
9
+ small: "size-8 text-xs",
10
+ middle: "size-10 text-sm",
11
+ large: "size-12 text-base"
12
+ };
13
+ const Avatar = ({ src, alt, fallback, size, loading, className, classNames, ...props }) => {
14
+ const { componentSize } = useConfig();
15
+ const resolvedSize = size ?? componentSize ?? "middle";
16
+ return /* @__PURE__ */ jsxs(Avatar$1.Root, {
17
+ "data-slot": "avatar",
18
+ role: alt ? "img" : void 0,
19
+ "aria-label": alt || void 0,
20
+ "aria-hidden": alt ? void 0 : true,
21
+ className: cn(`bg-muted text-muted-foreground relative inline-flex shrink-0
22
+ overflow-hidden rounded-full`, sizes[resolvedSize], className),
23
+ ...props,
24
+ children: [/* @__PURE__ */ jsx(Avatar$1.Fallback, {
25
+ className: cn("absolute inset-0 flex items-center justify-center font-medium", classNames?.fallback),
26
+ children: fallback ?? /* @__PURE__ */ jsx(UserRound, {
27
+ "aria-hidden": "true",
28
+ className: "size-1/2"
29
+ })
30
+ }), src && /* @__PURE__ */ jsx(Avatar$1.Image, {
31
+ src,
32
+ alt: "",
33
+ loading,
34
+ keepMounted: true,
35
+ className: cn(`absolute inset-0 size-full object-cover data-error:invisible
36
+ data-loading:invisible`, classNames?.image)
37
+ })]
38
+ });
39
+ };
40
+ //#endregion
41
+ export { Avatar as default };
42
+
43
+ //# sourceMappingURL=Avatar.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Avatar.mjs","names":["BaseAvatar"],"sources":["../src/components/atoms/avatar.tsx"],"sourcesContent":["'use client';\n\nimport { Avatar as BaseAvatar } from '@base-ui/react/avatar';\nimport { UserRound } from 'lucide-react';\n\nimport { type ComponentSize, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nconst sizes: Record<ComponentSize, string> = {\n small: 'size-8 text-xs',\n middle: 'size-10 text-sm',\n large: 'size-12 text-base',\n};\n\nexport interface Props extends Omit<\n React.ComponentPropsWithoutRef<'span'>,\n 'children'\n> {\n src?: string;\n /** A person's name or image description. Use an empty string for a decorative avatar. */\n alt: string;\n /** Initials, an icon, or other content shown until the image loads or if it fails. */\n fallback?: React.ReactNode;\n size?: ComponentSize;\n loading?: 'eager' | 'lazy';\n classNames?: {\n image?: string;\n fallback?: string;\n };\n}\n\nconst Avatar = ({\n src,\n alt,\n fallback,\n size,\n loading,\n className,\n classNames,\n ...props\n}: Props) => {\n const { componentSize } = useConfig();\n const resolvedSize = size ?? componentSize ?? 'middle';\n\n return (\n <BaseAvatar.Root\n data-slot=\"avatar\"\n role={alt ? 'img' : undefined}\n aria-label={alt || undefined}\n aria-hidden={alt ? undefined : true}\n className={cn(\n `bg-muted text-muted-foreground relative inline-flex shrink-0\n overflow-hidden rounded-full`,\n sizes[resolvedSize],\n className,\n //\n )}\n {...props}\n >\n <BaseAvatar.Fallback\n className={cn(\n 'absolute inset-0 flex items-center justify-center font-medium',\n classNames?.fallback,\n //\n )}\n >\n {fallback ?? <UserRound aria-hidden=\"true\" className=\"size-1/2\" />}\n </BaseAvatar.Fallback>\n {src && (\n <BaseAvatar.Image\n src={src}\n alt=\"\"\n loading={loading}\n keepMounted\n className={cn(\n `absolute inset-0 size-full object-cover data-error:invisible\n data-loading:invisible`,\n classNames?.image,\n //\n )}\n />\n )}\n </BaseAvatar.Root>\n );\n};\n\nexport default Avatar;\n"],"mappings":";;;;;;;AAQA,MAAM,QAAuC;CAC3C,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAmBA,MAAM,UAAU,EACd,KACA,KACA,UACA,MACA,SACA,WACA,YACA,GAAG,YACQ;CACX,MAAM,EAAE,kBAAkB,UAAU;CACpC,MAAM,eAAe,QAAQ,iBAAiB;CAE9C,OACE,qBAACA,SAAW,MAAZ;EACE,aAAU;EACV,MAAM,MAAM,QAAQ,KAAA;EACpB,cAAY,OAAO,KAAA;EACnB,eAAa,MAAM,KAAA,IAAY;EAC/B,WAAW,GACT;uCAEA,MAAM,eACN,SAEF;EACA,GAAI;EAZN,UAAA,CAcE,oBAACA,SAAW,UAAZ;GACE,WAAW,GACT,iEACA,YAAY,QAEd;GAEC,UAAA,YAAY,oBAAC,WAAD;IAAW,eAAY;IAAO,WAAU;GAAY,CAAA;EAC9C,CAAA,GACpB,OACC,oBAACA,SAAW,OAAZ;GACO;GACL,KAAI;GACK;GACT,aAAA;GACA,WAAW,GACT;qCAEA,YAAY,KAEd;EACD,CAAA,CAEY;;AAErB"}
@@ -0,0 +1,23 @@
1
+ //#region src/components/atoms/badge.d.ts
2
+ type BadgeColor = 'primary' | 'success' | 'warning' | 'danger';
3
+ interface Props extends Omit<React.ComponentPropsWithoutRef<'span'>, 'color'> {
4
+ /** Number shown in the indicator. Zero is hidden unless `showZero` is true. */
5
+ count?: number;
6
+ /** Show a small status dot instead of the count. */
7
+ dot?: boolean;
8
+ /** Highest number shown before displaying `maxCount+`. */
9
+ maxCount?: number;
10
+ showZero?: boolean;
11
+ color?: BadgeColor;
12
+ /** Pixel inset from the wrapped element's top and inline end edges. */
13
+ offset?: readonly [number, number];
14
+ /** Accessible name for the indicator, especially useful for a status dot. */
15
+ indicatorLabel?: string;
16
+ classNames?: {
17
+ indicator?: string;
18
+ };
19
+ }
20
+ declare const Badge: ({ count, dot, maxCount, showZero, color, offset, indicatorLabel, className, classNames, children, ...props }: Props) => import("react").JSX.Element | null;
21
+ //#endregion
22
+ export { Props, Badge as default };
23
+ //# sourceMappingURL=Badge.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Badge.d.mts","names":[],"sources":["../src/components/atoms/badge.tsx"],"mappings":";KAEK;UASY,cAAc,KAC7B,MAAM;;EAIN;;EAEA;;EAEA;EACA;EACA,QAAQ;;EAER;;EAEA;EACA;IACE;;;cAIE,UAAS,OAAA,KAAA,UAAA,UAAA,OAAA,QAAA,gBAAA,WAAA,YAAA,aAAA,SAYZ,0BAAK,IAAA"}
package/dist/Badge.mjs ADDED
@@ -0,0 +1,41 @@
1
+ import { cn } from "./utils.mjs";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ //#region src/components/atoms/badge.tsx
4
+ const colors = {
5
+ primary: "bg-primary text-primary-foreground",
6
+ success: "bg-green-600 text-white dark:bg-green-500",
7
+ warning: "bg-yellow-500 text-black",
8
+ danger: "bg-destructive text-white"
9
+ };
10
+ const Badge = ({ count, dot = false, maxCount = 99, showZero = false, color = "danger", offset, indicatorLabel, className, classNames, children, ...props }) => {
11
+ const hasChildren = children != null;
12
+ const visible = dot || count != null && (count !== 0 || showZero);
13
+ const displayCount = count != null && count > maxCount ? `${maxCount}+` : count;
14
+ if (!visible && !hasChildren) return null;
15
+ return /* @__PURE__ */ jsxs("span", {
16
+ ...props,
17
+ "data-slot": "badge",
18
+ className: cn("relative inline-flex w-fit align-middle", className),
19
+ children: [children, visible && /* @__PURE__ */ jsx("span", {
20
+ "data-slot": "badge-indicator",
21
+ "data-color": color,
22
+ "data-dot": dot || void 0,
23
+ role: indicatorLabel ? "img" : void 0,
24
+ "aria-label": indicatorLabel,
25
+ "aria-hidden": dot && !indicatorLabel ? true : void 0,
26
+ className: cn(`pointer-events-none z-10 inline-flex shrink-0 items-center
27
+ justify-center rounded-full font-medium whitespace-nowrap
28
+ tabular-nums`, dot ? "size-2" : "min-h-5 min-w-5 px-1 text-xs", hasChildren && `absolute end-0 top-0 translate-x-1/2 -translate-y-1/2
29
+ rtl:-translate-x-1/2`, colors[color], classNames?.indicator),
30
+ style: hasChildren ? {
31
+ top: offset?.[1] ?? 0,
32
+ insetInlineEnd: offset?.[0] ?? 0
33
+ } : void 0,
34
+ children: !dot && displayCount
35
+ })]
36
+ });
37
+ };
38
+ //#endregion
39
+ export { Badge as default };
40
+
41
+ //# sourceMappingURL=Badge.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Badge.mjs","names":[],"sources":["../src/components/atoms/badge.tsx"],"sourcesContent":["import { cn } from '@repo/ui/utils';\n\ntype BadgeColor = 'primary' | 'success' | 'warning' | 'danger';\n\nconst colors: Record<BadgeColor, string> = {\n primary: 'bg-primary text-primary-foreground',\n success: 'bg-green-600 text-white dark:bg-green-500',\n warning: 'bg-yellow-500 text-black',\n danger: 'bg-destructive text-white',\n};\n\nexport interface Props extends Omit<\n React.ComponentPropsWithoutRef<'span'>,\n 'color'\n> {\n /** Number shown in the indicator. Zero is hidden unless `showZero` is true. */\n count?: number;\n /** Show a small status dot instead of the count. */\n dot?: boolean;\n /** Highest number shown before displaying `maxCount+`. */\n maxCount?: number;\n showZero?: boolean;\n color?: BadgeColor;\n /** Pixel inset from the wrapped element's top and inline end edges. */\n offset?: readonly [number, number];\n /** Accessible name for the indicator, especially useful for a status dot. */\n indicatorLabel?: string;\n classNames?: {\n indicator?: string;\n };\n}\n\nconst Badge = ({\n count,\n dot = false,\n maxCount = 99,\n showZero = false,\n color = 'danger',\n offset,\n indicatorLabel,\n className,\n classNames,\n children,\n ...props\n}: Props) => {\n const hasChildren = children != null;\n const visible = dot || (count != null && (count !== 0 || showZero));\n const displayCount =\n count != null && count > maxCount ? `${maxCount}+` : count;\n\n if (!visible && !hasChildren) {\n return null;\n }\n\n return (\n <span\n {...props}\n data-slot=\"badge\"\n className={cn('relative inline-flex w-fit align-middle', className)}\n >\n {children}\n {visible && (\n <span\n data-slot=\"badge-indicator\"\n data-color={color}\n data-dot={dot || undefined}\n role={indicatorLabel ? 'img' : undefined}\n aria-label={indicatorLabel}\n aria-hidden={dot && !indicatorLabel ? true : undefined}\n className={cn(\n `pointer-events-none z-10 inline-flex shrink-0 items-center\n justify-center rounded-full font-medium whitespace-nowrap\n tabular-nums`,\n dot ? 'size-2' : 'min-h-5 min-w-5 px-1 text-xs',\n hasChildren &&\n `absolute end-0 top-0 translate-x-1/2 -translate-y-1/2\n rtl:-translate-x-1/2`,\n colors[color],\n classNames?.indicator,\n //\n )}\n style={\n hasChildren\n ? { top: offset?.[1] ?? 0, insetInlineEnd: offset?.[0] ?? 0 }\n : undefined\n }\n >\n {!dot && displayCount}\n </span>\n )}\n </span>\n );\n};\n\nexport default Badge;\n"],"mappings":";;;AAIA,MAAM,SAAqC;CACzC,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;AACV;AAuBA,MAAM,SAAS,EACb,OACA,MAAM,OACN,WAAW,IACX,WAAW,OACX,QAAQ,UACR,QACA,gBACA,WACA,YACA,UACA,GAAG,YACQ;CACX,MAAM,cAAc,YAAY;CAChC,MAAM,UAAU,OAAQ,SAAS,SAAS,UAAU,KAAK;CACzD,MAAM,eACJ,SAAS,QAAQ,QAAQ,WAAW,GAAG,SAAS,KAAK;CAEvD,IAAI,CAAC,WAAW,CAAC,aACf,OAAO;CAGT,OACE,qBAAC,QAAD;EACE,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,2CAA2C,SAAS;EAHpE,UAAA,CAKG,UACA,WACC,oBAAC,QAAD;GACE,aAAU;GACV,cAAY;GACZ,YAAU,OAAO,KAAA;GACjB,MAAM,iBAAiB,QAAQ,KAAA;GAC/B,cAAY;GACZ,eAAa,OAAO,CAAC,iBAAiB,OAAO,KAAA;GAC7C,WAAW,GACT;;2BAGA,MAAM,WAAW,gCACjB,eACE;qCAEF,OAAO,QACP,YAAY,SAEd;GACA,OACE,cACI;IAAE,KAAK,SAAS,MAAM;IAAG,gBAAgB,SAAS,MAAM;GAAE,IAC1D,KAAA;GAGL,UAAA,CAAC,OAAO;EACL,CAAA,CAEJ;;AAEV"}
package/dist/Button.mjs CHANGED
@@ -2,8 +2,8 @@
2
2
  import { cn } from "./utils.mjs";
3
3
  import { useConfig } from "./providers/config/context.mjs";
4
4
  import { Button as Button$1 } from "./core/button.mjs";
5
- import "react";
6
5
  import { LoaderCircle } from "lucide-react";
6
+ import "react";
7
7
  import { jsx, jsxs } from "react/jsx-runtime";
8
8
  //#region src/components/atoms/button.tsx
9
9
  const Core = Button$1;
@@ -4,8 +4,8 @@ import { useConfig } from "./providers/config/context.mjs";
4
4
  import Button from "./Button.mjs";
5
5
  import Input from "./components/atoms/input/index.mjs";
6
6
  import Select from "./components/atoms/select.mjs";
7
- import { useState } from "react";
8
7
  import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react";
8
+ import { useState } from "react";
9
9
  import { jsx, jsxs } from "react/jsx-runtime";
10
10
  //#region src/components/molecules/pagination.tsx
11
11
  const clampPage = (page, pageCount) => Math.min(Math.max(1, Number.isFinite(page) ? Math.floor(page) : 1), Math.max(1, pageCount));
@@ -0,0 +1,26 @@
1
+ import { ComponentSize } from "./providers/config/types.mjs";
2
+ import * as React$1 from "react";
3
+ import { ToggleGroup } from "@base-ui/react/toggle-group";
4
+ //#region src/components/atoms/segmented.d.ts
5
+ interface Option {
6
+ label: string;
7
+ value: string;
8
+ icon?: React$1.ReactNode;
9
+ disabled?: boolean;
10
+ }
11
+ interface Props extends Omit<ToggleGroup.Props, 'children' | 'value' | 'defaultValue' | 'onValueChange' | 'onChange' | 'multiple'> {
12
+ options: readonly (string | Option)[];
13
+ value?: string;
14
+ defaultValue?: string;
15
+ /** Clicking the selected item keeps it selected. */
16
+ onChange?: (value: string) => void;
17
+ size?: ComponentSize;
18
+ classNames?: {
19
+ item?: string;
20
+ activeItem?: string;
21
+ };
22
+ }
23
+ declare const Segmented: ({ options, value, defaultValue, onChange, size, className, classNames, disabled, orientation, ...props }: Props) => React$1.JSX.Element;
24
+ //#endregion
25
+ export { Option, Props, Segmented as default };
26
+ //# sourceMappingURL=Segmented.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Segmented.d.mts","names":[],"sources":["../src/components/atoms/segmented.tsx"],"mappings":";;;;UAUiB;EACf;EACA;EACA,OAAO,QAAM;EACb;;UASe,cAAc,KAC7B,YAAY;EAGZ,4BAA4B;EAC5B;EACA;;EAEA,YAAY;EACZ,OAAO;EACP;IACE;IACA;;;cAIE,cAAa,SAAA,OAAA,cAAA,UAAA,MAAA,WAAA,YAAA,UAAA,gBAAA,SAWhB,UAAK,QAAA,IAAA"}
@@ -0,0 +1,57 @@
1
+ "use client";
2
+ import { cn } from "./utils.mjs";
3
+ import { useConfig } from "./providers/config/context.mjs";
4
+ import * as React$1 from "react";
5
+ import { jsx, jsxs } from "react/jsx-runtime";
6
+ import { Toggle } from "@base-ui/react/toggle";
7
+ import { ToggleGroup } from "@base-ui/react/toggle-group";
8
+ //#region src/components/atoms/segmented.tsx
9
+ const sizeClasses = {
10
+ small: "min-h-7 px-2 text-xs",
11
+ middle: "min-h-8 px-3 text-sm",
12
+ large: "min-h-10 px-4 text-base"
13
+ };
14
+ const Segmented = ({ options, value, defaultValue, onChange, size, className, classNames, disabled, orientation = "horizontal", ...props }) => {
15
+ const normalizedOptions = options.map((option) => typeof option === "string" ? {
16
+ label: option,
17
+ value: option,
18
+ disabled: false,
19
+ icon: null
20
+ } : option);
21
+ const firstEnabled = normalizedOptions.find((option) => !option.disabled)?.value;
22
+ const [internalValue, setInternalValue] = React$1.useState(defaultValue ?? firstEnabled);
23
+ const selectedValue = value !== void 0 ? value : internalValue;
24
+ const { componentSize } = useConfig();
25
+ const resolvedSize = size ?? componentSize ?? "middle";
26
+ const handleValueChange = (values) => {
27
+ const nextValue = values[0];
28
+ if (nextValue === void 0 || nextValue === selectedValue) return;
29
+ if (value === void 0) setInternalValue(nextValue);
30
+ onChange?.(nextValue);
31
+ };
32
+ return /* @__PURE__ */ jsx(ToggleGroup, {
33
+ ...props,
34
+ "data-slot": "segmented",
35
+ disabled,
36
+ orientation,
37
+ value: selectedValue === void 0 ? [] : [selectedValue],
38
+ onValueChange: handleValueChange,
39
+ className: cn(`bg-muted inline-flex w-fit gap-0.5 rounded-lg p-1
40
+ data-[orientation=vertical]:flex-col`, className),
41
+ children: normalizedOptions.map((option) => /* @__PURE__ */ jsxs(Toggle, {
42
+ value: option.value,
43
+ disabled: option.disabled,
44
+ className: cn(`text-muted-foreground hover:text-foreground
45
+ focus-visible:ring-ring/50 data-pressed:bg-background
46
+ data-pressed:text-foreground inline-flex items-center justify-center
47
+ gap-1.5 rounded-md font-medium whitespace-nowrap outline-none
48
+ focus-visible:ring-[3px] disabled:cursor-not-allowed
49
+ disabled:opacity-50 data-pressed:shadow-xs`, sizeClasses[resolvedSize], classNames?.item, selectedValue === option.value && classNames?.activeItem),
50
+ children: [option.icon, option.label]
51
+ }, option.value))
52
+ });
53
+ };
54
+ //#endregion
55
+ export { Segmented as default };
56
+
57
+ //# sourceMappingURL=Segmented.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Segmented.mjs","names":["React"],"sources":["../src/components/atoms/segmented.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Toggle } from '@base-ui/react/toggle';\nimport { ToggleGroup } from '@base-ui/react/toggle-group';\n\nimport { type ComponentSize, useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nexport interface Option {\n label: string;\n value: string;\n icon?: React.ReactNode;\n disabled?: boolean;\n}\n\nconst sizeClasses: Record<ComponentSize, string> = {\n small: 'min-h-7 px-2 text-xs',\n middle: 'min-h-8 px-3 text-sm',\n large: 'min-h-10 px-4 text-base',\n};\n\nexport interface Props extends Omit<\n ToggleGroup.Props,\n 'children' | 'value' | 'defaultValue' | 'onValueChange' | 'onChange' | 'multiple'\n> {\n options: readonly (string | Option)[];\n value?: string;\n defaultValue?: string;\n /** Clicking the selected item keeps it selected. */\n onChange?: (value: string) => void;\n size?: ComponentSize;\n classNames?: {\n item?: string;\n activeItem?: string;\n };\n}\n\nconst Segmented = ({\n options,\n value,\n defaultValue,\n onChange,\n size,\n className,\n classNames,\n disabled,\n orientation = 'horizontal',\n ...props\n}: Props) => {\n const normalizedOptions = options.map(option =>\n typeof option === 'string'\n ? { label: option, value: option, disabled: false, icon: null }\n : option,\n );\n const firstEnabled = normalizedOptions.find(\n option => !option.disabled,\n )?.value;\n const [internalValue, setInternalValue] = React.useState(\n defaultValue ?? firstEnabled,\n );\n const selectedValue = value !== undefined ? value : internalValue;\n const { componentSize } = useConfig();\n const resolvedSize = size ?? componentSize ?? 'middle';\n\n const handleValueChange = (values: string[]) => {\n const nextValue = values[0];\n\n if (nextValue === undefined || nextValue === selectedValue) {\n return;\n }\n\n if (value === undefined) {\n setInternalValue(nextValue);\n }\n\n onChange?.(nextValue);\n };\n\n return (\n <ToggleGroup\n {...props}\n data-slot=\"segmented\"\n disabled={disabled}\n orientation={orientation}\n value={selectedValue === undefined ? [] : [selectedValue]}\n onValueChange={handleValueChange}\n className={cn(\n `bg-muted inline-flex w-fit gap-0.5 rounded-lg p-1\n data-[orientation=vertical]:flex-col`,\n className,\n //\n )}\n >\n {normalizedOptions.map(option => (\n <Toggle\n key={option.value}\n value={option.value}\n disabled={option.disabled}\n className={cn(\n `text-muted-foreground hover:text-foreground\n focus-visible:ring-ring/50 data-pressed:bg-background\n data-pressed:text-foreground inline-flex items-center justify-center\n gap-1.5 rounded-md font-medium whitespace-nowrap outline-none\n focus-visible:ring-[3px] disabled:cursor-not-allowed\n disabled:opacity-50 data-pressed:shadow-xs`,\n sizeClasses[resolvedSize],\n classNames?.item,\n selectedValue === option.value && classNames?.activeItem,\n //\n )}\n >\n {option.icon}\n {option.label}\n </Toggle>\n ))}\n </ToggleGroup>\n );\n};\n\nexport default Segmented;\n"],"mappings":";;;;;;;;AAiBA,MAAM,cAA6C;CACjD,OAAO;CACP,QAAQ;CACR,OAAO;AACT;AAkBA,MAAM,aAAa,EACjB,SACA,OACA,cACA,UACA,MACA,WACA,YACA,UACA,cAAc,cACd,GAAG,YACQ;CACX,MAAM,oBAAoB,QAAQ,KAAI,WACpC,OAAO,WAAW,WACd;EAAE,OAAO;EAAQ,OAAO;EAAQ,UAAU;EAAO,MAAM;CAAK,IAC5D,MACN;CACA,MAAM,eAAe,kBAAkB,MACrC,WAAU,CAAC,OAAO,QACpB,CAAC,EAAE;CACH,MAAM,CAAC,eAAe,oBAAoBA,QAAM,SAC9C,gBAAgB,YAClB;CACA,MAAM,gBAAgB,UAAU,KAAA,IAAY,QAAQ;CACpD,MAAM,EAAE,kBAAkB,UAAU;CACpC,MAAM,eAAe,QAAQ,iBAAiB;CAE9C,MAAM,qBAAqB,WAAqB;EAC9C,MAAM,YAAY,OAAO;EAEzB,IAAI,cAAc,KAAA,KAAa,cAAc,eAC3C;EAGF,IAAI,UAAU,KAAA,GACZ,iBAAiB,SAAS;EAG5B,WAAW,SAAS;CACtB;CAEA,OACE,oBAAC,aAAD;EACE,GAAI;EACJ,aAAU;EACA;EACG;EACb,OAAO,kBAAkB,KAAA,IAAY,CAAC,IAAI,CAAC,aAAa;EACxD,eAAe;EACf,WAAW,GACT;+CAEA,SAEF;EAEC,UAAA,kBAAkB,KAAI,WACrB,qBAAC,QAAD;GAEE,OAAO,OAAO;GACd,UAAU,OAAO;GACjB,WAAW,GACT;;;;;yDAMA,YAAY,eACZ,YAAY,MACZ,kBAAkB,OAAO,SAAS,YAAY,UAEhD;GAfF,UAAA,CAiBG,OAAO,MACP,OAAO,KACF;EAlBD,GAAA,OAAO,KAkBN,CACT;CACU,CAAA;AAEjB"}
@@ -0,0 +1,28 @@
1
+ import * as React$1 from "react";
2
+ //#region src/components/molecules/steps.d.ts
3
+ interface Item {
4
+ key?: React$1.Key;
5
+ title: React$1.ReactNode;
6
+ description?: React$1.ReactNode;
7
+ icon?: React$1.ReactNode;
8
+ /** Mark a failed step regardless of its position. */
9
+ status?: 'error';
10
+ }
11
+ interface Props extends Omit<React$1.ComponentPropsWithoutRef<'nav'>, 'children'> {
12
+ items: readonly Item[];
13
+ /** Zero-based index of the current step. */
14
+ current?: number;
15
+ orientation?: 'horizontal' | 'vertical';
16
+ classNames?: {
17
+ list?: string;
18
+ item?: string;
19
+ indicator?: string;
20
+ title?: string;
21
+ description?: string;
22
+ connector?: string;
23
+ };
24
+ }
25
+ declare const Steps: ({ items, current, orientation, className, classNames, dir, "aria-label": ariaLabel, ...props }: Props) => React$1.JSX.Element;
26
+ //#endregion
27
+ export { Item, Props, Steps as default };
28
+ //# sourceMappingURL=Steps.d.mts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Steps.d.mts","names":[],"sources":["../src/components/molecules/steps.tsx"],"mappings":";;UASiB;EACf,MAAM,QAAM;EACZ,OAAO,QAAM;EACb,cAAc,QAAM;EACpB,OAAO,QAAM;;EAEb;;UAGe,cAAc,KAC7B,QAAM;EAGN,gBAAgB;;EAEhB;EACA;EACA;IACE;IACA;IACA;IACA;IACA;IACA;;;cAIE,UAAS,OAAA,SAAA,aAAA,WAAA,YAAA,mBAAA,cAAA,SASZ,UAAK,QAAA,IAAA"}
package/dist/Steps.mjs ADDED
@@ -0,0 +1,70 @@
1
+ "use client";
2
+ import { cn } from "./utils.mjs";
3
+ import { useConfig } from "./providers/config/context.mjs";
4
+ import { Check, TriangleAlert } from "lucide-react";
5
+ import "react";
6
+ import { jsx, jsxs } from "react/jsx-runtime";
7
+ //#region src/components/molecules/steps.tsx
8
+ const Steps = ({ items, current = 0, orientation = "horizontal", className, classNames, dir, "aria-label": ariaLabel, ...props }) => {
9
+ const { direction } = useConfig();
10
+ const currentIndex = items.length ? Math.min(Math.max(Number.isFinite(current) ? Math.floor(current) : 0, 0), items.length - 1) : -1;
11
+ return /* @__PURE__ */ jsx("nav", {
12
+ ...props,
13
+ "data-slot": "steps",
14
+ "data-orientation": orientation,
15
+ dir: dir ?? direction,
16
+ "aria-label": ariaLabel ?? "Progress",
17
+ className: cn("w-full", className),
18
+ children: /* @__PURE__ */ jsx("ol", {
19
+ "data-slot": "steps-list",
20
+ className: cn("m-0 flex list-none p-0", orientation === "vertical" && "flex-col", classNames?.list),
21
+ children: items.map((item, index) => {
22
+ const status = item.status === "error" ? "error" : index < currentIndex ? "complete" : index === currentIndex ? "current" : "upcoming";
23
+ return /* @__PURE__ */ jsxs("li", {
24
+ "data-slot": "steps-item",
25
+ "data-status": status,
26
+ "aria-current": index === currentIndex ? "step" : void 0,
27
+ className: cn("m-0 flex min-w-0", orientation === "horizontal" ? "flex-1 items-start" : "flex-col", classNames?.item),
28
+ children: [/* @__PURE__ */ jsxs("div", {
29
+ className: "flex min-w-0 items-start gap-2.5",
30
+ children: [/* @__PURE__ */ jsx("span", {
31
+ "data-slot": "steps-indicator",
32
+ "aria-hidden": "true",
33
+ className: cn(`border-border text-muted-foreground flex size-7 shrink-0
34
+ items-center justify-center rounded-full border text-sm
35
+ font-medium`, status === "complete" && "border-primary bg-primary text-primary-foreground", status === "current" && "border-primary text-primary", status === "error" && `border-destructive bg-destructive
36
+ text-destructive-foreground`, classNames?.indicator),
37
+ children: item.icon ?? (status === "complete" ? /* @__PURE__ */ jsx(Check, { className: "size-4" }) : status === "error" ? /* @__PURE__ */ jsx(TriangleAlert, { className: "size-4" }) : index + 1)
38
+ }), /* @__PURE__ */ jsxs("span", {
39
+ className: "min-w-0",
40
+ children: [
41
+ /* @__PURE__ */ jsx("span", {
42
+ "data-slot": "steps-title",
43
+ className: cn("block text-sm font-medium", status === "upcoming" ? "text-muted-foreground" : status === "error" ? "text-destructive" : "text-foreground", classNames?.title),
44
+ children: item.title
45
+ }),
46
+ item.description != null && /* @__PURE__ */ jsx("span", {
47
+ "data-slot": "steps-description",
48
+ className: cn("text-muted-foreground block text-xs", classNames?.description),
49
+ children: item.description
50
+ }),
51
+ /* @__PURE__ */ jsx("span", {
52
+ className: "sr-only",
53
+ children: status === "complete" ? "Completed" : status === "current" ? "Current step" : status === "error" ? "Error" : "Upcoming"
54
+ })
55
+ ]
56
+ })]
57
+ }), index < items.length - 1 && /* @__PURE__ */ jsx("span", {
58
+ "data-slot": "steps-connector",
59
+ "aria-hidden": "true",
60
+ className: cn("bg-border shrink-0", orientation === "horizontal" ? "mx-3 mt-3.5 h-px min-w-3 flex-1" : "my-2 ms-3.5 h-7 w-px", index < currentIndex && "bg-primary", classNames?.connector)
61
+ })]
62
+ }, item.key ?? index);
63
+ })
64
+ })
65
+ });
66
+ };
67
+ //#endregion
68
+ export { Steps as default };
69
+
70
+ //# sourceMappingURL=Steps.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Steps.mjs","names":[],"sources":["../src/components/molecules/steps.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Check, TriangleAlert } from 'lucide-react';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nexport interface Item {\n key?: React.Key;\n title: React.ReactNode;\n description?: React.ReactNode;\n icon?: React.ReactNode;\n /** Mark a failed step regardless of its position. */\n status?: 'error';\n}\n\nexport interface Props extends Omit<\n React.ComponentPropsWithoutRef<'nav'>,\n 'children'\n> {\n items: readonly Item[];\n /** Zero-based index of the current step. */\n current?: number;\n orientation?: 'horizontal' | 'vertical';\n classNames?: {\n list?: string;\n item?: string;\n indicator?: string;\n title?: string;\n description?: string;\n connector?: string;\n };\n}\n\nconst Steps = ({\n items,\n current = 0,\n orientation = 'horizontal',\n className,\n classNames,\n dir,\n 'aria-label': ariaLabel,\n ...props\n}: Props) => {\n const { direction } = useConfig();\n const currentIndex = items.length\n ? Math.min(\n Math.max(Number.isFinite(current) ? Math.floor(current) : 0, 0),\n items.length - 1,\n )\n : -1;\n\n return (\n <nav\n {...props}\n data-slot=\"steps\"\n data-orientation={orientation}\n dir={dir ?? direction}\n aria-label={ariaLabel ?? 'Progress'}\n className={cn('w-full', className)}\n >\n <ol\n data-slot=\"steps-list\"\n className={cn(\n 'm-0 flex list-none p-0',\n orientation === 'vertical' && 'flex-col',\n classNames?.list,\n //\n )}\n >\n {items.map((item, index) => {\n const status =\n item.status === 'error'\n ? 'error'\n : index < currentIndex\n ? 'complete'\n : index === currentIndex\n ? 'current'\n : 'upcoming';\n const isCurrent = index === currentIndex;\n\n return (\n <li\n key={item.key ?? index}\n data-slot=\"steps-item\"\n data-status={status}\n aria-current={isCurrent ? 'step' : undefined}\n className={cn(\n 'm-0 flex min-w-0',\n orientation === 'horizontal'\n ? 'flex-1 items-start'\n : 'flex-col',\n classNames?.item,\n //\n )}\n >\n <div className=\"flex min-w-0 items-start gap-2.5\">\n <span\n data-slot=\"steps-indicator\"\n aria-hidden=\"true\"\n className={cn(\n `border-border text-muted-foreground flex size-7 shrink-0\n items-center justify-center rounded-full border text-sm\n font-medium`,\n status === 'complete' &&\n 'border-primary bg-primary text-primary-foreground',\n status === 'current' && 'border-primary text-primary',\n status === 'error' &&\n `border-destructive bg-destructive\n text-destructive-foreground`,\n classNames?.indicator,\n //\n )}\n >\n {item.icon ??\n (status === 'complete' ? (\n <Check className=\"size-4\" />\n ) : status === 'error' ? (\n <TriangleAlert className=\"size-4\" />\n ) : (\n index + 1\n ))}\n </span>\n <span className=\"min-w-0\">\n <span\n data-slot=\"steps-title\"\n className={cn(\n 'block text-sm font-medium',\n status === 'upcoming'\n ? 'text-muted-foreground'\n : status === 'error'\n ? 'text-destructive'\n : 'text-foreground',\n classNames?.title,\n //\n )}\n >\n {item.title}\n </span>\n {item.description != null && (\n <span\n data-slot=\"steps-description\"\n className={cn(\n 'text-muted-foreground block text-xs',\n classNames?.description,\n )}\n >\n {item.description}\n </span>\n )}\n <span className=\"sr-only\">\n {status === 'complete'\n ? 'Completed'\n : status === 'current'\n ? 'Current step'\n : status === 'error'\n ? 'Error'\n : 'Upcoming'}\n </span>\n </span>\n </div>\n {index < items.length - 1 && (\n <span\n data-slot=\"steps-connector\"\n aria-hidden=\"true\"\n className={cn(\n 'bg-border shrink-0',\n orientation === 'horizontal'\n ? 'mx-3 mt-3.5 h-px min-w-3 flex-1'\n : 'my-2 ms-3.5 h-7 w-px',\n index < currentIndex && 'bg-primary',\n classNames?.connector,\n //\n )}\n />\n )}\n </li>\n );\n })}\n </ol>\n </nav>\n );\n};\n\nexport default Steps;\n"],"mappings":";;;;;;;AAoCA,MAAM,SAAS,EACb,OACA,UAAU,GACV,cAAc,cACd,WACA,YACA,KACA,cAAc,WACd,GAAG,YACQ;CACX,MAAM,EAAE,cAAc,UAAU;CAChC,MAAM,eAAe,MAAM,SACvB,KAAK,IACH,KAAK,IAAI,OAAO,SAAS,OAAO,IAAI,KAAK,MAAM,OAAO,IAAI,GAAG,CAAC,GAC9D,MAAM,SAAS,CACjB,IACA;CAEJ,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,oBAAkB;EAClB,KAAK,OAAO;EACZ,cAAY,aAAa;EACzB,WAAW,GAAG,UAAU,SAAS;EAEjC,UAAA,oBAAC,MAAD;GACE,aAAU;GACV,WAAW,GACT,0BACA,gBAAgB,cAAc,YAC9B,YAAY,IAEd;GAEC,UAAA,MAAM,KAAK,MAAM,UAAU;IAC1B,MAAM,SACJ,KAAK,WAAW,UACZ,UACA,QAAQ,eACN,aACA,UAAU,eACR,YACA;IAGV,OACE,qBAAC,MAAD;KAEE,aAAU;KACV,eAAa;KACb,gBAPc,UAAU,eAOE,SAAS,KAAA;KACnC,WAAW,GACT,oBACA,gBAAgB,eACZ,uBACA,YACJ,YAAY,IAEd;KAZF,UAAA,CAcE,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,oBAAC,QAAD;OACE,aAAU;OACV,eAAY;OACZ,WAAW,GACT;;kCAGA,WAAW,cACT,qDACF,WAAW,aAAa,+BACxB,WAAW,WACT;oDAEF,YAAY,SAEd;OAEC,UAAA,KAAK,SACH,WAAW,aACV,oBAAC,OAAD,EAAO,WAAU,SAAU,CAAA,IACzB,WAAW,UACb,oBAAC,eAAD,EAAe,WAAU,SAAU,CAAA,IAEnC,QAAQ;MAER,CAAA,GACN,qBAAC,QAAD;OAAM,WAAU;OAAhB,UAAA;QACE,oBAAC,QAAD;SACE,aAAU;SACV,WAAW,GACT,6BACA,WAAW,aACP,0BACA,WAAW,UACT,qBACA,mBACN,YAAY,KAEd;SAEC,UAAA,KAAK;QACF,CAAA;QACL,KAAK,eAAe,QACnB,oBAAC,QAAD;SACE,aAAU;SACV,WAAW,GACT,uCACA,YAAY,WACd;SAEC,UAAA,KAAK;QACF,CAAA;QAER,oBAAC,QAAD;SAAM,WAAU;SACb,UAAA,WAAW,aACR,cACA,WAAW,YACT,iBACA,WAAW,UACT,UACA;QACJ,CAAA;OACF;MACH,CAAA,CAAA;KACJ,CAAA,GAAA,QAAQ,MAAM,SAAS,KACtB,oBAAC,QAAD;MACE,aAAU;MACV,eAAY;MACZ,WAAW,GACT,sBACA,gBAAgB,eACZ,oCACA,wBACJ,QAAQ,gBAAgB,cACxB,YAAY,SAEd;KACD,CAAA,CAED;IA7FG,GAAA,KAAK,OAAO,KA6Ff;GAER,CAAC;EACC,CAAA;CACD,CAAA;AAET"}
@@ -2,8 +2,8 @@
2
2
  import { cn } from "../../../utils.mjs";
3
3
  import { checkbox_exports } from "../../../core/checkbox.mjs";
4
4
  import { label_exports } from "../../../core/label.mjs";
5
- import { useId, useRef } from "react";
6
5
  import { Square, SquareCheck } from "lucide-react";
6
+ import { useId, useRef } from "react";
7
7
  import { useControllableState, useKeyPress } from "@jbpark/use-hooks";
8
8
  import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
9
9
  //#region src/components/atoms/checkbox/checkbox.tsx
@@ -3,8 +3,8 @@ import { cn } from "../../utils.mjs";
3
3
  import { calendar_exports } from "../../core/calendar.mjs";
4
4
  import Button from "../../Button.mjs";
5
5
  import Popover from "./popover.mjs";
6
- import { useState } from "react";
7
6
  import { CalendarIcon } from "lucide-react";
7
+ import { useState } from "react";
8
8
  import { useControllableState } from "@jbpark/use-hooks";
9
9
  import { jsx } from "react/jsx-runtime";
10
10
  import { format } from "date-fns";
@@ -2,8 +2,8 @@
2
2
  import { cn } from "../../../utils.mjs";
3
3
  import { DEFAULT_LOCALE, useConfig } from "../../../providers/config/context.mjs";
4
4
  import FloatButton from "./float-button.mjs";
5
- import { useRef } from "react";
6
5
  import { ArrowUp } from "lucide-react";
6
+ import { useRef } from "react";
7
7
  import { useMergedRef, useWindowScroll } from "@jbpark/use-hooks";
8
8
  import { jsx } from "react/jsx-runtime";
9
9
  //#region src/components/atoms/float-button/back-top.tsx
@@ -1,10 +1,14 @@
1
+ import Avatar, { Props } from "../../Avatar.mjs";
2
+ import Badge, { Props as Props$1 } from "../../Badge.mjs";
1
3
  import Button from "../../Button.mjs";
4
+ import Segmented, { Props as Props$2 } from "../../Segmented.mjs";
2
5
  import Tag from "../../Tag.mjs";
3
6
  import Typography from "../../Typography.mjs";
4
7
  import Checkbox from "./checkbox/index.mjs";
5
8
  import ColorPicker from "./color-picker.mjs";
6
9
  import DatePicker from "./date-picker.mjs";
7
10
  import FloatButton from "./float-button/index.mjs";
11
+ import { Props as Props$3 } from "./input/number.mjs";
8
12
  import Input from "./input/index.mjs";
9
13
  import Popover from "./popover.mjs";
10
14
  import Progress from "./progress.mjs";
@@ -17,4 +21,4 @@ import Slider from "./slider/slider.mjs";
17
21
  import Spin from "./spin.mjs";
18
22
  import Switch from "./switch.mjs";
19
23
  import Tooltip from "./tooltip.mjs";
20
- export { Button, Checkbox, ColorPicker, DatePicker, FloatButton, Input, Popover, Progress, Radio, RichTextEditor, Select, Skeleton, Slider, Spin, Switch, Tag, Tooltip, Typography };
24
+ export { Avatar, type Props as AvatarProps, Badge, type Props$1 as BadgeProps, Button, Checkbox, ColorPicker, DatePicker, FloatButton, Input, type Props$3 as InputNumberProps, Popover, Progress, Radio, RichTextEditor, Segmented, type Props$2 as SegmentedProps, Select, Skeleton, Slider, Spin, Switch, Tag, Tooltip, Typography };
@@ -1,12 +1,14 @@
1
1
  import Input$1 from "./input.mjs";
2
+ import Number, { Props } from "./number.mjs";
2
3
  import Search from "./search.mjs";
3
4
  import TextArea from "./text-area.mjs";
4
5
  //#region src/components/atoms/input/index.d.ts
5
6
  type InputComponent = typeof Input$1 & {
6
7
  Search: typeof Search;
8
+ Number: typeof Number;
7
9
  TextArea: typeof TextArea;
8
10
  };
9
11
  declare const Input: InputComponent;
10
12
  //#endregion
11
- export { Search, TextArea, Input as default };
13
+ export { Number, type Props as NumberProps, Search, TextArea, Input as default };
12
14
  //# sourceMappingURL=index.d.mts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/atoms/input/index.ts"],"mappings":";;;;KAIK,wBAAwB;EAC3B,eAAe;EACf,iBAAiB;;cAGb,OAAqB"}
1
+ {"version":3,"file":"index.d.mts","names":[],"sources":["../../../../src/components/atoms/input/index.ts"],"mappings":";;;;;KAKK,wBAAwB;EAC3B,eAAe;EACf,eAAe;EACf,iBAAiB;;cAGb,OAAqB"}
@@ -1,11 +1,13 @@
1
1
  import Input$1 from "./input.mjs";
2
+ import Number from "./number.mjs";
2
3
  import Search from "./search.mjs";
3
4
  import TextArea from "./text-area.mjs";
4
5
  //#region src/components/atoms/input/index.ts
5
6
  const Input = Input$1;
6
7
  Input.Search = Search;
8
+ Input.Number = Number;
7
9
  Input.TextArea = TextArea;
8
10
  //#endregion
9
- export { Search, TextArea, Input as default };
11
+ export { Number, Search, TextArea, Input as default };
10
12
 
11
13
  //# sourceMappingURL=index.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","names":["InputImpl"],"sources":["../../../../src/components/atoms/input/index.ts"],"sourcesContent":["import InputImpl from './input';\nimport Search from './search';\nimport TextArea from './text-area';\n\ntype InputComponent = typeof InputImpl & {\n Search: typeof Search;\n TextArea: typeof TextArea;\n};\n\nconst Input = InputImpl as InputComponent;\n\nInput.Search = Search;\nInput.TextArea = TextArea;\n\nexport { Search, TextArea };\nexport default Input;\n"],"mappings":";;;;AASA,MAAM,QAAQA;AAEd,MAAM,SAAS;AACf,MAAM,WAAW"}
1
+ {"version":3,"file":"index.mjs","names":["InputImpl"],"sources":["../../../../src/components/atoms/input/index.ts"],"sourcesContent":["import InputImpl from './input';\nimport Number from './number';\nimport Search from './search';\nimport TextArea from './text-area';\n\ntype InputComponent = typeof InputImpl & {\n Search: typeof Search;\n Number: typeof Number;\n TextArea: typeof TextArea;\n};\n\nconst Input = InputImpl as InputComponent;\n\nInput.Search = Search;\nInput.Number = Number;\nInput.TextArea = TextArea;\n\nexport { Number, Search, TextArea };\nexport type { Props as NumberProps } from './number';\nexport default Input;\n"],"mappings":";;;;;AAWA,MAAM,QAAQA;AAEd,MAAM,SAAS;AACf,MAAM,SAAS;AACf,MAAM,WAAW"}