@choco-vanille/ui 1.1.1 → 1.2.0

package/dist/components/feedback/callout/components/callout-title/CalloutTitle.js

@@ -0,0 +1,28 @@
+import { jsx as r } from "react/jsx-runtime";
+import i from "../../../../foundation/typography/Typography.js";
+import "../../../../foundation/typography/styles/Typography.css.js";
+import { cn as e } from "../../../../../utils/cn.js";
+import { memo as p } from "react";
+const s = p(({
+  children: o,
+  className: t,
+  ref: m,
+  ...a
+}) => /* @__PURE__ */ r(
+  i,
+  {
+    ref: m,
+    as: "span",
+    variant: "span",
+    fontSize: "sm",
+    fontWeight: "semibold",
+    className: e(t),
+    ...a,
+    children: o
+  }
+));
+s.displayName = "Callout.Title";
+export {
+  s as default
+};
+//# sourceMappingURL=CalloutTitle.js.map

package/dist/components/feedback/callout/components/callout-title/CalloutTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CalloutTitle.js","sources":["../../../../../../src/components/feedback/callout/components/callout-title/CalloutTitle.tsx"],"sourcesContent":["import { Typography } from '@components/foundation/typography'\r\nimport type { CalloutTitleProps } from '@components/feedback/callout/components/callout-title/types/CalloutTitle.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\n\r\nconst CalloutTitle: FC<CalloutTitleProps> = memo(({\r\n    children,\r\n    className,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    return (\r\n        <Typography\r\n            ref={ref}\r\n            as={'span'}\r\n            variant={'span'}\r\n            fontSize={'sm'}\r\n            fontWeight={'semibold'}\r\n            className={cn(className)}\r\n            {...props}\r\n        >\r\n            {children}\r\n        </Typography>\r\n    )\r\n})\r\n\r\nCalloutTitle.displayName = 'Callout.Title'\r\n\r\nexport default CalloutTitle\r\n"],"names":["CalloutTitle","memo","children","className","ref","props","jsx","Typography","cn"],"mappings":";;;;;AAKA,MAAMA,IAAsCC,EAAK,CAAC;AAAA,EAC9C,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MAEQ,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,KAAAH;AAAA,IACA,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,WAAWI,EAAGL,CAAS;AAAA,IACtB,GAAGE;AAAA,IAEH,UAAAH;AAAA,EAAA;AAAA,CAGZ;AAEDF,EAAa,cAAc;"}

package/dist/components/feedback/callout/components/callout-title/index.d.ts

@@ -0,0 +1 @@
+export type { CalloutTitleProps } from './types/CalloutTitle.props.ts';

package/dist/components/feedback/callout/components/callout-title/types/CalloutTitle.props.d.ts

@@ -0,0 +1,6 @@
+import type * as React from 'react';
+/** Props for the Callout.Title sub-component. */
+export type CalloutTitleProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> & React.RefAttributes<HTMLSpanElement> & {
+    /** Title content. */
+    children: React.ReactNode;
+};

package/dist/components/feedback/callout/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './callout-icon';
+export * from './callout-title';
+export * from './callout-description';

package/dist/components/feedback/callout/constants/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../../../constants/icons.cjs"),s={info:r.IconRegistry.info,success:r.IconRegistry.success,warning:r.IconRegistry.warning,error:r.IconRegistry.error},e={info:"info",success:"success",warning:"warning",error:"destructive"};exports.VARIANT_TO_COLOR=e;exports.VARIANT_TO_ICON=s;
+//# sourceMappingURL=index.cjs.map

package/dist/components/feedback/callout/constants/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../../src/components/feedback/callout/constants/index.ts"],"sourcesContent":["import { IconRegistry } from '@constants/icons'\r\nimport type { CalloutVariant } from '@components/feedback/callout/types/Callout.types.ts'\r\nimport type { ThemeColor } from '@theme'\r\n\r\nexport const VARIANT_TO_ICON: Record<CalloutVariant, string> = {\r\n    info: IconRegistry.info,\r\n    success: IconRegistry.success,\r\n    warning: IconRegistry.warning,\r\n    error: IconRegistry.error,\r\n}\r\n\r\nexport const VARIANT_TO_COLOR: Record<CalloutVariant, ThemeColor> = {\r\n    info: 'info',\r\n    success: 'success',\r\n    warning: 'warning',\r\n    error: 'destructive',\r\n}\r\n"],"names":["VARIANT_TO_ICON","IconRegistry","VARIANT_TO_COLOR"],"mappings":"mIAIaA,EAAkD,CAC3D,KAAMC,EAAAA,aAAa,KACnB,QAASA,EAAAA,aAAa,QACtB,QAASA,EAAAA,aAAa,QACtB,MAAOA,EAAAA,aAAa,KACxB,EAEaC,EAAuD,CAChE,KAAM,OACN,QAAS,UACT,QAAS,UACT,MAAO,aACX"}

package/dist/components/feedback/callout/constants/index.d.ts

@@ -0,0 +1,4 @@
+import { CalloutVariant } from '../types/Callout.types.ts';
+import { ThemeColor } from '../../../../theme';
+export declare const VARIANT_TO_ICON: Record<CalloutVariant, string>;
+export declare const VARIANT_TO_COLOR: Record<CalloutVariant, ThemeColor>;

package/dist/components/feedback/callout/constants/index.js

@@ -0,0 +1,17 @@
+import { IconRegistry as r } from "../../../../constants/icons.js";
+const n = {
+  info: r.info,
+  success: r.success,
+  warning: r.warning,
+  error: r.error
+}, o = {
+  info: "info",
+  success: "success",
+  warning: "warning",
+  error: "destructive"
+};
+export {
+  o as VARIANT_TO_COLOR,
+  n as VARIANT_TO_ICON
+};
+//# sourceMappingURL=index.js.map

package/dist/components/feedback/callout/constants/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../src/components/feedback/callout/constants/index.ts"],"sourcesContent":["import { IconRegistry } from '@constants/icons'\r\nimport type { CalloutVariant } from '@components/feedback/callout/types/Callout.types.ts'\r\nimport type { ThemeColor } from '@theme'\r\n\r\nexport const VARIANT_TO_ICON: Record<CalloutVariant, string> = {\r\n    info: IconRegistry.info,\r\n    success: IconRegistry.success,\r\n    warning: IconRegistry.warning,\r\n    error: IconRegistry.error,\r\n}\r\n\r\nexport const VARIANT_TO_COLOR: Record<CalloutVariant, ThemeColor> = {\r\n    info: 'info',\r\n    success: 'success',\r\n    warning: 'warning',\r\n    error: 'destructive',\r\n}\r\n"],"names":["VARIANT_TO_ICON","IconRegistry","VARIANT_TO_COLOR"],"mappings":";AAIO,MAAMA,IAAkD;AAAA,EAC3D,MAAMC,EAAa;AAAA,EACnB,SAASA,EAAa;AAAA,EACtB,SAASA,EAAa;AAAA,EACtB,OAAOA,EAAa;AACxB,GAEaC,IAAuD;AAAA,EAChE,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACX;"}

package/dist/components/feedback/callout/context/Callout.context.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),e=t.createContext({variant:"info"});exports.CalloutContext=e;
+//# sourceMappingURL=Callout.context.cjs.map

package/dist/components/feedback/callout/context/Callout.context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.context.cjs","sources":["../../../../../src/components/feedback/callout/context/Callout.context.ts"],"sourcesContent":["import { createContext } from 'react'\r\n\r\nimport type { CalloutVariant } from '@components/feedback/callout/types/Callout.types.ts'\r\n\r\nexport interface CalloutContextValue {\r\n    variant: CalloutVariant\r\n}\r\n\r\nexport const CalloutContext = createContext<CalloutContextValue>({ variant: 'info' })\r\n"],"names":["CalloutContext","createContext"],"mappings":"yGAQaA,EAAiBC,EAAAA,cAAmC,CAAE,QAAS,OAAQ"}

package/dist/components/feedback/callout/context/Callout.context.d.ts

@@ -0,0 +1,6 @@
+import { CalloutVariant } from '../types/Callout.types.ts';
+import { Context } from 'react';
+export interface CalloutContextValue {
+    variant: CalloutVariant;
+}
+export declare const CalloutContext: Context<CalloutContextValue>;

package/dist/components/feedback/callout/context/Callout.context.js

@@ -0,0 +1,6 @@
+import { createContext as t } from "react";
+const e = t({ variant: "info" });
+export {
+  e as CalloutContext
+};
+//# sourceMappingURL=Callout.context.js.map

package/dist/components/feedback/callout/context/Callout.context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.context.js","sources":["../../../../../src/components/feedback/callout/context/Callout.context.ts"],"sourcesContent":["import { createContext } from 'react'\r\n\r\nimport type { CalloutVariant } from '@components/feedback/callout/types/Callout.types.ts'\r\n\r\nexport interface CalloutContextValue {\r\n    variant: CalloutVariant\r\n}\r\n\r\nexport const CalloutContext = createContext<CalloutContextValue>({ variant: 'info' })\r\n"],"names":["CalloutContext","createContext"],"mappings":";AAQO,MAAMA,IAAiBC,EAAmC,EAAE,SAAS,QAAQ;"}

package/dist/components/feedback/callout/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Callout } from './Callout.tsx';
+export { CALLOUT_STYLES } from './styles/Callout.css.ts';
+export type { CalloutProps } from './types/Callout.props.ts';
+export type { CalloutRole, CalloutVariant } from './types/Callout.types.ts';
+export type { CalloutCompound } from './types';
+export * from './components';

package/dist/components/feedback/callout/styles/Callout.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                              */;/* empty css                             */const e=require("@vanilla-extract/recipes/createRuntimeFn");var r={recipe:e.createRuntimeFn({defaultClassName:"_1ntoq5s0",variantClassNames:{variant:{info:"_1ntoq5s1",success:"_1ntoq5s2",warning:"_1ntoq5s3",error:"_1ntoq5s4"}},defaultVariants:{variant:"info"},compoundVariants:[]})};exports.CALLOUT_STYLES=r;
+//# sourceMappingURL=Callout.css.cjs.map

package/dist/components/feedback/callout/styles/Callout.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/feedback/callout/styles/Callout.css.d.ts

@@ -0,0 +1,28 @@
+import { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+export declare const CALLOUT_STYLES: {
+    recipe: RuntimeFn<{
+        variant: {
+            info: {
+                backgroundColor: `var(--${string})`;
+                borderColor: `var(--${string})`;
+                color: `var(--${string})`;
+            };
+            success: {
+                backgroundColor: `var(--${string})`;
+                borderColor: `var(--${string})`;
+                color: `var(--${string})`;
+            };
+            warning: {
+                backgroundColor: `var(--${string})`;
+                borderColor: `var(--${string})`;
+                color: `var(--${string})`;
+            };
+            error: {
+                backgroundColor: `var(--${string})`;
+                borderColor: `var(--${string})`;
+                color: `var(--${string})`;
+            };
+        };
+    }>;
+};
+export type CalloutRecipeVariants = NonNullable<RecipeVariants<typeof CALLOUT_STYLES.recipe>>;

package/dist/components/feedback/callout/styles/Callout.css.js

@@ -0,0 +1,8 @@
+/* empty css                                            */
+/* empty css                           */
+import { createRuntimeFn as a } from "@vanilla-extract/recipes/createRuntimeFn";
+var o = { recipe: a({ defaultClassName: "_1ntoq5s0", variantClassNames: { variant: { info: "_1ntoq5s1", success: "_1ntoq5s2", warning: "_1ntoq5s3", error: "_1ntoq5s4" } }, defaultVariants: { variant: "info" }, compoundVariants: [] }) };
+export {
+  o as CALLOUT_STYLES
+};
+//# sourceMappingURL=Callout.css.js.map

package/dist/components/feedback/callout/styles/Callout.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Callout.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/feedback/callout/types/Callout.props.d.ts

@@ -0,0 +1,20 @@
+import { CalloutRole, CalloutVariant } from './Callout.types.ts';
+import { IconProps } from '../../../foundation/icon';
+import type * as React from 'react';
+/** Props for the root Callout container. */
+export type CalloutProps = React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement> & {
+    /** Visual intent variant. Defaults to "info". */
+    variant?: CalloutVariant;
+    /**
+     * Accessible live-region role. Defaults to "status" (polite). Use "alert"
+     * for critical, time-sensitive messages that should interrupt the screen
+     * reader, or pass undefined to opt out of live-region semantics entirely.
+     */
+    role?: CalloutRole;
+    /** Optional icon identifier. A default icon is provided per variant. */
+    icon?: IconProps['icon'];
+    /** Optional title text. */
+    title?: React.ReactNode;
+    /** Optional description content. */
+    description?: React.ReactNode;
+};

package/dist/components/feedback/callout/types/Callout.types.d.ts

@@ -0,0 +1,4 @@
+/** Visual intent variants for the Callout component. */
+export type CalloutVariant = 'info' | 'success' | 'warning' | 'error';
+/** Accessible live-region role for the Callout root. */
+export type CalloutRole = 'alert' | 'status' | undefined;

package/dist/components/feedback/callout/types/index.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { default as CalloutDescription } from '../components/callout-description/CalloutDescription.tsx';
+import { default as CalloutIcon } from '../components/callout-icon/CalloutIcon.tsx';
+import { default as CalloutTitle } from '../components/callout-title/CalloutTitle.tsx';
+import { CalloutProps } from './Callout.props.ts';
+export type CalloutCompound = FC<CalloutProps> & {
+    Icon: typeof CalloutIcon;
+    Title: typeof CalloutTitle;
+    Description: typeof CalloutDescription;
+};

package/dist/components/feedback/index.d.ts

@@ -0,0 +1,4 @@
+export * from './skeleton';
+export * from './callout';
+export * from './toast';
+export * from './progress';

package/dist/components/feedback/progress/CircularProgress.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime");require("./constants/progressColors.const.cjs");const S=require("./constants/progressSizes.const.cjs"),i=require("./styles/Progress.css.cjs"),o=require("../../layout/box/Box.cjs");require("../../layout/box/styles/Box.css.cjs");const m=require("../../foundation/typography/Typography.cjs");require("../../foundation/typography/styles/Typography.css.cjs");const l=require("../../../utils/cn.cjs"),q=require("react"),I=require("./utils/clamp.utils.cjs"),p=q.memo(({value:g,color:u,size:r="sm",label:t,"aria-label":y,"aria-labelledby":f,quantityLabel:d,className:h,ref:v,...R})=>{const a=I.clamp(g),c=d===!0?`${Math.round(a)}%`:d,_=c??`${a}%`,s=S.PROGRESS_SIZE_TO_CIRCULAR_SIZE[r],j=S.PROGRESS_SIZE_TO_STROKE_WIDTH[r],n=(s-j)/2,x=2*Math.PI*n,E=x*(1-a/100);return e.jsxs(o,{ref:v,display:"inline-flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:"xs",className:h,...R,children:[e.jsxs(o,{as:"div",position:"relative",display:"inline-flex",alignItems:"center",justifyContent:"center",children:[e.jsxs("svg",{role:"progressbar","aria-valuenow":a,"aria-valuemin":0,"aria-valuemax":100,"aria-valuetext":_,"aria-label":t??y,"aria-labelledby":f,viewBox:`0 0 ${s} ${s}`,className:l.cn(i.PROGRESS_STYLES.circular({size:r})),children:[e.jsx("circle",{"data-progress-track":!0,cx:s/2,cy:s/2,r:n,className:l.cn(i.PROGRESS_STYLES.circularTrack({size:r,color:u}))}),e.jsx("circle",{"data-progress-indicator":!0,cx:s/2,cy:s/2,r:n,className:l.cn(i.PROGRESS_STYLES.circularIndicator({size:r,color:u})),style:{strokeDasharray:x,strokeDashoffset:E}})]}),c&&e.jsx(o,{as:"div",position:"absolute",display:"flex",alignItems:"center",justifyContent:"center",style:{inset:0},children:e.jsx(m,{as:"span",variant:"span",fontSize:r==="sm"?"xs":r==="lg"?"lg":"sm",fontWeight:"semibold",color:"text",children:c})})]}),t&&e.jsx(m,{as:"span",variant:"span",fontSize:"sm",color:"textSecondary",children:t})]})});p.displayName="CircularProgress";module.exports=p;
+//# sourceMappingURL=CircularProgress.cjs.map

package/dist/components/feedback/progress/CircularProgress.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress.cjs","sources":["../../../../src/components/feedback/progress/CircularProgress.tsx"],"sourcesContent":["import {\r\n    PROGRESS_SIZE_TO_CIRCULAR_SIZE,\r\n    PROGRESS_SIZE_TO_STROKE_WIDTH,\r\n} from '@components/feedback/progress/constants'\r\nimport { PROGRESS_STYLES } from '@components/feedback/progress/styles/Progress.css.ts'\r\nimport type { ProgressBaseProps, ProgressRenderProps } from '@components/feedback/progress/types/Progress.props.ts'\r\nimport { Box } from '@components/layout/box'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\nimport { clamp } from '@components/feedback/progress/utils/clamp.utils.ts'\r\n\r\nconst CircularProgress: FC<ProgressBaseProps> = memo<ProgressRenderProps>(({\r\n    value,\r\n    color,\r\n    size = 'sm',\r\n    label,\r\n    'aria-label': ariaLabel,\r\n    'aria-labelledby': ariaLabelledBy,\r\n    quantityLabel,\r\n    className,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const clampedValue = clamp(value)\r\n    const resolvedQuantityLabel =\r\n    quantityLabel === true ? `${Math.round(clampedValue)}%` : quantityLabel\r\n    const valueText = resolvedQuantityLabel ?? `${clampedValue}%`\r\n\r\n    const svgSize = PROGRESS_SIZE_TO_CIRCULAR_SIZE[size]\r\n    const strokeWidth = PROGRESS_SIZE_TO_STROKE_WIDTH[size]\r\n    const radius = (svgSize - strokeWidth) / 2\r\n    const circumference = 2 * Math.PI * radius\r\n    const dashOffset = circumference * (1 - clampedValue / 100)\r\n\r\n    return (\r\n        <Box\r\n            ref={ref}\r\n            display={'inline-flex'}\r\n            flexDirection={'column'}\r\n            alignItems={'center'}\r\n            justifyContent={'center'}\r\n            gap={'xs'}\r\n            className={className}\r\n            {...props}\r\n        >\r\n            <Box\r\n                as={'div'}\r\n                position={'relative'}\r\n                display={'inline-flex'}\r\n                alignItems={'center'}\r\n                justifyContent={'center'}\r\n            >\r\n                <svg\r\n                    role={'progressbar'}\r\n                    aria-valuenow={clampedValue}\r\n                    aria-valuemin={0}\r\n                    aria-valuemax={100}\r\n                    aria-valuetext={valueText}\r\n                    aria-label={label ?? ariaLabel}\r\n                    aria-labelledby={ariaLabelledBy}\r\n                    viewBox={`0 0 ${svgSize} ${svgSize}`}\r\n                    className={cn(PROGRESS_STYLES.circular({ size }))}\r\n                >\r\n                    <circle\r\n                        data-progress-track\r\n                        cx={svgSize / 2}\r\n                        cy={svgSize / 2}\r\n                        r={radius}\r\n                        className={cn(PROGRESS_STYLES.circularTrack({ size, color }))}\r\n                    />\r\n                    <circle\r\n                        data-progress-indicator\r\n                        cx={svgSize / 2}\r\n                        cy={svgSize / 2}\r\n                        r={radius}\r\n                        className={cn(PROGRESS_STYLES.circularIndicator({ size, color }))}\r\n                        style={{\r\n                            strokeDasharray: circumference,\r\n                            strokeDashoffset: dashOffset,\r\n                        }}\r\n                    />\r\n                </svg>\r\n                {resolvedQuantityLabel && (\r\n                    <Box\r\n                        as={'div'}\r\n                        position={'absolute'}\r\n                        display={'flex'}\r\n                        alignItems={'center'}\r\n                        justifyContent={'center'}\r\n                        style={{ inset: 0 }}\r\n                    >\r\n                        <Typography\r\n                            as={'span'}\r\n                            variant={'span'}\r\n                            fontSize={size === 'sm' ? 'xs' : size === 'lg' ? 'lg' : 'sm'}\r\n                            fontWeight={'semibold'}\r\n                            color={'text'}\r\n                        >\r\n                            {resolvedQuantityLabel}\r\n                        </Typography>\r\n                    </Box>\r\n                )}\r\n            </Box>\r\n            {label && (\r\n                <Typography\r\n                    as={'span'}\r\n                    variant={'span'}\r\n                    fontSize={'sm'}\r\n                    color={'textSecondary'}\r\n                >\r\n                    {label}\r\n                </Typography>\r\n            )}\r\n        </Box>\r\n    )\r\n})\r\n\r\nCircularProgress.displayName = 'CircularProgress'\r\n\r\nexport default CircularProgress\r\n"],"names":["CircularProgress","memo","value","color","size","label","ariaLabel","ariaLabelledBy","quantityLabel","className","ref","props","clampedValue","clamp","resolvedQuantityLabel","valueText","svgSize","PROGRESS_SIZE_TO_CIRCULAR_SIZE","strokeWidth","PROGRESS_SIZE_TO_STROKE_WIDTH","radius","circumference","dashOffset","jsxs","Box","cn","PROGRESS_STYLES","jsx","Typography"],"mappings":"qfAYMA,EAA0CC,EAAAA,KAA0B,CAAC,CACvE,MAAAC,EACA,MAAAC,EACA,KAAAC,EAAO,KACP,MAAAC,EACA,aAAcC,EACd,kBAAmBC,EACnB,cAAAC,EACA,UAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAeC,EAAAA,MAAMX,CAAK,EAC1BY,EACNN,IAAkB,GAAO,GAAG,KAAK,MAAMI,CAAY,CAAC,IAAMJ,EACpDO,EAAYD,GAAyB,GAAGF,CAAY,IAEpDI,EAAUC,EAAAA,+BAA+Bb,CAAI,EAC7Cc,EAAcC,EAAAA,8BAA8Bf,CAAI,EAChDgB,GAAUJ,EAAUE,GAAe,EACnCG,EAAgB,EAAI,KAAK,GAAKD,EAC9BE,EAAaD,GAAiB,EAAIT,EAAe,KAEvD,OACIW,EAAAA,KAACC,EAAA,CACG,IAAAd,EACA,QAAS,cACT,cAAe,SACf,WAAY,SACZ,eAAgB,SAChB,IAAK,KACL,UAAAD,EACC,GAAGE,EAEJ,SAAA,CAAAY,EAAAA,KAACC,EAAA,CACG,GAAI,MACJ,SAAU,WACV,QAAS,cACT,WAAY,SACZ,eAAgB,SAEhB,SAAA,CAAAD,EAAAA,KAAC,MAAA,CACG,KAAM,cACN,gBAAeX,EACf,gBAAe,EACf,gBAAe,IACf,iBAAgBG,EAChB,aAAYV,GAASC,EACrB,kBAAiBC,EACjB,QAAS,OAAOS,CAAO,IAAIA,CAAO,GAClC,UAAWS,EAAAA,GAAGC,EAAAA,gBAAgB,SAAS,CAAE,KAAAtB,CAAA,CAAM,CAAC,EAEhD,SAAA,CAAAuB,EAAAA,IAAC,SAAA,CACG,sBAAmB,GACnB,GAAIX,EAAU,EACd,GAAIA,EAAU,EACd,EAAGI,EACH,UAAWK,EAAAA,GAAGC,EAAAA,gBAAgB,cAAc,CAAE,KAAAtB,EAAM,MAAAD,EAAO,CAAC,CAAA,CAAA,EAEhEwB,EAAAA,IAAC,SAAA,CACG,0BAAuB,GACvB,GAAIX,EAAU,EACd,GAAIA,EAAU,EACd,EAAGI,EACH,UAAWK,EAAAA,GAAGC,kBAAgB,kBAAkB,CAAE,KAAAtB,EAAM,MAAAD,CAAA,CAAO,CAAC,EAChE,MAAO,CACH,gBAAiBkB,EACjB,iBAAkBC,CAAA,CACtB,CAAA,CACJ,CAAA,CAAA,EAEHR,GACGa,EAAAA,IAACH,EAAA,CACG,GAAI,MACJ,SAAU,WACV,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,MAAO,CAAE,MAAO,CAAA,EAEhB,SAAAG,EAAAA,IAACC,EAAA,CACG,GAAI,OACJ,QAAS,OACT,SAAUxB,IAAS,KAAO,KAAOA,IAAS,KAAO,KAAO,KACxD,WAAY,WACZ,MAAO,OAEN,SAAAU,CAAA,CAAA,CACL,CAAA,CACJ,CAAA,CAAA,EAGPT,GACGsB,EAAAA,IAACC,EAAA,CACG,GAAI,OACJ,QAAS,OACT,SAAU,KACV,MAAO,gBAEN,SAAAvB,CAAA,CAAA,CACL,CAAA,CAAA,CAIhB,CAAC,EAEDL,EAAiB,YAAc"}

package/dist/components/feedback/progress/CircularProgress.d.ts

@@ -0,0 +1,4 @@
+import { ProgressBaseProps } from './types/Progress.props.ts';
+import { FC } from 'react';
+declare const CircularProgress: FC<ProgressBaseProps>;
+export default CircularProgress;

package/dist/components/feedback/progress/CircularProgress.js

@@ -0,0 +1,129 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import "./constants/progressColors.const.js";
+import { PROGRESS_SIZE_TO_CIRCULAR_SIZE as E, PROGRESS_SIZE_TO_STROKE_WIDTH as T } from "./constants/progressSizes.const.js";
+import { PROGRESS_STYLES as l } from "./styles/Progress.css.js";
+import c from "../../layout/box/Box.js";
+import "../../layout/box/styles/Box.css.js";
+import u from "../../foundation/typography/Typography.js";
+import "../../foundation/typography/styles/Typography.css.js";
+import { cn as m } from "../../../utils/cn.js";
+import { memo as b } from "react";
+import { clamp as C } from "./utils/clamp.utils.js";
+const O = b(({
+  value: x,
+  color: p,
+  size: r = "sm",
+  label: s,
+  "aria-label": y,
+  "aria-labelledby": S,
+  quantityLabel: d,
+  className: g,
+  ref: h,
+  ...v
+}) => {
+  const t = C(x), i = d === !0 ? `${Math.round(t)}%` : d, I = i ?? `${t}%`, a = E[r], R = T[r], o = (a - R) / 2, f = 2 * Math.PI * o, _ = f * (1 - t / 100);
+  return /* @__PURE__ */ n(
+    c,
+    {
+      ref: h,
+      display: "inline-flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "xs",
+      className: g,
+      ...v,
+      children: [
+        /* @__PURE__ */ n(
+          c,
+          {
+            as: "div",
+            position: "relative",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            children: [
+              /* @__PURE__ */ n(
+                "svg",
+                {
+                  role: "progressbar",
+                  "aria-valuenow": t,
+                  "aria-valuemin": 0,
+                  "aria-valuemax": 100,
+                  "aria-valuetext": I,
+                  "aria-label": s ?? y,
+                  "aria-labelledby": S,
+                  viewBox: `0 0 ${a} ${a}`,
+                  className: m(l.circular({ size: r })),
+                  children: [
+                    /* @__PURE__ */ e(
+                      "circle",
+                      {
+                        "data-progress-track": !0,
+                        cx: a / 2,
+                        cy: a / 2,
+                        r: o,
+                        className: m(l.circularTrack({ size: r, color: p }))
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      "circle",
+                      {
+                        "data-progress-indicator": !0,
+                        cx: a / 2,
+                        cy: a / 2,
+                        r: o,
+                        className: m(l.circularIndicator({ size: r, color: p })),
+                        style: {
+                          strokeDasharray: f,
+                          strokeDashoffset: _
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              i && /* @__PURE__ */ e(
+                c,
+                {
+                  as: "div",
+                  position: "absolute",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  style: { inset: 0 },
+                  children: /* @__PURE__ */ e(
+                    u,
+                    {
+                      as: "span",
+                      variant: "span",
+                      fontSize: r === "sm" ? "xs" : r === "lg" ? "lg" : "sm",
+                      fontWeight: "semibold",
+                      color: "text",
+                      children: i
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        s && /* @__PURE__ */ e(
+          u,
+          {
+            as: "span",
+            variant: "span",
+            fontSize: "sm",
+            color: "textSecondary",
+            children: s
+          }
+        )
+      ]
+    }
+  );
+});
+O.displayName = "CircularProgress";
+export {
+  O as default
+};
+//# sourceMappingURL=CircularProgress.js.map

package/dist/components/feedback/progress/CircularProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress.js","sources":["../../../../src/components/feedback/progress/CircularProgress.tsx"],"sourcesContent":["import {\r\n    PROGRESS_SIZE_TO_CIRCULAR_SIZE,\r\n    PROGRESS_SIZE_TO_STROKE_WIDTH,\r\n} from '@components/feedback/progress/constants'\r\nimport { PROGRESS_STYLES } from '@components/feedback/progress/styles/Progress.css.ts'\r\nimport type { ProgressBaseProps, ProgressRenderProps } from '@components/feedback/progress/types/Progress.props.ts'\r\nimport { Box } from '@components/layout/box'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\nimport { clamp } from '@components/feedback/progress/utils/clamp.utils.ts'\r\n\r\nconst CircularProgress: FC<ProgressBaseProps> = memo<ProgressRenderProps>(({\r\n    value,\r\n    color,\r\n    size = 'sm',\r\n    label,\r\n    'aria-label': ariaLabel,\r\n    'aria-labelledby': ariaLabelledBy,\r\n    quantityLabel,\r\n    className,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const clampedValue = clamp(value)\r\n    const resolvedQuantityLabel =\r\n    quantityLabel === true ? `${Math.round(clampedValue)}%` : quantityLabel\r\n    const valueText = resolvedQuantityLabel ?? `${clampedValue}%`\r\n\r\n    const svgSize = PROGRESS_SIZE_TO_CIRCULAR_SIZE[size]\r\n    const strokeWidth = PROGRESS_SIZE_TO_STROKE_WIDTH[size]\r\n    const radius = (svgSize - strokeWidth) / 2\r\n    const circumference = 2 * Math.PI * radius\r\n    const dashOffset = circumference * (1 - clampedValue / 100)\r\n\r\n    return (\r\n        <Box\r\n            ref={ref}\r\n            display={'inline-flex'}\r\n            flexDirection={'column'}\r\n            alignItems={'center'}\r\n            justifyContent={'center'}\r\n            gap={'xs'}\r\n            className={className}\r\n            {...props}\r\n        >\r\n            <Box\r\n                as={'div'}\r\n                position={'relative'}\r\n                display={'inline-flex'}\r\n                alignItems={'center'}\r\n                justifyContent={'center'}\r\n            >\r\n                <svg\r\n                    role={'progressbar'}\r\n                    aria-valuenow={clampedValue}\r\n                    aria-valuemin={0}\r\n                    aria-valuemax={100}\r\n                    aria-valuetext={valueText}\r\n                    aria-label={label ?? ariaLabel}\r\n                    aria-labelledby={ariaLabelledBy}\r\n                    viewBox={`0 0 ${svgSize} ${svgSize}`}\r\n                    className={cn(PROGRESS_STYLES.circular({ size }))}\r\n                >\r\n                    <circle\r\n                        data-progress-track\r\n                        cx={svgSize / 2}\r\n                        cy={svgSize / 2}\r\n                        r={radius}\r\n                        className={cn(PROGRESS_STYLES.circularTrack({ size, color }))}\r\n                    />\r\n                    <circle\r\n                        data-progress-indicator\r\n                        cx={svgSize / 2}\r\n                        cy={svgSize / 2}\r\n                        r={radius}\r\n                        className={cn(PROGRESS_STYLES.circularIndicator({ size, color }))}\r\n                        style={{\r\n                            strokeDasharray: circumference,\r\n                            strokeDashoffset: dashOffset,\r\n                        }}\r\n                    />\r\n                </svg>\r\n                {resolvedQuantityLabel && (\r\n                    <Box\r\n                        as={'div'}\r\n                        position={'absolute'}\r\n                        display={'flex'}\r\n                        alignItems={'center'}\r\n                        justifyContent={'center'}\r\n                        style={{ inset: 0 }}\r\n                    >\r\n                        <Typography\r\n                            as={'span'}\r\n                            variant={'span'}\r\n                            fontSize={size === 'sm' ? 'xs' : size === 'lg' ? 'lg' : 'sm'}\r\n                            fontWeight={'semibold'}\r\n                            color={'text'}\r\n                        >\r\n                            {resolvedQuantityLabel}\r\n                        </Typography>\r\n                    </Box>\r\n                )}\r\n            </Box>\r\n            {label && (\r\n                <Typography\r\n                    as={'span'}\r\n                    variant={'span'}\r\n                    fontSize={'sm'}\r\n                    color={'textSecondary'}\r\n                >\r\n                    {label}\r\n                </Typography>\r\n            )}\r\n        </Box>\r\n    )\r\n})\r\n\r\nCircularProgress.displayName = 'CircularProgress'\r\n\r\nexport default CircularProgress\r\n"],"names":["CircularProgress","memo","value","color","size","label","ariaLabel","ariaLabelledBy","quantityLabel","className","ref","props","clampedValue","clamp","resolvedQuantityLabel","valueText","svgSize","PROGRESS_SIZE_TO_CIRCULAR_SIZE","strokeWidth","PROGRESS_SIZE_TO_STROKE_WIDTH","radius","circumference","dashOffset","jsxs","Box","cn","PROGRESS_STYLES","jsx","Typography"],"mappings":";;;;;;;;;;;AAYA,MAAMA,IAA0CC,EAA0B,CAAC;AAAA,EACvE,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,cAAcC;AAAA,EACd,mBAAmBC;AAAA,EACnB,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAeC,EAAMX,CAAK,GAC1BY,IACNN,MAAkB,KAAO,GAAG,KAAK,MAAMI,CAAY,CAAC,MAAMJ,GACpDO,IAAYD,KAAyB,GAAGF,CAAY,KAEpDI,IAAUC,EAA+Bb,CAAI,GAC7Cc,IAAcC,EAA8Bf,CAAI,GAChDgB,KAAUJ,IAAUE,KAAe,GACnCG,IAAgB,IAAI,KAAK,KAAKD,GAC9BE,IAAaD,KAAiB,IAAIT,IAAe;AAEvD,SACI,gBAAAW;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAd;AAAA,MACA,SAAS;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,KAAK;AAAA,MACL,WAAAD;AAAA,MACC,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAY;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,IAAI;AAAA,YACJ,UAAU;AAAA,YACV,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,gBAAgB;AAAA,YAEhB,UAAA;AAAA,cAAA,gBAAAD;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,MAAM;AAAA,kBACN,iBAAeX;AAAA,kBACf,iBAAe;AAAA,kBACf,iBAAe;AAAA,kBACf,kBAAgBG;AAAA,kBAChB,cAAYV,KAASC;AAAA,kBACrB,mBAAiBC;AAAA,kBACjB,SAAS,OAAOS,CAAO,IAAIA,CAAO;AAAA,kBAClC,WAAWS,EAAGC,EAAgB,SAAS,EAAE,MAAAtB,EAAA,CAAM,CAAC;AAAA,kBAEhD,UAAA;AAAA,oBAAA,gBAAAuB;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACG,uBAAmB;AAAA,wBACnB,IAAIX,IAAU;AAAA,wBACd,IAAIA,IAAU;AAAA,wBACd,GAAGI;AAAA,wBACH,WAAWK,EAAGC,EAAgB,cAAc,EAAE,MAAAtB,GAAM,OAAAD,GAAO,CAAC;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAEhE,gBAAAwB;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACG,2BAAuB;AAAA,wBACvB,IAAIX,IAAU;AAAA,wBACd,IAAIA,IAAU;AAAA,wBACd,GAAGI;AAAA,wBACH,WAAWK,EAAGC,EAAgB,kBAAkB,EAAE,MAAAtB,GAAM,OAAAD,EAAA,CAAO,CAAC;AAAA,wBAChE,OAAO;AAAA,0BACH,iBAAiBkB;AAAA,0BACjB,kBAAkBC;AAAA,wBAAA;AAAA,sBACtB;AAAA,oBAAA;AAAA,kBACJ;AAAA,gBAAA;AAAA,cAAA;AAAA,cAEHR,KACG,gBAAAa;AAAA,gBAACH;AAAA,gBAAA;AAAA,kBACG,IAAI;AAAA,kBACJ,UAAU;AAAA,kBACV,SAAS;AAAA,kBACT,YAAY;AAAA,kBACZ,gBAAgB;AAAA,kBAChB,OAAO,EAAE,OAAO,EAAA;AAAA,kBAEhB,UAAA,gBAAAG;AAAA,oBAACC;AAAA,oBAAA;AAAA,sBACG,IAAI;AAAA,sBACJ,SAAS;AAAA,sBACT,UAAUxB,MAAS,OAAO,OAAOA,MAAS,OAAO,OAAO;AAAA,sBACxD,YAAY;AAAA,sBACZ,OAAO;AAAA,sBAEN,UAAAU;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACL;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,QAAA;AAAA,QAGPT,KACG,gBAAAsB;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,IAAI;AAAA,YACJ,SAAS;AAAA,YACT,UAAU;AAAA,YACV,OAAO;AAAA,YAEN,UAAAvB;AAAA,UAAA;AAAA,QAAA;AAAA,MACL;AAAA,IAAA;AAAA,EAAA;AAIhB,CAAC;AAEDL,EAAiB,cAAc;"}

package/dist/components/feedback/progress/Progress.cjs

@@ -0,0 +1,2 @@
+"use strict";const e=require("react/jsx-runtime"),o=require("./styles/Progress.css.cjs"),t=require("../../layout/box/Box.cjs");require("../../layout/box/styles/Box.css.cjs");const u=require("../../foundation/typography/Typography.cjs");require("../../foundation/typography/styles/Typography.css.cjs");const m=require("../../../utils/cn.cjs"),j=require("react"),q=i=>Math.min(100,Math.max(0,i)),x=j.memo(({value:i,color:n,size:d="sm",borderRadius:c="sm",label:a,"aria-label":p,"aria-labelledby":S,quantityLabel:l,width:h="100%",className:g,ref:v,...y})=>{const s=q(i),r=l===!0?`${Math.round(s)}%`:l,f=r??`${s}%`;return e.jsxs(t,{ref:v,display:"flex",flexDirection:"column",gap:"xs",width:h,className:g,...y,children:[(a||r)&&e.jsxs(t,{display:"flex",justifyContent:"space-between",alignItems:"center",gap:"sm",children:[a&&e.jsx(u,{as:"span",variant:"span",fontSize:"sm",color:"textSecondary",children:a}),r&&e.jsx(u,{as:"span",variant:"span",fontSize:"sm",fontWeight:"medium",color:"textSecondary",children:r})]}),e.jsx(t,{as:"div",role:"progressbar","aria-valuenow":s,"aria-valuemin":0,"aria-valuemax":100,"aria-valuetext":f,"aria-label":a??p,"aria-labelledby":S,className:m.cn(o.PROGRESS_STYLES.recipe({size:d,borderRadius:c,color:n})),children:e.jsx(t,{as:"div","data-progress-fill":!0,width:`${s}%`,className:m.cn(o.PROGRESS_STYLES.fill({borderRadius:c,color:n}))})})]})});x.displayName="Progress";module.exports=x;
+//# sourceMappingURL=Progress.cjs.map

package/dist/components/feedback/progress/Progress.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.cjs","sources":["../../../../src/components/feedback/progress/Progress.tsx"],"sourcesContent":["import { PROGRESS_STYLES } from '@components/feedback/progress/styles/Progress.css.ts'\r\nimport type { ProgressBaseProps, ProgressRenderProps } from '@components/feedback/progress/types/Progress.props.ts'\r\nimport { Box } from '@components/layout/box'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\n\r\nconst clamp = (value: number) => Math.min(100, Math.max(0, value))\r\n\r\nconst Progress: FC<ProgressBaseProps> = memo<ProgressRenderProps>(({\r\n    value,\r\n    color,\r\n    size = 'sm',\r\n    borderRadius = 'sm',\r\n    label,\r\n    'aria-label': ariaLabel,\r\n    'aria-labelledby': ariaLabelledBy,\r\n    quantityLabel,\r\n    width = '100%',\r\n    className,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const clampedValue = clamp(value)\r\n    const resolvedQuantityLabel =\r\n    quantityLabel === true ? `${Math.round(clampedValue)}%` : quantityLabel\r\n    const valueText = resolvedQuantityLabel ?? `${clampedValue}%`\r\n\r\n    return (\r\n        <Box\r\n            ref={ref}\r\n            display={'flex'}\r\n            flexDirection={'column'}\r\n            gap={'xs'}\r\n            width={width}\r\n            className={className}\r\n            {...props}\r\n        >\r\n            {(label || resolvedQuantityLabel) && (\r\n                <Box\r\n                    display={'flex'}\r\n                    justifyContent={'space-between'}\r\n                    alignItems={'center'}\r\n                    gap={'sm'}\r\n                >\r\n                    {label && (\r\n                        <Typography\r\n                            as={'span'}\r\n                            variant={'span'}\r\n                            fontSize={'sm'}\r\n                            color={'textSecondary'}\r\n                        >\r\n                            {label}\r\n                        </Typography>\r\n                    )}\r\n                    {resolvedQuantityLabel && (\r\n                        <Typography\r\n                            as={'span'}\r\n                            variant={'span'}\r\n                            fontSize={'sm'}\r\n                            fontWeight={'medium'}\r\n                            color={'textSecondary'}\r\n                        >\r\n                            {resolvedQuantityLabel}\r\n                        </Typography>\r\n                    )}\r\n                </Box>\r\n            )}\r\n            <Box\r\n                as={'div'}\r\n                role={'progressbar'}\r\n                aria-valuenow={clampedValue}\r\n                aria-valuemin={0}\r\n                aria-valuemax={100}\r\n                aria-valuetext={valueText}\r\n                aria-label={label ?? ariaLabel}\r\n                aria-labelledby={ariaLabelledBy}\r\n                className={cn(PROGRESS_STYLES.recipe({ size, borderRadius, color }))}\r\n            >\r\n                <Box\r\n                    as={'div'}\r\n                    data-progress-fill\r\n                    width={`${clampedValue}%`}\r\n                    className={cn(PROGRESS_STYLES.fill({ borderRadius, color }))}\r\n                />\r\n            </Box>\r\n        </Box>\r\n    )\r\n})\r\n\r\nProgress.displayName = 'Progress'\r\n\r\nexport default Progress\r\n"],"names":["clamp","value","Progress","memo","color","size","borderRadius","label","ariaLabel","ariaLabelledBy","quantityLabel","width","className","ref","props","clampedValue","resolvedQuantityLabel","valueText","jsxs","Box","jsx","Typography","cn","PROGRESS_STYLES"],"mappings":"yWAOMA,EAASC,GAAkB,KAAK,IAAI,IAAK,KAAK,IAAI,EAAGA,CAAK,CAAC,EAE3DC,EAAkCC,EAAAA,KAA0B,CAAC,CAC/D,MAAAF,EACA,MAAAG,EACA,KAAAC,EAAO,KACP,aAAAC,EAAe,KACf,MAAAC,EACA,aAAcC,EACd,kBAAmBC,EACnB,cAAAC,EACA,MAAAC,EAAQ,OACR,UAAAC,EACA,IAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAef,EAAMC,CAAK,EAC1Be,EACNN,IAAkB,GAAO,GAAG,KAAK,MAAMK,CAAY,CAAC,IAAML,EACpDO,EAAYD,GAAyB,GAAGD,CAAY,IAE1D,OACIG,EAAAA,KAACC,EAAA,CACG,IAAAN,EACA,QAAS,OACT,cAAe,SACf,IAAK,KACL,MAAAF,EACA,UAAAC,EACC,GAAGE,EAEF,SAAA,EAAAP,GAASS,IACPE,EAAAA,KAACC,EAAA,CACG,QAAS,OACT,eAAgB,gBAChB,WAAY,SACZ,IAAK,KAEJ,SAAA,CAAAZ,GACGa,EAAAA,IAACC,EAAA,CACG,GAAI,OACJ,QAAS,OACT,SAAU,KACV,MAAO,gBAEN,SAAAd,CAAA,CAAA,EAGRS,GACGI,EAAAA,IAACC,EAAA,CACG,GAAI,OACJ,QAAS,OACT,SAAU,KACV,WAAY,SACZ,MAAO,gBAEN,SAAAL,CAAA,CAAA,CACL,CAAA,CAAA,EAIZI,EAAAA,IAACD,EAAA,CACG,GAAI,MACJ,KAAM,cACN,gBAAeJ,EACf,gBAAe,EACf,gBAAe,IACf,iBAAgBE,EAChB,aAAYV,GAASC,EACrB,kBAAiBC,EACjB,UAAWa,EAAAA,GAAGC,EAAAA,gBAAgB,OAAO,CAAE,KAAAlB,EAAM,aAAAC,EAAc,MAAAF,CAAA,CAAO,CAAC,EAEnE,SAAAgB,EAAAA,IAACD,EAAA,CACG,GAAI,MACJ,qBAAkB,GAClB,MAAO,GAAGJ,CAAY,IACtB,UAAWO,EAAAA,GAAGC,EAAAA,gBAAgB,KAAK,CAAE,aAAAjB,EAAc,MAAAF,EAAO,CAAC,CAAA,CAAA,CAC/D,CAAA,CACJ,CAAA,CAAA,CAGZ,CAAC,EAEDF,EAAS,YAAc"}

package/dist/components/feedback/progress/Progress.d.ts

@@ -0,0 +1,4 @@
+import { ProgressBaseProps } from './types/Progress.props.ts';
+import { FC } from 'react';
+declare const Progress: FC<ProgressBaseProps>;
+export default Progress;

package/dist/components/feedback/progress/Progress.js

@@ -0,0 +1,98 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { PROGRESS_STYLES as p } from "./styles/Progress.css.js";
+import i from "../../layout/box/Box.js";
+import "../../layout/box/styles/Box.css.js";
+import c from "../../foundation/typography/Typography.js";
+import "../../foundation/typography/styles/Typography.css.js";
+import { cn as d } from "../../../utils/cn.js";
+import { memo as b } from "react";
+const j = (s) => Math.min(100, Math.max(0, s)), w = b(({
+  value: s,
+  color: o,
+  size: f = "sm",
+  borderRadius: l = "sm",
+  label: a,
+  "aria-label": x,
+  "aria-labelledby": u,
+  quantityLabel: m,
+  width: h = "100%",
+  className: v,
+  ref: y,
+  ...g
+}) => {
+  const e = j(s), r = m === !0 ? `${Math.round(e)}%` : m, S = r ?? `${e}%`;
+  return /* @__PURE__ */ n(
+    i,
+    {
+      ref: y,
+      display: "flex",
+      flexDirection: "column",
+      gap: "xs",
+      width: h,
+      className: v,
+      ...g,
+      children: [
+        (a || r) && /* @__PURE__ */ n(
+          i,
+          {
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            gap: "sm",
+            children: [
+              a && /* @__PURE__ */ t(
+                c,
+                {
+                  as: "span",
+                  variant: "span",
+                  fontSize: "sm",
+                  color: "textSecondary",
+                  children: a
+                }
+              ),
+              r && /* @__PURE__ */ t(
+                c,
+                {
+                  as: "span",
+                  variant: "span",
+                  fontSize: "sm",
+                  fontWeight: "medium",
+                  color: "textSecondary",
+                  children: r
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ t(
+          i,
+          {
+            as: "div",
+            role: "progressbar",
+            "aria-valuenow": e,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuetext": S,
+            "aria-label": a ?? x,
+            "aria-labelledby": u,
+            className: d(p.recipe({ size: f, borderRadius: l, color: o })),
+            children: /* @__PURE__ */ t(
+              i,
+              {
+                as: "div",
+                "data-progress-fill": !0,
+                width: `${e}%`,
+                className: d(p.fill({ borderRadius: l, color: o }))
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+w.displayName = "Progress";
+export {
+  w as default
+};
+//# sourceMappingURL=Progress.js.map

package/dist/components/feedback/progress/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","sources":["../../../../src/components/feedback/progress/Progress.tsx"],"sourcesContent":["import { PROGRESS_STYLES } from '@components/feedback/progress/styles/Progress.css.ts'\r\nimport type { ProgressBaseProps, ProgressRenderProps } from '@components/feedback/progress/types/Progress.props.ts'\r\nimport { Box } from '@components/layout/box'\r\nimport { Typography } from '@components/foundation/typography'\r\nimport { cn } from '@utils/cn.ts'\r\nimport { memo, type FC } from 'react'\r\n\r\nconst clamp = (value: number) => Math.min(100, Math.max(0, value))\r\n\r\nconst Progress: FC<ProgressBaseProps> = memo<ProgressRenderProps>(({\r\n    value,\r\n    color,\r\n    size = 'sm',\r\n    borderRadius = 'sm',\r\n    label,\r\n    'aria-label': ariaLabel,\r\n    'aria-labelledby': ariaLabelledBy,\r\n    quantityLabel,\r\n    width = '100%',\r\n    className,\r\n    ref,\r\n    ...props\r\n}) => {\r\n    const clampedValue = clamp(value)\r\n    const resolvedQuantityLabel =\r\n    quantityLabel === true ? `${Math.round(clampedValue)}%` : quantityLabel\r\n    const valueText = resolvedQuantityLabel ?? `${clampedValue}%`\r\n\r\n    return (\r\n        <Box\r\n            ref={ref}\r\n            display={'flex'}\r\n            flexDirection={'column'}\r\n            gap={'xs'}\r\n            width={width}\r\n            className={className}\r\n            {...props}\r\n        >\r\n            {(label || resolvedQuantityLabel) && (\r\n                <Box\r\n                    display={'flex'}\r\n                    justifyContent={'space-between'}\r\n                    alignItems={'center'}\r\n                    gap={'sm'}\r\n                >\r\n                    {label && (\r\n                        <Typography\r\n                            as={'span'}\r\n                            variant={'span'}\r\n                            fontSize={'sm'}\r\n                            color={'textSecondary'}\r\n                        >\r\n                            {label}\r\n                        </Typography>\r\n                    )}\r\n                    {resolvedQuantityLabel && (\r\n                        <Typography\r\n                            as={'span'}\r\n                            variant={'span'}\r\n                            fontSize={'sm'}\r\n                            fontWeight={'medium'}\r\n                            color={'textSecondary'}\r\n                        >\r\n                            {resolvedQuantityLabel}\r\n                        </Typography>\r\n                    )}\r\n                </Box>\r\n            )}\r\n            <Box\r\n                as={'div'}\r\n                role={'progressbar'}\r\n                aria-valuenow={clampedValue}\r\n                aria-valuemin={0}\r\n                aria-valuemax={100}\r\n                aria-valuetext={valueText}\r\n                aria-label={label ?? ariaLabel}\r\n                aria-labelledby={ariaLabelledBy}\r\n                className={cn(PROGRESS_STYLES.recipe({ size, borderRadius, color }))}\r\n            >\r\n                <Box\r\n                    as={'div'}\r\n                    data-progress-fill\r\n                    width={`${clampedValue}%`}\r\n                    className={cn(PROGRESS_STYLES.fill({ borderRadius, color }))}\r\n                />\r\n            </Box>\r\n        </Box>\r\n    )\r\n})\r\n\r\nProgress.displayName = 'Progress'\r\n\r\nexport default Progress\r\n"],"names":["clamp","value","Progress","memo","color","size","borderRadius","label","ariaLabel","ariaLabelledBy","quantityLabel","width","className","ref","props","clampedValue","resolvedQuantityLabel","valueText","jsxs","Box","jsx","Typography","cn","PROGRESS_STYLES"],"mappings":";;;;;;;;AAOA,MAAMA,IAAQ,CAACC,MAAkB,KAAK,IAAI,KAAK,KAAK,IAAI,GAAGA,CAAK,CAAC,GAE3DC,IAAkCC,EAA0B,CAAC;AAAA,EAC/D,OAAAF;AAAA,EACA,OAAAG;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,cAAAC,IAAe;AAAA,EACf,OAAAC;AAAA,EACA,cAAcC;AAAA,EACd,mBAAmBC;AAAA,EACnB,eAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,GAAGC;AACP,MAAM;AACF,QAAMC,IAAef,EAAMC,CAAK,GAC1Be,IACNN,MAAkB,KAAO,GAAG,KAAK,MAAMK,CAAY,CAAC,MAAML,GACpDO,IAAYD,KAAyB,GAAGD,CAAY;AAE1D,SACI,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAN;AAAA,MACA,SAAS;AAAA,MACT,eAAe;AAAA,MACf,KAAK;AAAA,MACL,OAAAF;AAAA,MACA,WAAAC;AAAA,MACC,GAAGE;AAAA,MAEF,UAAA;AAAA,SAAAP,KAASS,MACP,gBAAAE;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,SAAS;AAAA,YACT,gBAAgB;AAAA,YAChB,YAAY;AAAA,YACZ,KAAK;AAAA,YAEJ,UAAA;AAAA,cAAAZ,KACG,gBAAAa;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBACG,IAAI;AAAA,kBACJ,SAAS;AAAA,kBACT,UAAU;AAAA,kBACV,OAAO;AAAA,kBAEN,UAAAd;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGRS,KACG,gBAAAI;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBACG,IAAI;AAAA,kBACJ,SAAS;AAAA,kBACT,UAAU;AAAA,kBACV,YAAY;AAAA,kBACZ,OAAO;AAAA,kBAEN,UAAAL;AAAA,gBAAA;AAAA,cAAA;AAAA,YACL;AAAA,UAAA;AAAA,QAAA;AAAA,QAIZ,gBAAAI;AAAA,UAACD;AAAA,UAAA;AAAA,YACG,IAAI;AAAA,YACJ,MAAM;AAAA,YACN,iBAAeJ;AAAA,YACf,iBAAe;AAAA,YACf,iBAAe;AAAA,YACf,kBAAgBE;AAAA,YAChB,cAAYV,KAASC;AAAA,YACrB,mBAAiBC;AAAA,YACjB,WAAWa,EAAGC,EAAgB,OAAO,EAAE,MAAAlB,GAAM,cAAAC,GAAc,OAAAF,EAAA,CAAO,CAAC;AAAA,YAEnE,UAAA,gBAAAgB;AAAA,cAACD;AAAA,cAAA;AAAA,gBACG,IAAI;AAAA,gBACJ,sBAAkB;AAAA,gBAClB,OAAO,GAAGJ,CAAY;AAAA,gBACtB,WAAWO,EAAGC,EAAgB,KAAK,EAAE,cAAAjB,GAAc,OAAAF,GAAO,CAAC;AAAA,cAAA;AAAA,YAAA;AAAA,UAC/D;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAGZ,CAAC;AAEDF,EAAS,cAAc;"}

package/dist/components/feedback/progress/constants/index.d.ts

@@ -0,0 +1,2 @@
+export { PROGRESS_COLORS, PROGRESS_COLORS_ARRAY, } from './progressColors.const.ts';
+export { PROGRESS_SIZE_TO_HEIGHT, PROGRESS_SIZE_TO_CIRCULAR_SIZE, PROGRESS_SIZE_TO_STROKE_WIDTH, } from './progressSizes.const.ts';

package/dist/components/feedback/progress/constants/progressColors.const.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={primary:"primary",secondary:"secondary",tertiary:"tertiary",destructive:"destructive",success:"success",warning:"warning",info:"info",purple:"purple",pink:"pink",orange:"orange",teal:"teal",cyan:"cyan",indigo:"indigo"},r=Object.values(e);exports.PROGRESS_COLORS=e;exports.PROGRESS_COLORS_ARRAY=r;
+//# sourceMappingURL=progressColors.const.cjs.map

package/dist/components/feedback/progress/constants/progressColors.const.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"progressColors.const.cjs","sources":["../../../../../src/components/feedback/progress/constants/progressColors.const.ts"],"sourcesContent":["export const PROGRESS_COLORS = {\r\n    primary: 'primary',\r\n    secondary: 'secondary',\r\n    tertiary: 'tertiary',\r\n    destructive: 'destructive',\r\n    success: 'success',\r\n    warning: 'warning',\r\n    info: 'info',\r\n    purple: 'purple',\r\n    pink: 'pink',\r\n    orange: 'orange',\r\n    teal: 'teal',\r\n    cyan: 'cyan',\r\n    indigo: 'indigo',\r\n} as const\r\n\r\nexport const PROGRESS_COLORS_ARRAY = Object.values(PROGRESS_COLORS)\r\n"],"names":["PROGRESS_COLORS","PROGRESS_COLORS_ARRAY"],"mappings":"gFAAO,MAAMA,EAAkB,CAC3B,QAAS,UACT,UAAW,YACX,SAAU,WACV,YAAa,cACb,QAAS,UACT,QAAS,UACT,KAAM,OACN,OAAQ,SACR,KAAM,OACN,OAAQ,SACR,KAAM,OACN,KAAM,OACN,OAAQ,QACZ,EAEaC,EAAwB,OAAO,OAAOD,CAAe"}

package/dist/components/feedback/progress/constants/progressColors.const.d.ts

@@ -0,0 +1,16 @@
+export declare const PROGRESS_COLORS: {
+    readonly primary: "primary";
+    readonly secondary: "secondary";
+    readonly tertiary: "tertiary";
+    readonly destructive: "destructive";
+    readonly success: "success";
+    readonly warning: "warning";
+    readonly info: "info";
+    readonly purple: "purple";
+    readonly pink: "pink";
+    readonly orange: "orange";
+    readonly teal: "teal";
+    readonly cyan: "cyan";
+    readonly indigo: "indigo";
+};
+export declare const PROGRESS_COLORS_ARRAY: ("primary" | "secondary" | "tertiary" | "success" | "warning" | "info" | "destructive" | "purple" | "pink" | "orange" | "teal" | "cyan" | "indigo")[];

package/dist/components/feedback/progress/constants/progressColors.const.js

@@ -0,0 +1,20 @@
+const e = {
+  primary: "primary",
+  secondary: "secondary",
+  tertiary: "tertiary",
+  destructive: "destructive",
+  success: "success",
+  warning: "warning",
+  info: "info",
+  purple: "purple",
+  pink: "pink",
+  orange: "orange",
+  teal: "teal",
+  cyan: "cyan",
+  indigo: "indigo"
+}, r = Object.values(e);
+export {
+  e as PROGRESS_COLORS,
+  r as PROGRESS_COLORS_ARRAY
+};
+//# sourceMappingURL=progressColors.const.js.map

package/dist/components/feedback/progress/constants/progressColors.const.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progressColors.const.js","sources":["../../../../../src/components/feedback/progress/constants/progressColors.const.ts"],"sourcesContent":["export const PROGRESS_COLORS = {\r\n    primary: 'primary',\r\n    secondary: 'secondary',\r\n    tertiary: 'tertiary',\r\n    destructive: 'destructive',\r\n    success: 'success',\r\n    warning: 'warning',\r\n    info: 'info',\r\n    purple: 'purple',\r\n    pink: 'pink',\r\n    orange: 'orange',\r\n    teal: 'teal',\r\n    cyan: 'cyan',\r\n    indigo: 'indigo',\r\n} as const\r\n\r\nexport const PROGRESS_COLORS_ARRAY = Object.values(PROGRESS_COLORS)\r\n"],"names":["PROGRESS_COLORS","PROGRESS_COLORS_ARRAY"],"mappings":"AAAO,MAAMA,IAAkB;AAAA,EAC3B,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AAAA,EACV,aAAa;AAAA,EACb,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AACZ,GAEaC,IAAwB,OAAO,OAAOD,CAAe;"}

package/dist/components/feedback/progress/constants/progressSizes.const.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S={xs:"0.25rem",sm:"0.5rem",md:"0.75rem",lg:"1rem",xl:"1.25rem"},_={xs:32,sm:48,md:64,lg:80,xl:96},E={xs:3,sm:4,md:6,lg:8,xl:10};exports.PROGRESS_SIZE_TO_CIRCULAR_SIZE=_;exports.PROGRESS_SIZE_TO_HEIGHT=S;exports.PROGRESS_SIZE_TO_STROKE_WIDTH=E;
+//# sourceMappingURL=progressSizes.const.cjs.map

package/dist/components/feedback/progress/constants/progressSizes.const.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"progressSizes.const.cjs","sources":["../../../../../src/components/feedback/progress/constants/progressSizes.const.ts"],"sourcesContent":["import type { ProgressSize } from '@components/feedback/progress/types/Progress.types.ts'\r\n\r\nexport const PROGRESS_SIZE_TO_HEIGHT: Record<ProgressSize, string> = {\r\n    xs: '0.25rem',\r\n    sm: '0.5rem',\r\n    md: '0.75rem',\r\n    lg: '1rem',\r\n    xl: '1.25rem',\r\n}\r\n\r\nexport const PROGRESS_SIZE_TO_CIRCULAR_SIZE: Record<ProgressSize, number> = {\r\n    xs: 32,\r\n    sm: 48,\r\n    md: 64,\r\n    lg: 80,\r\n    xl: 96,\r\n}\r\n\r\nexport const PROGRESS_SIZE_TO_STROKE_WIDTH: Record<ProgressSize, number> = {\r\n    xs: 3,\r\n    sm: 4,\r\n    md: 6,\r\n    lg: 8,\r\n    xl: 10,\r\n}\r\n"],"names":["PROGRESS_SIZE_TO_HEIGHT","PROGRESS_SIZE_TO_CIRCULAR_SIZE","PROGRESS_SIZE_TO_STROKE_WIDTH"],"mappings":"gFAEO,MAAMA,EAAwD,CACjE,GAAI,UACJ,GAAI,SACJ,GAAI,UACJ,GAAI,OACJ,GAAI,SACR,EAEaC,EAA+D,CACxE,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,GAAI,GACJ,GAAI,EACR,EAEaC,EAA8D,CACvE,GAAI,EACJ,GAAI,EACJ,GAAI,EACJ,GAAI,EACJ,GAAI,EACR"}