ics-ui-kit 0.1.0-alpha.9 → 0.1.0

package/dist/components/progress-circle/ProgressCircle.d.ts

@@ -0,0 +1,186 @@
+import { default as React } from 'react';
+import { VariantProps, TVReturnType } from 'tailwind-variants';
+declare const progressCircleVariants: TVReturnType<{
+    size: {
+        xs: {
+            svg: string;
+        };
+        sm: {
+            svg: string;
+        };
+        md: {
+            svg: string;
+        };
+        lg: {
+            svg: string;
+        };
+        xl: {
+            svg: string;
+        };
+    };
+    isIndeterminate: {
+        true: {
+            indicator: string;
+        };
+    };
+}, {
+    svg: string;
+    track: string;
+    indicator: string;
+}, undefined, {
+    size: {
+        xs: {
+            svg: string;
+        };
+        sm: {
+            svg: string;
+        };
+        md: {
+            svg: string;
+        };
+        lg: {
+            svg: string;
+        };
+        xl: {
+            svg: string;
+        };
+    };
+    isIndeterminate: {
+        true: {
+            indicator: string;
+        };
+    };
+}, {
+    svg: string;
+    track: string;
+    indicator: string;
+}, TVReturnType<{
+    size: {
+        xs: {
+            svg: string;
+        };
+        sm: {
+            svg: string;
+        };
+        md: {
+            svg: string;
+        };
+        lg: {
+            svg: string;
+        };
+        xl: {
+            svg: string;
+        };
+    };
+    isIndeterminate: {
+        true: {
+            indicator: string;
+        };
+    };
+}, {
+    svg: string;
+    track: string;
+    indicator: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ProgressCircleProps = VariantProps<typeof progressCircleVariants> & React.HTMLAttributes<SVGSVGElement> & {
+    /** Максимальное значение прогресса. По умолчанию 100 */
+    max?: number;
+    /** Значение прогресса от 0 до max. Если не указано или null, считается равным 0 */
+    value?: number | null;
+    /** Индикатор неопределенного состояния прогресса */
+    indeterminate?: boolean;
+    /** Классы для индикатора */
+    indicatorClassName?: string;
+};
+export declare const ProgressCircle: React.ForwardRefExoticComponent<VariantProps< TVReturnType<{
+    size: {
+        xs: {
+            svg: string;
+        };
+        sm: {
+            svg: string;
+        };
+        md: {
+            svg: string;
+        };
+        lg: {
+            svg: string;
+        };
+        xl: {
+            svg: string;
+        };
+    };
+    isIndeterminate: {
+        true: {
+            indicator: string;
+        };
+    };
+}, {
+    svg: string;
+    track: string;
+    indicator: string;
+}, undefined, {
+    size: {
+        xs: {
+            svg: string;
+        };
+        sm: {
+            svg: string;
+        };
+        md: {
+            svg: string;
+        };
+        lg: {
+            svg: string;
+        };
+        xl: {
+            svg: string;
+        };
+    };
+    isIndeterminate: {
+        true: {
+            indicator: string;
+        };
+    };
+}, {
+    svg: string;
+    track: string;
+    indicator: string;
+}, TVReturnType<{
+    size: {
+        xs: {
+            svg: string;
+        };
+        sm: {
+            svg: string;
+        };
+        md: {
+            svg: string;
+        };
+        lg: {
+            svg: string;
+        };
+        xl: {
+            svg: string;
+        };
+    };
+    isIndeterminate: {
+        true: {
+            indicator: string;
+        };
+    };
+}, {
+    svg: string;
+    track: string;
+    indicator: string;
+}, undefined, unknown, unknown, undefined>>> & React.HTMLAttributes<SVGSVGElement> & {
+    /** Максимальное значение прогресса. По умолчанию 100 */
+    max?: number;
+    /** Значение прогресса от 0 до max. Если не указано или null, считается равным 0 */
+    value?: number | null;
+    /** Индикатор неопределенного состояния прогресса */
+    indeterminate?: boolean;
+    /** Классы для индикатора */
+    indicatorClassName?: string;
+} & React.RefAttributes<SVGSVGElement>>;
+export {};

package/dist/components/progress-circle/ProgressCircle.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ProgressCircle } from './ProgressCircle';
+declare const meta: Meta<typeof ProgressCircle>;
+export default meta;
+type Story = StoryObj<typeof ProgressCircle>;
+export declare const Default: Story;
+export declare const Animated: Story;
+export declare const Indeterminate: Story;
+export declare const WithCustomColor: Story;

package/dist/components/progress-circle/components/progress-circle-description/ProgressCircleDescription.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+export type ProgressCircleDescriptionProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const ProgressCircleDescription: React.ForwardRefExoticComponent<ProgressCircleDescriptionProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/progress-circle/components/progress-circle-description/ProgressCircleDescription.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ProgressCircleDescription } from './ProgressCircleDescription';
+declare const meta: Meta<typeof ProgressCircleDescription>;
+export default meta;
+type Story = StoryObj<typeof ProgressCircleDescription>;
+export declare const Default: Story;

package/dist/components/progress-circle/components/progress-circle-icon-button/ProgressCircleIconButton.d.ts

@@ -0,0 +1,70 @@
+import { IconButtonProps } from '../../../button/icon-button/IconButton';
+import { default as React } from 'react';
+import { VariantProps, TVReturnType } from 'tailwind-variants';
+declare const progressCircleIconButtonVariants: TVReturnType<{
+    size: {
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+}, undefined, {
+    size: {
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+}, TVReturnType<{
+    size: {
+        xs: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        lg: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ProgressCircleIconButtonProps = VariantProps<typeof progressCircleIconButtonVariants> & IconButtonProps;
+export declare const ProgressCircleIconButton: React.FC<ProgressCircleIconButtonProps>;
+export {};

package/dist/components/progress-circle/components/progress-circle-icon-button/ProgressCircleIconButton.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ProgressCircleIconButton } from './ProgressCircleIconButton';
+declare const meta: Meta<typeof ProgressCircleIconButton>;
+export default meta;
+type Story = StoryObj<typeof ProgressCircleIconButton>;
+export declare const Default: Story;

package/dist/components/progress-circle/components/progress-circle-text/ProgressCircleTitle.d.ts

@@ -0,0 +1,56 @@
+import { default as React } from 'react';
+import { VariantProps, TVReturnType } from 'tailwind-variants';
+declare const progressCircleTitleStyles: TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, undefined, "font-semibold text-primary-fg", {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, undefined, TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, undefined, "font-semibold text-primary-fg", unknown, unknown, undefined>>;
+export type ProgressCircleTitleProps = VariantProps<typeof progressCircleTitleStyles> & React.HTMLAttributes<HTMLDivElement>;
+export declare const ProgressCircleTitle: React.ForwardRefExoticComponent<VariantProps< TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, undefined, "font-semibold text-primary-fg", {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, undefined, TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+}, undefined, "font-semibold text-primary-fg", unknown, unknown, undefined>>> & React.HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/progress-circle/components/progress-circle-text/ProgressCircleTitle.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ProgressCircleTitle } from './ProgressCircleTitle';
+declare const meta: Meta<typeof ProgressCircleTitle>;
+export default meta;
+type Story = StoryObj<typeof ProgressCircleTitle>;
+export declare const Default: Story;

package/dist/components/progress-circle/index.d.ts

@@ -0,0 +1,5 @@
+export { ProgressCircle, type ProgressCircleProps } from './ProgressCircle';
+export { ProgressCircleDescription, type ProgressCircleDescriptionProps } from './components/progress-circle-description/ProgressCircleDescription';
+export { ProgressCircleTitle, type ProgressCircleTitleProps } from './components/progress-circle-text/ProgressCircleTitle';
+export { ProgressCircleIconButton, type ProgressCircleIconButtonProps } from './components/progress-circle-icon-button/ProgressCircleIconButton';
+export { ProgressCircleTemplate, type ProgressCircleTemplateProps } from './templates/ProgressCircleTemplate';

package/dist/components/progress-circle/templates/ProgressCircleTemplate.d.ts

@@ -0,0 +1,13 @@
+export type ProgressCircleTemplateProps = {
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    value?: number;
+    max?: number;
+    indeterminate?: boolean;
+    description?: React.ReactNode;
+    title?: React.ReactNode;
+    onRetry?: (e: React.MouseEvent<HTMLElement>) => void;
+};
+export declare const ProgressCircleTemplate: {
+    (props: ProgressCircleTemplateProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/progress-circle/templates/ProgressCircleTemplate.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ProgressCircleTemplate } from './ProgressCircleTemplate';
+declare const meta: Meta<typeof ProgressCircleTemplate>;
+export default meta;
+type Story = StoryObj<typeof ProgressCircleTemplate>;
+export declare const Default: Story;
+export declare const Example: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithRetry: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/progress-circle.d.ts

@@ -0,0 +1,2 @@
+export * from './progress-circle/index'
+export {}

package/dist/components/progress-circle.js

@@ -0,0 +1,187 @@
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import f, { useMemo as b } from "react";
+import { T as l } from "../index-BVqs-uqP.js";
+import { I as D } from "../IconButton-DwkpNgn3.js";
+import { R as P } from "../rotate-cw-tYRlcg0g.js";
+const I = l({
+  slots: {
+    svg: "-rotate-90 transform",
+    track: "fill-secondary-bg-hover",
+    indicator: "fill-none stroke-current text-primary-accent transition-all duration-500 ease-out"
+  },
+  variants: {
+    size: {
+      xs: {
+        svg: "h-10 w-10"
+      },
+      sm: {
+        svg: "h-[3.75rem] w-[3.75rem]"
+      },
+      md: {
+        svg: "h-20 w-20"
+      },
+      lg: {
+        svg: "h-[7.5rem] w-[7.5rem]"
+      },
+      xl: {
+        svg: "h-[11.25rem] w-[11.25rem]"
+      }
+    },
+    isIndeterminate: {
+      true: {
+        indicator: "origin-center animate-spin duration-1000"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), x = f.forwardRef(
+  ({ size: r, max: e = 100, value: t, indeterminate: s = !1, indicatorClassName: i }, m) => {
+    const n = I({ size: r, isIndeterminate: s }), c = s ? null : t ?? 0, a = 2 * Math.PI * 84, d = b(() => {
+      if (s)
+        return {
+          strokeDasharray: `${a * 0.25} ${a * 0.75}`,
+          strokeDashoffset: 0,
+          percentage: 0
+        };
+      const p = e <= 0 ? 100 : e, h = Math.max(0, Math.min(p, c ?? 0)), y = h / p * 100, N = h / p * a, k = a - N;
+      return {
+        strokeDasharray: a,
+        strokeDashoffset: k,
+        percentage: Math.round(y)
+      };
+    }, [a, c, e, s]);
+    return /* @__PURE__ */ u(
+      "svg",
+      {
+        ref: m,
+        className: n.svg(),
+        viewBox: "0 0 180 180",
+        xmlns: "http://www.w3.org/2000/svg",
+        "aria-valuenow": s ? void 0 : d.percentage,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "data-slot": "progress-circle",
+        children: [
+          /* @__PURE__ */ o(
+            "path",
+            {
+              d: "M180 90C180 139.706 139.706 180 90 180C40.2944 180 0 139.706 0 90C0 40.2944 40.2944 0 90 0C139.706 0 180 40.2944 180 90ZM11.997 90C11.997 133.08 46.9201 168.003 90 168.003C133.80 168.003 168.003 133.08 168.003 90C168.003 46.9201 133.08 11.997 90 11.997C46.9201 11.997 11.997 46.9201 11.997 90Z",
+              className: n.track()
+            }
+          ),
+          /* @__PURE__ */ o(
+            "circle",
+            {
+              className: n.indicator({ className: i, isIndeterminate: s }),
+              cx: "90",
+              cy: "90",
+              r: "84",
+              strokeWidth: "12",
+              strokeDasharray: d.strokeDasharray,
+              strokeDashoffset: d.strokeDashoffset,
+              strokeLinecap: "round",
+              "data-slot": "progress-circle-indicator"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+x.displayName = "ProgressCircle";
+const M = l({
+  base: "text-xs text-muted"
+}), C = f.forwardRef(({ className: r, children: e, ...t }, s) => /* @__PURE__ */ o("span", { className: M({ className: r }), ref: s, ...t, children: e }));
+C.displayName = "ProgressCircleDescription";
+const z = l({
+  base: "font-semibold text-primary-fg",
+  variants: {
+    size: {
+      xs: "text-[0.625rem] leading-4",
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-2xl",
+      xl: "text-4xl"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), w = f.forwardRef(
+  ({ className: r, size: e, children: t, ...s }, i) => /* @__PURE__ */ o("span", { className: z({ className: r, size: e }), ref: i, ...s, children: t })
+);
+w.displayName = "ProgressCircleTitle";
+const R = l({
+  slots: {
+    base: "p-0.5 text-muted",
+    icon: "h-full w-full"
+  },
+  variants: {
+    size: {
+      xs: {
+        base: "h-4 w-4"
+      },
+      sm: {
+        base: "h-5 w-5"
+      },
+      md: {
+        base: "h-[1.375rem] w-[1.375rem]"
+      },
+      lg: {
+        base: "h-8 w-8"
+      },
+      xl: {
+        base: "h-11 w-11"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), v = ({
+  className: r,
+  size: e,
+  icon: t,
+  ...s
+}) => {
+  const i = R();
+  return /* @__PURE__ */ o(
+    D,
+    {
+      icon: t,
+      variant: "text",
+      className: i.base({ className: r, size: e }),
+      iconClassName: i.icon(),
+      size: e,
+      ...s
+    }
+  );
+};
+v.displayName = "ProgressCircleIconButton";
+const T = l({
+  slots: {
+    wrap: "relative w-fit",
+    header: "absolute inset-0 z-10 flex flex-col items-center justify-center"
+  }
+}), V = (r) => {
+  const { size: e, value: t, max: s, indeterminate: i, description: m, title: n, onRetry: c } = r, g = m && !["xs", "sm"].includes(e), a = T({ size: e });
+  return /* @__PURE__ */ u("div", { className: a.wrap(), children: [
+    /* @__PURE__ */ o(x, { value: t, max: s, indeterminate: i, size: e }),
+    /* @__PURE__ */ u("div", { className: a.header(), children: [
+      n && /* @__PURE__ */ o(w, { size: e, children: n }),
+      c && /* @__PURE__ */ o(v, { size: e, icon: P, onClick: c }),
+      g && /* @__PURE__ */ o(C, { children: m })
+    ] })
+  ] });
+};
+V.displayName = "ProgressCircleTemplate";
+export {
+  x as ProgressCircle,
+  C as ProgressCircleDescription,
+  v as ProgressCircleIconButton,
+  V as ProgressCircleTemplate,
+  w as ProgressCircleTitle
+};
+//# sourceMappingURL=progress-circle.js.map

package/dist/components/progress-circle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-circle.js","sources":["../../src/components/progress-circle/ProgressCircle.tsx","../../src/components/progress-circle/components/progress-circle-description/ProgressCircleDescription.tsx","../../src/components/progress-circle/components/progress-circle-text/ProgressCircleTitle.tsx","../../src/components/progress-circle/components/progress-circle-icon-button/ProgressCircleIconButton.tsx","../../src/components/progress-circle/templates/ProgressCircleTemplate.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\r\nimport { tv, VariantProps } from \"tailwind-variants\";\r\n\r\nconst progressCircleVariants = tv({\r\n\tslots: {\r\n\t\tsvg: \"-rotate-90 transform\",\r\n\t\ttrack: \"fill-secondary-bg-hover\",\r\n\t\tindicator: \"fill-none stroke-current text-primary-accent transition-all duration-500 ease-out\"\r\n\t},\r\n\tvariants: {\r\n\t\tsize: {\r\n\t\t\txs: {\r\n\t\t\t\tsvg: \"h-10 w-10\"\r\n\t\t\t},\r\n\t\t\tsm: {\r\n\t\t\t\tsvg: \"h-[3.75rem] w-[3.75rem]\"\r\n\t\t\t},\r\n\t\t\tmd: {\r\n\t\t\t\tsvg: \"h-20 w-20\"\r\n\t\t\t},\r\n\t\t\tlg: {\r\n\t\t\t\tsvg: \"h-[7.5rem] w-[7.5rem]\"\r\n\t\t\t},\r\n\t\t\txl: {\r\n\t\t\t\tsvg: \"h-[11.25rem] w-[11.25rem]\"\r\n\t\t\t}\r\n\t\t},\r\n\t\tisIndeterminate: {\r\n\t\t\ttrue: {\r\n\t\t\t\tindicator: \"origin-center animate-spin duration-1000\"\r\n\t\t\t}\r\n\t\t}\r\n\t},\r\n\tdefaultVariants: {\r\n\t\tsize: \"md\"\r\n\t}\r\n});\r\n\r\nexport type ProgressCircleProps = VariantProps<typeof progressCircleVariants> &\r\n\tReact.HTMLAttributes<SVGSVGElement> & {\r\n\t\t/** Максимальное значение прогресса. По умолчанию 100 */\r\n\t\tmax?: number;\r\n\t\t/** Значение прогресса от 0 до max. Если не указано или null, считается равным 0 */\r\n\t\tvalue?: number | null;\r\n\t\t/** Индикатор неопределенного состояния прогресса */\r\n\t\tindeterminate?: boolean;\r\n\t\t/** Классы для индикатора */\r\n\t\tindicatorClassName?: string;\r\n\t};\r\n\r\nexport const ProgressCircle = React.forwardRef<SVGSVGElement, ProgressCircleProps>(\r\n\t({ size, max = 100, value, indeterminate = false, indicatorClassName }, ref) => {\r\n\t\tconst styles = progressCircleVariants({ size, isIndeterminate: indeterminate });\r\n\t\tconst currentValue = indeterminate ? null : (value ?? 0);\r\n\r\n\t\tconst radius = 84;\r\n\t\tconst circumference = 2 * Math.PI * radius;\r\n\r\n\t\tconst progressData = useMemo(() => {\r\n\t\t\tif (indeterminate) {\r\n\t\t\t\treturn {\r\n\t\t\t\t\tstrokeDasharray: `${circumference * 0.25} ${circumference * 0.75}`,\r\n\t\t\t\t\tstrokeDashoffset: 0,\r\n\t\t\t\t\tpercentage: 0\r\n\t\t\t\t};\r\n\t\t\t}\r\n\r\n\t\t\tconst safeMax = max <= 0 ? 100 : max;\r\n\t\t\tconst safeValue = Math.max(0, Math.min(safeMax, currentValue ?? 0));\r\n\t\t\tconst percentage = (safeValue / safeMax) * 100;\r\n\t\t\tconst progress = (safeValue / safeMax) * circumference;\r\n\t\t\tconst dashOffset = circumference - progress;\r\n\r\n\t\t\treturn {\r\n\t\t\t\tstrokeDasharray: circumference,\r\n\t\t\t\tstrokeDashoffset: dashOffset,\r\n\t\t\t\tpercentage: Math.round(percentage)\r\n\t\t\t};\r\n\t\t}, [circumference, currentValue, max, indeterminate]);\r\n\r\n\t\treturn (\r\n\t\t\t<svg\r\n\t\t\t\tref={ref}\r\n\t\t\t\tclassName={styles.svg()}\r\n\t\t\t\tviewBox=\"0 0 180 180\"\r\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\taria-valuenow={indeterminate ? undefined : progressData.percentage}\r\n\t\t\t\taria-valuemin={0}\r\n\t\t\t\taria-valuemax={100}\r\n\t\t\t\tdata-slot=\"progress-circle\"\r\n\t\t\t>\r\n\t\t\t\t<path\r\n\t\t\t\t\td=\"M180 90C180 139.706 139.706 180 90 180C40.2944 180 0 139.706 0 90C0 40.2944 40.2944 0 90 0C139.706 0 180 40.2944 180 90ZM11.997 90C11.997 133.08 46.9201 168.003 90 168.003C133.80 168.003 168.003 133.08 168.003 90C168.003 46.9201 133.08 11.997 90 11.997C46.9201 11.997 11.997 46.9201 11.997 90Z\"\r\n\t\t\t\t\tclassName={styles.track()}\r\n\t\t\t\t/>\r\n\r\n\t\t\t\t<circle\r\n\t\t\t\t\tclassName={styles.indicator({ className: indicatorClassName, isIndeterminate: indeterminate })}\r\n\t\t\t\t\tcx=\"90\"\r\n\t\t\t\t\tcy=\"90\"\r\n\t\t\t\t\tr=\"84\"\r\n\t\t\t\t\tstrokeWidth=\"12\"\r\n\t\t\t\t\tstrokeDasharray={progressData.strokeDasharray}\r\n\t\t\t\t\tstrokeDashoffset={progressData.strokeDashoffset}\r\n\t\t\t\t\tstrokeLinecap=\"round\"\r\n\t\t\t\t\tdata-slot=\"progress-circle-indicator\"\r\n\t\t\t\t/>\r\n\t\t\t</svg>\r\n\t\t);\r\n\t}\r\n);\r\n\r\nProgressCircle.displayName = \"ProgressCircle\";\r\n","import React from \"react\";\r\nimport { PropsWithChildren } from \"react\";\r\nimport { tv } from \"tailwind-variants\";\r\n\r\nconst progressCircleDescriptionStyles = tv({\r\n\tbase: \"text-xs text-muted\"\r\n});\r\n\r\nexport type ProgressCircleDescriptionProps = React.HTMLAttributes<HTMLDivElement>;\r\n\r\nexport const ProgressCircleDescription = React.forwardRef<\r\n\tHTMLDivElement,\r\n\tPropsWithChildren<ProgressCircleDescriptionProps>\r\n>(({ className, children, ...props }, ref) => {\r\n\treturn (\r\n\t\t<span className={progressCircleDescriptionStyles({ className })} ref={ref} {...props}>\r\n\t\t\t{children}\r\n\t\t</span>\r\n\t);\r\n});\r\n\r\nProgressCircleDescription.displayName = \"ProgressCircleDescription\";\r\n","import React from \"react\";\r\nimport { PropsWithChildren } from \"react\";\r\nimport { tv, VariantProps } from \"tailwind-variants\";\r\n\r\nconst progressCircleTitleStyles = tv({\r\n\tbase: \"font-semibold text-primary-fg\",\r\n\tvariants: {\r\n\t\tsize: {\r\n\t\t\txs: \"text-[0.625rem] leading-4\",\r\n\t\t\tsm: \"text-sm\",\r\n\t\t\tmd: \"text-base\",\r\n\t\t\tlg: \"text-2xl\",\r\n\t\t\txl: \"text-4xl\"\r\n\t\t}\r\n\t},\r\n\tdefaultVariants: {\r\n\t\tsize: \"md\"\r\n\t}\r\n});\r\n\r\nexport type ProgressCircleTitleProps = VariantProps<typeof progressCircleTitleStyles> &\r\n\tReact.HTMLAttributes<HTMLDivElement>;\r\n\r\nexport const ProgressCircleTitle = React.forwardRef<HTMLDivElement, PropsWithChildren<ProgressCircleTitleProps>>(\r\n\t({ className, size, children, ...props }, ref) => {\r\n\t\treturn (\r\n\t\t\t<span className={progressCircleTitleStyles({ className, size })} ref={ref} {...props}>\r\n\t\t\t\t{children}\r\n\t\t\t</span>\r\n\t\t);\r\n\t}\r\n);\r\n\r\nProgressCircleTitle.displayName = \"ProgressCircleTitle\";\r\n","import { IconButton } from \"@/components/button\";\r\nimport { IconButtonProps } from \"@/components/button/icon-button/IconButton\";\r\nimport React from \"react\";\r\nimport { tv, VariantProps } from \"tailwind-variants\";\r\n\r\nconst progressCircleIconButtonVariants = tv({\r\n\tslots: {\r\n\t\tbase: \"p-0.5 text-muted\",\r\n\t\ticon: \"h-full w-full\"\r\n\t},\r\n\tvariants: {\r\n\t\tsize: {\r\n\t\t\txs: {\r\n\t\t\t\tbase: \"h-4 w-4\"\r\n\t\t\t},\r\n\t\t\tsm: {\r\n\t\t\t\tbase: \"h-5 w-5\"\r\n\t\t\t},\r\n\t\t\tmd: {\r\n\t\t\t\tbase: \"h-[1.375rem] w-[1.375rem]\"\r\n\t\t\t},\r\n\t\t\tlg: {\r\n\t\t\t\tbase: \"h-8 w-8\"\r\n\t\t\t},\r\n\t\t\txl: {\r\n\t\t\t\tbase: \"h-11 w-11\"\r\n\t\t\t}\r\n\t\t}\r\n\t},\r\n\tdefaultVariants: {\r\n\t\tsize: \"md\"\r\n\t}\r\n});\r\n\r\nexport type ProgressCircleIconButtonProps = VariantProps<typeof progressCircleIconButtonVariants> & IconButtonProps;\r\n\r\nexport const ProgressCircleIconButton: React.FC<ProgressCircleIconButtonProps> = ({\r\n\tclassName,\r\n\tsize,\r\n\ticon,\r\n\t...props\r\n}) => {\r\n\tconst styles = progressCircleIconButtonVariants();\r\n\treturn (\r\n\t\t<IconButton\r\n\t\t\ticon={icon}\r\n\t\t\tvariant=\"text\"\r\n\t\t\tclassName={styles.base({ className, size })}\r\n\t\t\ticonClassName={styles.icon()}\r\n\t\t\tsize={size}\r\n\t\t\t{...props}\r\n\t\t/>\r\n\t);\r\n};\r\n\r\nProgressCircleIconButton.displayName = \"ProgressCircleIconButton\";\r\n","import { tv } from \"tailwind-variants\";\r\nimport { ProgressCircle } from \"../ProgressCircle\";\r\nimport { ProgressCircleDescription } from \"../components/progress-circle-description/ProgressCircleDescription\";\r\nimport { ProgressCircleTitle } from \"../components/progress-circle-text/ProgressCircleTitle\";\r\nimport { ProgressCircleIconButton } from \"../components/progress-circle-icon-button/ProgressCircleIconButton\";\r\nimport { RotateCw } from \"lucide-react\";\r\n\r\nconst progressCircleTemplateStyles = tv({\r\n\tslots: {\r\n\t\twrap: \"relative w-fit\",\r\n\t\theader: \"absolute inset-0 z-10 flex flex-col items-center justify-center\"\r\n\t}\r\n});\r\n\r\nexport type ProgressCircleTemplateProps = {\r\n\tsize?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\r\n\tvalue?: number;\r\n\tmax?: number;\r\n\tindeterminate?: boolean;\r\n\tdescription?: React.ReactNode;\r\n\ttitle?: React.ReactNode;\r\n\tonRetry?: (e: React.MouseEvent<HTMLElement>) => void;\r\n};\r\n\r\nexport const ProgressCircleTemplate = (props: ProgressCircleTemplateProps) => {\r\n\tconst { size, value, max, indeterminate, description, title, onRetry } = props;\r\n\tconst shouldShowDescription = description && ![\"xs\", \"sm\"].includes(size as string);\r\n\tconst styles = progressCircleTemplateStyles({ size });\r\n\r\n\treturn (\r\n\t\t<div className={styles.wrap()}>\r\n\t\t\t<ProgressCircle value={value} max={max} indeterminate={indeterminate} size={size} />\r\n\t\t\t<div className={styles.header()}>\r\n\t\t\t\t{title && <ProgressCircleTitle size={size}>{title}</ProgressCircleTitle>}\r\n\t\t\t\t{onRetry && <ProgressCircleIconButton size={size} icon={RotateCw} onClick={onRetry} />}\r\n\t\t\t\t{shouldShowDescription && <ProgressCircleDescription>{description}</ProgressCircleDescription>}\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nProgressCircleTemplate.displayName = \"ProgressCircleTemplate\";\r\n"],"names":["progressCircleVariants","tv","ProgressCircle","React","size","max","value","indeterminate","indicatorClassName","ref","styles","currentValue","circumference","progressData","useMemo","safeMax","safeValue","percentage","progress","dashOffset","jsxs","jsx","progressCircleDescriptionStyles","ProgressCircleDescription","className","children","props","progressCircleTitleStyles","ProgressCircleTitle","progressCircleIconButtonVariants","ProgressCircleIconButton","icon","IconButton","progressCircleTemplateStyles","ProgressCircleTemplate","description","title","onRetry","shouldShowDescription","RotateCw"],"mappings":"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"}

package/dist/components/progress.d.ts

@@ -0,0 +1,2 @@
+export * from './progress/index'
+export {}