@ngrok/mantle 0.32.3 → 0.40.1

package/dist/popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A floating overlay that displays rich content in a portal, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#api-popover\n *\n * @example\n * ```tsx\n * <Popover>\n *   <PopoverTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </PopoverTrigger>\n *   <PopoverContent>\n *     <p>This is the popover content.</p>\n *   </PopoverContent>\n * </Popover>\n * ```\n */\nconst Popover = PopoverPrimitive.Root;\nPopover.displayName = \"Popover\";\n\n/**\n * The trigger button that opens the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#api-popover-trigger\n *\n * @example\n * ```tsx\n * <Popover>\n *   <PopoverTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </PopoverTrigger>\n *   <PopoverContent>\n *     <p>This is the popover content.</p>\n *   </PopoverContent>\n * </Popover>\n * ```\n */\nconst PopoverTrigger = PopoverPrimitive.Trigger;\nPopoverTrigger.displayName = \"PopoverTrigger\";\n\n/**\n * An optional element to position the PopoverContent against. If this part is not used, the content will position alongside the PopoverTrigger.\n *\n * @see https://mantle.ngrok.com/components/popover#api-popover-anchor\n *\n * @example\n * ```tsx\n * <Popover>\n *   <PopoverTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </PopoverTrigger>\n *   <PopoverAnchor asChild>\n *     <div>Anchor element</div>\n *   </PopoverAnchor>\n *   <PopoverContent>\n *     <p>This is the popover content.</p>\n *   </PopoverContent>\n * </Popover>\n * ```\n */\nconst PopoverAnchor = PopoverPrimitive.Anchor;\nPopoverAnchor.displayName = \"PopoverAnchor\";\n\n/**\n * A button that closes an open popover.\n *\n * @see https://mantle.ngrok.com/components/popover#api-popover-close\n *\n * @example\n * ```tsx\n * <Popover>\n *   <PopoverTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </PopoverTrigger>\n *   <PopoverContent>\n *     <p>This is the popover content.</p>\n *     <PopoverClose asChild>\n *       <Button type=\"button\">Close</Button>\n *     </PopoverClose>\n *   </PopoverContent>\n * </Popover>\n * ```\n */\nconst PopoverClose = PopoverPrimitive.Close;\nPopoverClose.displayName = \"PopoverClose\";\n\ntype PopoverContentProps = ComponentPropsWithoutRef<\n\ttypeof PopoverPrimitive.Content\n> & {\n\t/**\n\t * The preferred width of the `PopoverContent` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Popover`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `PopoverContent`\n\t *\n\t * @default `max-w-72`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The content to render inside the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#api-popover-content\n *\n * @example\n * ```tsx\n * <Popover>\n *   <PopoverTrigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </PopoverTrigger>\n *   <PopoverContent>\n *     <p>This is the popover content.</p>\n *   </PopoverContent>\n * </Popover>\n * ```\n */\nconst PopoverContent = forwardRef<ComponentRef<\"div\">, PopoverContentProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\talign = \"center\",\n\t\t\tclassName,\n\t\t\tonClick,\n\t\t\tpreferredWidth = \"max-w-72\",\n\t\t\tsideOffset = 4,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<PopoverPrimitive.Portal>\n\t\t\t<PopoverPrimitive.Content\n\t\t\t\talign={align}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 rounded-md border p-4 shadow-md outline-none\",\n\t\t\t\t\tpreferredWidth,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\t/**\n\t\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t\t * of the PopoverContent\n\t\t\t\t\t */\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</PopoverPrimitive.Portal>\n\t),\n);\nPopoverContent.displayName = \"PopoverContent\";\n\nexport {\n\t//,\n\tPopover,\n\tPopoverAnchor,\n\tPopoverClose,\n\tPopoverContent,\n\tPopoverTrigger,\n};\n"],"mappings":"wCAAA,UAAYA,MAAsB,0BAClC,OAAS,cAAAC,MAAkB,QAkJxB,cAAAC,MAAA,oBA1HH,IAAMC,EAA2B,OACjCA,EAAQ,YAAc,UAqBtB,IAAMC,EAAkC,UACxCA,EAAe,YAAc,iBAwB7B,IAAMC,EAAiC,SACvCA,EAAc,YAAc,gBAwB5B,IAAMC,EAAgC,QACtCA,EAAa,YAAc,eAmC3B,IAAMC,EAAiBC,EACtB,CACC,CAEC,MAAAC,EAAQ,SACR,UAAAC,EACA,QAAAC,EACA,eAAAC,EAAiB,WACjB,WAAAC,EAAa,EACb,GAAGC,CACJ,EACAC,IAEAb,EAAkB,SAAjB,CACA,SAAAA,EAAkB,UAAjB,CACA,MAAOO,EACP,UAAWO,EACV,maACAJ,EACAF,CACD,EACA,QAAUO,GAAU,CAKnBA,EAAM,gBAAgB,EACtBN,IAAUM,CAAK,CAChB,EACA,IAAKF,EACL,WAAYF,EACX,GAAGC,EACL,EACD,CAEF,EACAP,EAAe,YAAc","names":["PopoverPrimitive","forwardRef","jsx","Popover","PopoverTrigger","PopoverAnchor","PopoverClose","PopoverContent","forwardRef","align","className","onClick","preferredWidth","sideOffset","props","ref","cx","event"]}
+{"version":3,"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["import * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * A floating overlay that displays rich content in a portal, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#api-popover\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Root = PopoverPrimitive.Root;\nRoot.displayName = \"Popover\";\n\n/**\n * The trigger button that opens the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#api-popover-trigger\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Trigger = PopoverPrimitive.Trigger;\nTrigger.displayName = \"PopoverTrigger\";\n\n/**\n * An optional element to position the PopoverContent against. If this part is not used, the content will position alongside the PopoverTrigger.\n *\n * @see https://mantle.ngrok.com/components/popover#api-popover-anchor\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Anchor asChild>\n *     <div>Anchor element</div>\n *   </Popover.Anchor>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Anchor = PopoverPrimitive.Anchor;\nAnchor.displayName = \"PopoverAnchor\";\n\n/**\n * A button that closes an open popover.\n *\n * @see https://mantle.ngrok.com/components/popover#api-popover-close\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *     <Popover.Close asChild>\n *       <Button type=\"button\">Close</Button>\n *     </Popover.Close>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Close = PopoverPrimitive.Close;\nClose.displayName = \"PopoverClose\";\n\ntype PopoverContentProps = ComponentPropsWithoutRef<\n\ttypeof PopoverPrimitive.Content\n> & {\n\t/**\n\t * The preferred width of the `PopoverContent` as a tailwind `max-w-` class.\n\t *\n\t * By default, a `Popover`'s content width is responsive with a default\n\t * preferred width: the maximum width of the `PopoverContent`\n\t *\n\t * @default `max-w-72`\n\t */\n\tpreferredWidth?: `max-w-${string}`;\n};\n\n/**\n * The content to render inside the popover.\n *\n * @see https://mantle.ngrok.com/components/popover#api-popover-content\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Content = forwardRef<ComponentRef<\"div\">, PopoverContentProps>(\n\t(\n\t\t{\n\t\t\t//,\n\t\t\talign = \"center\",\n\t\t\tclassName,\n\t\t\tonClick,\n\t\t\tpreferredWidth = \"max-w-72\",\n\t\t\tsideOffset = 4,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => (\n\t\t<PopoverPrimitive.Portal>\n\t\t\t<PopoverPrimitive.Content\n\t\t\t\talign={align}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"text-popover-foreground border-popover bg-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 z-50 rounded-md border p-4 shadow-md outline-none\",\n\t\t\t\t\tpreferredWidth,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\t/**\n\t\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t\t * of the PopoverContent\n\t\t\t\t\t */\n\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</PopoverPrimitive.Portal>\n\t),\n);\nContent.displayName = \"PopoverContent\";\n\n/**\n * A floating overlay that displays rich content in a portal, triggered by a button.\n *\n * @see https://mantle.ngrok.com/components/popover\n *\n * @example\n * ```tsx\n * <Popover.Root>\n *   <Popover.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Popover\n *     </Button>\n *   </Popover.Trigger>\n *   <Popover.Content>\n *     <p>This is the popover content.</p>\n *   </Popover.Content>\n * </Popover.Root>\n * ```\n */\nconst Popover = {\n\t/**\n\t * The root, stateful component that manages the open/closed state of the popover.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#api-popover\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button>Open popover</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <p>This is the popover content.</p>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * An optional element to position the PopoverContent against. If not used, content positions alongside the trigger.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#api-popover-anchor\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Anchor asChild>\n\t *     <div>Position relative to this element</div>\n\t *   </Popover.Anchor>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\">Open Popover</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <Text>This popover is positioned relative to the anchor.</Text>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tAnchor,\n\t/**\n\t * A button that closes an open popover. Can be placed anywhere within the popover content.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#api-popover-close\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\">Settings</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <div className=\"flex items-center justify-between\">\n\t *       <Text>Settings Panel</Text>\n\t *       <Popover.Close asChild>\n\t *         <Button type=\"button\" appearance=\"ghost\" size=\"sm\">✕</Button>\n\t *       </Popover.Close>\n\t *     </div>\n\t *     <Text>Configure your preferences here.</Text>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tClose,\n\t/**\n\t * The content to render inside the popover. Appears in a portal with rich styling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#api-popover-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\">Show Info</Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content side=\"top\" align=\"center\">\n\t *     <div className=\"space-y-2\">\n\t *       <Text weight=\"strong\">Additional Information</Text>\n\t *       <Text>This is the content inside the popover.</Text>\n\t *       <Button type=\"button\" size=\"sm\">Action</Button>\n\t *     </div>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * The trigger button that opens the popover when clicked or focused.\n\t *\n\t * @see https://mantle.ngrok.com/components/popover#api-popover-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <Popover.Root>\n\t *   <Popover.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Options\n\t *     </Button>\n\t *   </Popover.Trigger>\n\t *   <Popover.Content>\n\t *     <div className=\"space-y-2\">\n\t *       <Button type=\"button\" variant=\"ghost\">Edit</Button>\n\t *       <Button type=\"button\" variant=\"ghost\">Delete</Button>\n\t *     </div>\n\t *   </Popover.Content>\n\t * </Popover.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tPopover,\n};\n"],"mappings":"wCAAA,UAAYA,MAAsB,0BAClC,OAAS,cAAAC,MAAkB,QAkJxB,cAAAC,MAAA,oBA1HH,IAAMC,EAAwB,OAC9BA,EAAK,YAAc,UAqBnB,IAAMC,EAA2B,UACjCA,EAAQ,YAAc,iBAwBtB,IAAMC,EAA0B,SAChCA,EAAO,YAAc,gBAwBrB,IAAMC,EAAyB,QAC/BA,EAAM,YAAc,eAmCpB,IAAMC,EAAUC,EACf,CACC,CAEC,MAAAC,EAAQ,SACR,UAAAC,EACA,QAAAC,EACA,eAAAC,EAAiB,WACjB,WAAAC,EAAa,EACb,GAAGC,CACJ,EACAC,IAEAb,EAAkB,SAAjB,CACA,SAAAA,EAAkB,UAAjB,CACA,MAAOO,EACP,UAAWO,EACV,maACAJ,EACAF,CACD,EACA,QAAUO,GAAU,CAKnBA,EAAM,gBAAgB,EACtBN,IAAUM,CAAK,CAChB,EACA,IAAKF,EACL,WAAYF,EACX,GAAGC,EACL,EACD,CAEF,EACAP,EAAQ,YAAc,iBAqBtB,IAAMW,EAAU,CAkBf,KAAAf,EAqBA,OAAAE,EAwBA,MAAAC,EAsBA,QAAAC,EAuBA,QAAAH,CACD","names":["PopoverPrimitive","forwardRef","jsx","Root","Trigger","Anchor","Close","Content","forwardRef","align","className","onClick","preferredWidth","sideOffset","props","ref","cx","event","Popover"]}

package/dist/progress.d.ts

@@ -34,49 +34,70 @@ type Props = SvgAttributes & {
      */
     value?: ValueType | undefined;
 };
+type ProgressDonutIndicatorProps = Omit<ComponentProps<"g">, "children">;
 /**
  * A simple circular progress bar which shows the completion progress of a task.
  *
  * The indicator color is inherited via `currentColor`. Override the default
- * (`accent-600`) by setting the `ProgressDonutIndicator`'s text color.
+ * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.
  *
- * @see https://mantle.ngrok.com/components/progress#api-progress-donut
+ * @see https://mantle.ngrok.com/components/progress
  *
  * @example
  * ```tsx
- * <ProgressDonut value={60}>
- *   <ProgressDonutIndicator />
- * </ProgressDonut>
+ * <ProgressDonut.Root value={60}>
+ *   <ProgressDonut.Indicator />
+ * </ProgressDonut.Root>
  *
- * <ProgressDonut value={60}>
- *   <ProgressDonutIndicator color="text-danger-600" />
- * </ProgressDonut>
+ * <ProgressDonut.Root value={60}>
+ *   <ProgressDonut.Indicator color="text-danger-600" />
+ * </ProgressDonut.Root>
  * ```
  */
 declare const ProgressDonut: {
-    ({ children, className, max: _max, strokeWidth: _strokeWidth, value: _value, ...props }: Props): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-type ProgressDonutIndicatorProps = Omit<ComponentProps<"g">, "children">;
-/**
- * The indicator for the circular progress bar.
- *
- * @see https://mantle.ngrok.com/components/progress#api-progress-donut-indicator
- *
- * @example
- * ```tsx
- * <ProgressDonut value={60}>
- *   <ProgressDonutIndicator />
- * </ProgressDonut>
- *
- * <ProgressDonut value={60}>
- *   <ProgressDonutIndicator color="text-danger-600" />
- * </ProgressDonut>
- * ```
- */
-declare const ProgressDonutIndicator: {
-    ({ className, ...props }: ProgressDonutIndicatorProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
+    /**
+     * A simple circular progress bar which shows the completion progress of a task.
+     *
+     * The indicator color is inherited via `currentColor`. Override the default
+     * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.
+     *
+     * @see https://mantle.ngrok.com/components/progress#api-progress-donut-root
+     *
+     * @example
+     * ```tsx
+     * <ProgressDonut.Root value={60}>
+     *   <ProgressDonut.Indicator />
+     * </ProgressDonut.Root>
+     *
+     * <ProgressDonut.Root value={60}>
+     *   <ProgressDonut.Indicator color="text-danger-600" />
+     * </ProgressDonut.Root>
+     * ```
+     */
+    readonly Root: {
+        ({ children, className, max: _max, strokeWidth: _strokeWidth, value: _value, ...props }: Props): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+    /**
+     * The indicator for the circular progress bar.
+     *
+     * @see https://mantle.ngrok.com/components/progress#api-progress-donut-indicator
+     *
+     * @example
+     * ```tsx
+     * <ProgressDonut.Root value={60}>
+     *   <ProgressDonut.Indicator />
+     * </ProgressDonut.Root>
+     *
+     * <ProgressDonut.Root value={60}>
+     *   <ProgressDonut.Indicator color="text-danger-600" />
+     * </ProgressDonut.Root>
+     * ```
+     */
+    readonly Indicator: {
+        ({ className, ...props }: ProgressDonutIndicatorProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
 };
 
 type RootProps = ComponentProps<"div"> & {
@@ -152,20 +173,76 @@ declare namespace Indicator {
     var displayName: string;
 }
 /**
- * A horizontal progress bar component that shows the completion progress of a task.
+ * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
+ *
+ * A horizontal progress bar that shows the completion progress of a task.
+ * Use this component for linear progress indication.
+ *
+ * @see https://mantle.ngrok.com/components/progress
  *
  * @example
  * ```tsx
- * import { ProgressBar } from "@ngrok/mantle/progress";
- *
  * <ProgressBar.Root value={60}>
  *   <ProgressBar.Indicator />
  * </ProgressBar.Root>
+ *
+ * <ProgressBar.Root value={75} max={100}>
+ *   <ProgressBar.Indicator />
+ * </ProgressBar.Root>
+ *
+ * // Indeterminate progress
+ * <ProgressBar.Root value="indeterminate">
+ *   <ProgressBar.Indicator />
+ * </ProgressBar.Root>
  * ```
  */
 declare const ProgressBar: {
+    /**
+     * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
+     *
+     * A horizontal progress bar that shows the completion progress of a task.
+     * Use this component for linear progress indication.
+     *
+     * @see https://mantle.ngrok.com/components/progress#api-progress-bar
+     *
+     * @example
+     * ```tsx
+     * <ProgressBar.Root value={60}>
+     *   <ProgressBar.Indicator />
+     * </ProgressBar.Root>
+     *
+     * <ProgressBar.Root value={75} max={100}>
+     *   <ProgressBar.Indicator />
+     * </ProgressBar.Root>
+     *
+     * // Indeterminate progress
+     * <ProgressBar.Root value="indeterminate">
+     *   <ProgressBar.Indicator />
+     * </ProgressBar.Root>
+     * ```
+     */
     readonly Root: typeof Root;
+    /**
+     * Displays the progress indicator, which visually represents the completion progress of a task.
+     *
+     * The visual indicator that shows the actual progress within the progress bar.
+     * This component should be used inside a ProgressBar.Root component.
+     *
+     * @see https://mantle.ngrok.com/components/progress#api-progress-bar-indicator
+     *
+     * @example
+     * ```tsx
+     * <ProgressBar.Root value={60}>
+     *   <ProgressBar.Indicator />
+     * </ProgressBar.Root>
+     *
+     * // Custom styled indicator
+     * <ProgressBar.Root value={60}>
+     *   <ProgressBar.Indicator className="bg-success-600" />
+     * </ProgressBar.Root>
+     * ```
+     */
     readonly Indicator: typeof Indicator;
 };
 
-export { ProgressBar, ProgressDonut, ProgressDonutIndicator };
+export { ProgressBar, ProgressDonut };

package/dist/progress.js

@@ -1,2 +1,2 @@
-import{a as m}from"./chunk-AZ56JGNY.js";import h from"clsx";import{createContext as R,useContext as A,useId as G,useMemo as L}from"react";function N(e,{min:t,max:o}){return Math.min(o,Math.max(t,e))}function l(e){return typeof e=="number"}function d(e,t){return l(e)&&!Number.isNaN(e)&&e<=t&&e>=0}function p(e){return l(e)&&!Number.isNaN(e)&&e>0}import{jsx as c,jsxs as P}from"react/jsx-runtime";var f=100,g={max:f,strokeWidth:"0.25rem",value:0},V=R(g),C=({children:e,className:t,max:o=f,strokeWidth:r=4,value:n,...a})=>{let s=p(o)?o:f,i=d(n,s)?n:n==null?0:"indeterminate",u=w(r??g.strokeWidth),y=l(i)?i:void 0,W=I(u),D=L(()=>({max:s,strokeWidth:u,value:i}),[s,u,i]);return c(V.Provider,{value:D,children:P("svg",{"aria-valuemax":s,"aria-valuemin":0,"aria-valuenow":y,className:h(i==="indeterminate"&&"animation-duration-[15s] transform-gpu animate-spin",m("size-6 text-gray-200 dark:text-gray-300",t)),"data-max":s,"data-min":0,"data-value":y,height:"100%",role:"progressbar",width:"100%",...a,children:[c("circle",{className:"[r:var(--radius)]",cx:"50%",cy:"50%",fill:"transparent",stroke:"currentColor",strokeWidth:u,style:{"--radius":W}}),e]})})};C.displayName="ProgressDonut";var $=.6,k=({className:e,...t})=>{let o=G(),r=A(V)??g,n=(r.value==="indeterminate"?$:r.value/r.max)*100,a=w(r.strokeWidth),s=I(a);return P("g",{className:m("text-accent-600",e),...t,children:[r.value==="indeterminate"&&c("defs",{children:P("linearGradient",{id:o,children:[c("stop",{className:"stop-opacity-100 stop-color-current",offset:"0%"}),c("stop",{className:"stop-opacity-0 stop-color-current",offset:"95%"})]})}),c("circle",{className:h("[r:var(--radius)]","origin-center"),cx:"50%",cy:"50%",fill:"transparent",pathLength:100,stroke:r.value==="indeterminate"?`url(#${o})`:"currentColor",strokeDasharray:100,strokeDashoffset:100-n,strokeLinecap:"round",strokeWidth:a,style:{"--radius":s},transform:"rotate(-90)"})]})};k.displayName="ProgressDonutIndicator";function w(e){let t=4;if(e==null)return t;typeof e=="number"?t=e:e.endsWith("rem")?t=Number(e.replace("rem",""))*16:t=Number(e);let o=Number.isNaN(t)?4:t;return N(o,{min:1,max:12})}function I(e){return`calc(50% - ${e/2}px)`}import*as x from"@radix-ui/react-progress";import{createContext as B,useContext as E,useMemo as H}from"react";import{jsx as v}from"react/jsx-runtime";var b=100,O={max:b,value:0},S=B(O);function T({className:e,children:t,max:o=b,value:r,...n}){let a=p(o)?o:b,s=d(r,a)?r:r==null?0:"indeterminate",i=l(s)?s:void 0,u=H(()=>({max:a,value:s}),[a,s]);return v(S.Provider,{value:u,children:v(x.Root,{"data-slot":"progress",className:m("bg-base-hover dark:bg-base shadow-inner relative h-3 w-full overflow-hidden rounded-md",e),value:i,max:a,...n,children:t})})}T.displayName="Root";function M({className:e,style:t,...o}){let r=E(S),{max:n}=r,a=r.value==="indeterminate"?0:r.value,s=(n-a)/n*100;return v(x.Indicator,{"data-slot":"progress-indicator",className:m("bg-accent-600 h-full w-full flex-1 transition-all",e),style:{...t,transform:`translateX(-${s}%)`},...o})}M.displayName="Indicator";var z={Root:T,Indicator:M};export{z as ProgressBar,C as ProgressDonut,k as ProgressDonutIndicator};
+import{a as m}from"./chunk-AZ56JGNY.js";import h from"clsx";import{createContext as D,useContext as A,useId as G,useMemo as L}from"react";function N(e,{min:t,max:o}){return Math.min(o,Math.max(t,e))}function l(e){return typeof e=="number"}function d(e,t){return l(e)&&!Number.isNaN(e)&&e<=t&&e>=0}function p(e){return l(e)&&!Number.isNaN(e)&&e>0}import{jsx as c,jsxs as P}from"react/jsx-runtime";var f=100,g={max:f,strokeWidth:"0.25rem",value:0},V=D(g),C=({children:e,className:t,max:o=f,strokeWidth:r=4,value:n,...a})=>{let s=p(o)?o:f,i=d(n,s)?n:n==null?0:"indeterminate",u=w(r??g.strokeWidth),y=l(i)?i:void 0,R=S(u),W=L(()=>({max:s,strokeWidth:u,value:i}),[s,u,i]);return c(V.Provider,{value:W,children:P("svg",{"aria-valuemax":s,"aria-valuemin":0,"aria-valuenow":y,className:h(i==="indeterminate"&&"animation-duration-[15s] transform-gpu animate-spin",m("size-6 text-gray-200 dark:text-gray-300",t)),"data-max":s,"data-min":0,"data-value":y,height:"100%",role:"progressbar",width:"100%",...a,children:[c("circle",{className:"[r:var(--radius)]",cx:"50%",cy:"50%",fill:"transparent",stroke:"currentColor",strokeWidth:u,style:{"--radius":R}}),e]})})};C.displayName="ProgressDonut";var $=.6,k=({className:e,...t})=>{let o=G(),r=A(V)??g,n=(r.value==="indeterminate"?$:r.value/r.max)*100,a=w(r.strokeWidth),s=S(a);return P("g",{className:m("text-accent-600",e),...t,children:[r.value==="indeterminate"&&c("defs",{children:P("linearGradient",{id:o,children:[c("stop",{className:"stop-opacity-100 stop-color-current",offset:"0%"}),c("stop",{className:"stop-opacity-0 stop-color-current",offset:"95%"})]})}),c("circle",{className:h("[r:var(--radius)]","origin-center"),cx:"50%",cy:"50%",fill:"transparent",pathLength:100,stroke:r.value==="indeterminate"?`url(#${o})`:"currentColor",strokeDasharray:100,strokeDashoffset:100-n,strokeLinecap:"round",strokeWidth:a,style:{"--radius":s},transform:"rotate(-90)"})]})};k.displayName="ProgressDonutIndicator";var B={Root:C,Indicator:k};function w(e){let t=4;if(e==null)return t;typeof e=="number"?t=e:e.endsWith("rem")?t=Number(e.replace("rem",""))*16:t=Number(e);let o=Number.isNaN(t)?4:t;return N(o,{min:1,max:12})}function S(e){return`calc(50% - ${e/2}px)`}import*as x from"@radix-ui/react-progress";import{createContext as E,useContext as H,useMemo as O}from"react";import{jsx as v}from"react/jsx-runtime";var b=100,z={max:b,value:0},I=E(z);function T({className:e,children:t,max:o=b,value:r,...n}){let a=p(o)?o:b,s=d(r,a)?r:r==null?0:"indeterminate",i=l(s)?s:void 0,u=O(()=>({max:a,value:s}),[a,s]);return v(I.Provider,{value:u,children:v(x.Root,{"data-slot":"progress",className:m("bg-base-hover dark:bg-base shadow-inner relative h-3 w-full overflow-hidden rounded-md",e),value:i,max:a,...n,children:t})})}T.displayName="Root";function M({className:e,style:t,...o}){let r=H(I),{max:n}=r,a=r.value==="indeterminate"?0:r.value,s=(n-a)/n*100;return v(x.Indicator,{"data-slot":"progress-indicator",className:m("bg-accent-600 h-full w-full flex-1 transition-all",e),style:{...t,transform:`translateX(-${s}%)`},...o})}M.displayName="Indicator";var X={Root:T,Indicator:M};export{X as ProgressBar,B as ProgressDonut};
 //# sourceMappingURL=progress.js.map

package/dist/progress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/progress/progress-donut.tsx","../src/components/progress/math.ts","../src/components/progress/progress-bar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { createContext, useContext, useId, useMemo } from \"react\";\nimport type { CSSProperties, ComponentProps, HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport {\n\tclamp,\n\tisNumber,\n\tisValidMaxNumber,\n\tisValidValueNumber,\n} from \"./math.js\";\nimport type { ValueType } from \"./types.js\";\n\ntype RemValue = `${number}rem`;\ntype StrokeWidth = number | RemValue;\n\n/**\n * The default maximum value of the progress bar.\n */\nconst defaultMax = 100;\n\ntype ProgressContextValue = {\n\tmax: number;\n\tstrokeWidth: StrokeWidth;\n\tvalue: ValueType;\n};\n\nconst defaultContextValue = {\n\tmax: defaultMax,\n\tstrokeWidth: \"0.25rem\",\n\tvalue: 0,\n} as const satisfies ProgressContextValue;\n\nconst ProgressContext =\n\tcreateContext<ProgressContextValue>(defaultContextValue);\n\ntype SvgAttributes = Omit<\n\tHTMLAttributes<SVGElement>,\n\t| \"viewBox\"\n\t| \"role\"\n\t| \"aria-valuemax\"\n\t| \"aria-valuemin\"\n\t| \"aria-valuenow\"\n\t| \"width\"\n\t| \"height\"\n>;\n\ntype Props = SvgAttributes & {\n\t/**\n\t * The maximum value of the progress bar.\n\t * This attribute describes how much work the task indicated by the progress element requires.\n\t * The max attribute, if present, must have a value greater than 0. The default value is 100.\n\t *\n\t * @default 100\n\t */\n\tmax?: number | undefined;\n\t/**\n\t * The width of the progress bar stroke.\n\t * Note, we clamp the stroke width to a minimum of 1px and max of 12px since\n\t * it is proportional to the viewbox size (0 0 32 32).\n\t *\n\t * @default 0.25rem (4px)\n\t */\n\tstrokeWidth?: StrokeWidth;\n\t/**\n\t * The current value of the progress bar.\n\t * This attribute specifies how much of the task that has been completed.\n\t * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.\n\t * If set to `\"indeterminate\"`, the progress bar is considered indeterminate.\n\t *\n\t * @default 0\n\t */\n\tvalue?: ValueType | undefined;\n};\n\n/**\n * A simple circular progress bar which shows the completion progress of a task.\n *\n * The indicator color is inherited via `currentColor`. Override the default\n * (`accent-600`) by setting the `ProgressDonutIndicator`'s text color.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-donut\n *\n * @example\n * ```tsx\n * <ProgressDonut value={60}>\n *   <ProgressDonutIndicator />\n * </ProgressDonut>\n *\n * <ProgressDonut value={60}>\n *   <ProgressDonutIndicator color=\"text-danger-600\" />\n * </ProgressDonut>\n * ```\n */\nconst ProgressDonut = ({\n\tchildren,\n\tclassName,\n\tmax: _max = defaultMax,\n\tstrokeWidth: _strokeWidth = 4,\n\tvalue: _value,\n\t...props\n}: Props) => {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = (\n\t\tisValidValueNumber(_value, max)\n\t\t\t? _value\n\t\t\t: _value == null\n\t\t\t\t? 0\n\t\t\t\t: \"indeterminate\"\n\t) satisfies ValueType;\n\tconst strokeWidthPx = deriveStrokeWidthPx(\n\t\t_strokeWidth ?? defaultContextValue.strokeWidth,\n\t);\n\tconst valueNow = isNumber(value) ? value : undefined;\n\tconst radius = calcRadius(strokeWidthPx);\n\n\tconst ctx: ProgressContextValue = useMemo(\n\t\t() => ({\n\t\t\tmax,\n\t\t\tstrokeWidth: strokeWidthPx,\n\t\t\tvalue,\n\t\t}),\n\t\t[max, strokeWidthPx, value],\n\t);\n\n\treturn (\n\t\t<ProgressContext.Provider value={ctx}>\n\t\t\t{/* biome-ignore lint/a11y/useFocusableInteractive: progress bars don't need to be focusable */}\n\t\t\t<svg\n\t\t\t\taria-valuemax={max}\n\t\t\t\taria-valuemin={0}\n\t\t\t\taria-valuenow={valueNow}\n\t\t\t\tclassName={clsx(\n\t\t\t\t\tvalue === \"indeterminate\" &&\n\t\t\t\t\t\t\"animation-duration-[15s] transform-gpu animate-spin\",\n\t\t\t\t\tcx(\"size-6 text-gray-200 dark:text-gray-300\", className),\n\t\t\t\t)}\n\t\t\t\tdata-max={max}\n\t\t\t\tdata-min={0}\n\t\t\t\tdata-value={valueNow}\n\t\t\t\theight=\"100%\"\n\t\t\t\t// biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: this is a radial progress bar, which is possible by SVG\n\t\t\t\trole=\"progressbar\"\n\t\t\t\twidth=\"100%\"\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<circle\n\t\t\t\t\tclassName=\"[r:var(--radius)]\"\n\t\t\t\t\tcx=\"50%\"\n\t\t\t\t\tcy=\"50%\"\n\t\t\t\t\tfill=\"transparent\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth={strokeWidthPx}\n\t\t\t\t\tstyle={{ \"--radius\": radius } as CSSProperties}\n\t\t\t\t/>\n\t\t\t\t{children}\n\t\t\t</svg>\n\t\t</ProgressContext.Provider>\n\t);\n};\nProgressDonut.displayName = \"ProgressDonut\";\n\n/**\n * Length (value) of the progress indicator tail when the progress bar is indeterminate.\n */\nconst indeterminateTailPercent = 0.6;\n\ntype ProgressDonutIndicatorProps = Omit<ComponentProps<\"g\">, \"children\">;\n\n/**\n * The indicator for the circular progress bar.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-donut-indicator\n *\n * @example\n * ```tsx\n * <ProgressDonut value={60}>\n *   <ProgressDonutIndicator />\n * </ProgressDonut>\n *\n * <ProgressDonut value={60}>\n *   <ProgressDonutIndicator color=\"text-danger-600\" />\n * </ProgressDonut>\n * ```\n */\nconst ProgressDonutIndicator = ({\n\tclassName,\n\t...props\n}: ProgressDonutIndicatorProps) => {\n\tconst gradientId = useId();\n\tconst ctx = useContext(ProgressContext) ?? defaultContextValue;\n\tconst percentage =\n\t\t(ctx.value === \"indeterminate\"\n\t\t\t? indeterminateTailPercent\n\t\t\t: ctx.value / ctx.max) * 100;\n\tconst strokeWidthPx = deriveStrokeWidthPx(ctx.strokeWidth);\n\tconst radius = calcRadius(strokeWidthPx);\n\n\treturn (\n\t\t<g className={cx(\"text-accent-600\", className)} {...props}>\n\t\t\t{ctx.value === \"indeterminate\" && (\n\t\t\t\t<defs>\n\t\t\t\t\t<linearGradient id={gradientId}>\n\t\t\t\t\t\t<stop className=\"stop-opacity-100 stop-color-current\" offset=\"0%\" />\n\t\t\t\t\t\t<stop className=\"stop-opacity-0 stop-color-current\" offset=\"95%\" />\n\t\t\t\t\t</linearGradient>\n\t\t\t\t</defs>\n\t\t\t)}\n\t\t\t<circle\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"[r:var(--radius)]\", // set the circle radius to be the value of the calc'd CSS variable set on the style\n\t\t\t\t\t\"origin-center\",\n\t\t\t\t)}\n\t\t\t\tcx=\"50%\"\n\t\t\t\tcy=\"50%\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\tpathLength={100}\n\t\t\t\tstroke={\n\t\t\t\t\tctx.value === \"indeterminate\" ? `url(#${gradientId})` : \"currentColor\"\n\t\t\t\t}\n\t\t\t\tstrokeDasharray={100}\n\t\t\t\tstrokeDashoffset={100 - percentage}\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeWidth={strokeWidthPx}\n\t\t\t\tstyle={{ \"--radius\": radius } as CSSProperties}\n\t\t\t\ttransform=\"rotate(-90)\" // rotate -90 degrees so it starts from the top\n\t\t\t/>\n\t\t</g>\n\t);\n};\nProgressDonutIndicator.displayName = \"ProgressDonutIndicator\";\n\nexport {\n\t//,\n\tProgressDonut,\n\tProgressDonutIndicator,\n};\n\n/**\n * Derive the stroke width in pixels as a number value or pixels/rem from a string value.\n * Note, this function clamps the stroke width to a minimum of 1 and max of 12 since\n * it is proportional to the viewbox size (0 0 32 32).\n */\nexport function deriveStrokeWidthPx(\n\tstrokeWidth: number | string | undefined | null,\n): number {\n\tlet value = 4;\n\tif (strokeWidth == null) {\n\t\treturn value;\n\t}\n\n\tif (typeof strokeWidth === \"number\") {\n\t\tvalue = strokeWidth;\n\t} else if (strokeWidth.endsWith(\"rem\")) {\n\t\tvalue = Number(strokeWidth.replace(\"rem\", \"\")) * 16;\n\t} else {\n\t\tvalue = Number(strokeWidth);\n\t}\n\n\tconst stroke = Number.isNaN(value) ? 4 : value;\n\treturn clamp(stroke, { min: 1, max: 12 });\n}\n\n/**\n * Calculate the radius of the progress donut and indicator based on the stroke\n * width in pixels.\n */\nfunction calcRadius(strokeWidthPx: number) {\n\treturn `calc(50% - ${strokeWidthPx / 2}px)` as const;\n}\n","/**\n * Clamp a value between a minimum and maximum value.\n */\nfunction clamp(\n\tvalue: number,\n\t{ min, max }: { min: number; max: number },\n): number {\n\treturn Math.min(max, Math.max(min, value));\n}\n\n/**\n * Check if a value is a number.\n */\nfunction isNumber(value: unknown): value is number {\n\treturn typeof value === \"number\";\n}\n\n/**\n * Check if a value is a valid number within the range of 0 to `max`.\n */\nfunction isValidValueNumber(value: unknown, max: number): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0;\n}\n\n/**\n * Check if a value is a valid number greater than 0.\n */\nfunction isValidMaxNumber(value: unknown): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value > 0;\n}\n\nexport {\n\t//,\n\tclamp,\n\tisNumber,\n\tisValidValueNumber,\n\tisValidMaxNumber,\n};\n","\"use client\";\n\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\n\nimport { type ComponentProps, createContext, useContext, useMemo } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { isNumber, isValidMaxNumber, isValidValueNumber } from \"./math.js\";\nimport type { ValueType } from \"./types.js\";\n\n/**\n * The default maximum value of the progress bar.\n */\nconst defaultMax = 100;\n\ntype ProgressContextValue = {\n\tmax: number;\n\tvalue: ValueType;\n};\n\nconst defaultContextValue = {\n\tmax: defaultMax,\n\tvalue: 0,\n} as const satisfies ProgressContextValue;\n\nconst ProgressContext =\n\tcreateContext<ProgressContextValue>(defaultContextValue);\n\ntype RootProps = ComponentProps<\"div\"> & {\n\t/**\n\t * The maximum value of the progress bar.\n\t * This attribute describes how much work the task indicated by the progress element requires.\n\t * The max attribute, if present, must have a value greater than 0. The default value is 100.\n\t *\n\t * @default 100\n\t */\n\tmax?: number | undefined;\n\t/**\n\t * The current value of the progress bar.\n\t * This attribute specifies how much of the task that has been completed.\n\t * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.\n\t * If set to `\"indeterminate\"`, the progress bar is considered indeterminate. (for now there is no visual difference than 0)\n\t *\n\t * @default 0\n\t */\n\tvalue?: ValueType | undefined;\n};\n\n/**\n * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\n *\n * A horizontal progress bar that shows the completion progress of a task.\n * Use this component for linear progress indication.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-bar\n *\n * @example\n * ```tsx\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * <ProgressBar.Root value={75} max={100}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * // Indeterminate progress\n * <ProgressBar.Root value=\"indeterminate\">\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n * ```\n */\nfunction Root({\n\tclassName,\n\tchildren,\n\tmax: _max = defaultMax,\n\tvalue: _value,\n\t...props\n}: RootProps) {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = (\n\t\tisValidValueNumber(_value, max)\n\t\t\t? _value\n\t\t\t: _value == null\n\t\t\t\t? 0\n\t\t\t\t: \"indeterminate\"\n\t) satisfies ValueType;\n\n\tconst valueNow = isNumber(value) ? value : undefined;\n\n\tconst ctx: ProgressContextValue = useMemo(\n\t\t() => ({\n\t\t\tmax,\n\t\t\tvalue,\n\t\t}),\n\t\t[max, value],\n\t);\n\n\treturn (\n\t\t<ProgressContext.Provider value={ctx}>\n\t\t\t<ProgressPrimitive.Root\n\t\t\t\tdata-slot=\"progress\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"bg-base-hover dark:bg-base shadow-inner relative h-3 w-full overflow-hidden rounded-md\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tvalue={valueNow}\n\t\t\t\tmax={max}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</ProgressPrimitive.Root>\n\t\t</ProgressContext.Provider>\n\t);\n}\nRoot.displayName = \"Root\";\n\ntype IndicatorProps = ComponentProps<typeof ProgressPrimitive.Indicator>;\n\n/**\n * Displays the progress indicator, which visually represents the completion progress of a task.\n *\n * The visual indicator that shows the actual progress within the progress bar.\n * This component should be used inside a ProgressBar.Root component.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-bar-indicator\n *\n * @example\n * ```tsx\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * // Custom styled indicator\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator className=\"bg-success-600\" />\n * </ProgressBar.Root>\n * ```\n */\nfunction Indicator({ className, style, ...props }: IndicatorProps) {\n\tconst ctx = useContext(ProgressContext);\n\tconst { max } = ctx;\n\tconst value = ctx.value === \"indeterminate\" ? 0 : ctx.value;\n\tconst translatePercent = ((max - value) / max) * 100;\n\n\treturn (\n\t\t<ProgressPrimitive.Indicator\n\t\t\tdata-slot=\"progress-indicator\"\n\t\t\tclassName={cx(\n\t\t\t\t\"bg-accent-600 h-full w-full flex-1 transition-all\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tstyle={{ ...style, transform: `translateX(-${translatePercent}%)` }}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nIndicator.displayName = \"Indicator\";\n\n/**\n * A horizontal progress bar component that shows the completion progress of a task.\n *\n * @example\n * ```tsx\n * import { ProgressBar } from \"@ngrok/mantle/progress\";\n *\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n * ```\n */\nconst ProgressBar = {\n\tRoot,\n\tIndicator,\n} as const;\n\nexport {\n\t//,\n\tProgressBar,\n};\n"],"mappings":"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","names":["clsx","createContext","useContext","useId","useMemo","clamp","value","min","max","isNumber","isValidValueNumber","isValidMaxNumber","jsx","jsxs","defaultMax","defaultContextValue","ProgressContext","createContext","ProgressDonut","children","className","_max","_strokeWidth","_value","props","max","isValidMaxNumber","value","isValidValueNumber","strokeWidthPx","deriveStrokeWidthPx","valueNow","isNumber","radius","calcRadius","ctx","useMemo","clsx","cx","indeterminateTailPercent","ProgressDonutIndicator","gradientId","useId","useContext","percentage","deriveStrokeWidthPx","strokeWidth","value","stroke","clamp","calcRadius","strokeWidthPx","ProgressPrimitive","createContext","useContext","useMemo","jsx","defaultMax","defaultContextValue","ProgressContext","createContext","Root","className","children","_max","_value","props","max","isValidMaxNumber","value","isValidValueNumber","valueNow","isNumber","ctx","useMemo","cx","Indicator","style","useContext","translatePercent","ProgressBar"]}
+{"version":3,"sources":["../src/components/progress/progress-donut.tsx","../src/components/progress/math.ts","../src/components/progress/progress-bar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { createContext, useContext, useId, useMemo } from \"react\";\nimport type { CSSProperties, ComponentProps, HTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport {\n\tclamp,\n\tisNumber,\n\tisValidMaxNumber,\n\tisValidValueNumber,\n} from \"./math.js\";\nimport type { ValueType } from \"./types.js\";\n\ntype RemValue = `${number}rem`;\ntype StrokeWidth = number | RemValue;\n\n/**\n * The default maximum value of the progress bar.\n */\nconst defaultMax = 100;\n\ntype ProgressContextValue = {\n\tmax: number;\n\tstrokeWidth: StrokeWidth;\n\tvalue: ValueType;\n};\n\nconst defaultContextValue = {\n\tmax: defaultMax,\n\tstrokeWidth: \"0.25rem\",\n\tvalue: 0,\n} as const satisfies ProgressContextValue;\n\nconst ProgressContext =\n\tcreateContext<ProgressContextValue>(defaultContextValue);\n\ntype SvgAttributes = Omit<\n\tHTMLAttributes<SVGElement>,\n\t| \"viewBox\"\n\t| \"role\"\n\t| \"aria-valuemax\"\n\t| \"aria-valuemin\"\n\t| \"aria-valuenow\"\n\t| \"width\"\n\t| \"height\"\n>;\n\ntype Props = SvgAttributes & {\n\t/**\n\t * The maximum value of the progress bar.\n\t * This attribute describes how much work the task indicated by the progress element requires.\n\t * The max attribute, if present, must have a value greater than 0. The default value is 100.\n\t *\n\t * @default 100\n\t */\n\tmax?: number | undefined;\n\t/**\n\t * The width of the progress bar stroke.\n\t * Note, we clamp the stroke width to a minimum of 1px and max of 12px since\n\t * it is proportional to the viewbox size (0 0 32 32).\n\t *\n\t * @default 0.25rem (4px)\n\t */\n\tstrokeWidth?: StrokeWidth;\n\t/**\n\t * The current value of the progress bar.\n\t * This attribute specifies how much of the task that has been completed.\n\t * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.\n\t * If set to `\"indeterminate\"`, the progress bar is considered indeterminate.\n\t *\n\t * @default 0\n\t */\n\tvalue?: ValueType | undefined;\n};\n\n/**\n * A simple circular progress bar which shows the completion progress of a task.\n *\n * The indicator color is inherited via `currentColor`. Override the default\n * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-donut\n *\n * @example\n * ```tsx\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator />\n * </ProgressDonut.Root>\n *\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n * </ProgressDonut.Root>\n * ```\n */\nconst Root = ({\n\tchildren,\n\tclassName,\n\tmax: _max = defaultMax,\n\tstrokeWidth: _strokeWidth = 4,\n\tvalue: _value,\n\t...props\n}: Props) => {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = (\n\t\tisValidValueNumber(_value, max)\n\t\t\t? _value\n\t\t\t: _value == null\n\t\t\t\t? 0\n\t\t\t\t: \"indeterminate\"\n\t) satisfies ValueType;\n\tconst strokeWidthPx = deriveStrokeWidthPx(\n\t\t_strokeWidth ?? defaultContextValue.strokeWidth,\n\t);\n\tconst valueNow = isNumber(value) ? value : undefined;\n\tconst radius = calcRadius(strokeWidthPx);\n\n\tconst ctx: ProgressContextValue = useMemo(\n\t\t() => ({\n\t\t\tmax,\n\t\t\tstrokeWidth: strokeWidthPx,\n\t\t\tvalue,\n\t\t}),\n\t\t[max, strokeWidthPx, value],\n\t);\n\n\treturn (\n\t\t<ProgressContext.Provider value={ctx}>\n\t\t\t{/* biome-ignore lint/a11y/useFocusableInteractive: progress bars don't need to be focusable */}\n\t\t\t<svg\n\t\t\t\taria-valuemax={max}\n\t\t\t\taria-valuemin={0}\n\t\t\t\taria-valuenow={valueNow}\n\t\t\t\tclassName={clsx(\n\t\t\t\t\tvalue === \"indeterminate\" &&\n\t\t\t\t\t\t\"animation-duration-[15s] transform-gpu animate-spin\",\n\t\t\t\t\tcx(\"size-6 text-gray-200 dark:text-gray-300\", className),\n\t\t\t\t)}\n\t\t\t\tdata-max={max}\n\t\t\t\tdata-min={0}\n\t\t\t\tdata-value={valueNow}\n\t\t\t\theight=\"100%\"\n\t\t\t\t// biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole: this is a radial progress bar, which is possible by SVG\n\t\t\t\trole=\"progressbar\"\n\t\t\t\twidth=\"100%\"\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<circle\n\t\t\t\t\tclassName=\"[r:var(--radius)]\"\n\t\t\t\t\tcx=\"50%\"\n\t\t\t\t\tcy=\"50%\"\n\t\t\t\t\tfill=\"transparent\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstrokeWidth={strokeWidthPx}\n\t\t\t\t\tstyle={{ \"--radius\": radius } as CSSProperties}\n\t\t\t\t/>\n\t\t\t\t{children}\n\t\t\t</svg>\n\t\t</ProgressContext.Provider>\n\t);\n};\nRoot.displayName = \"ProgressDonut\";\n\n/**\n * Length (value) of the progress indicator tail when the progress bar is indeterminate.\n */\nconst indeterminateTailPercent = 0.6;\n\ntype ProgressDonutIndicatorProps = Omit<ComponentProps<\"g\">, \"children\">;\n\n/**\n * The indicator for the circular progress bar.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-donut-indicator\n *\n * @example\n * ```tsx\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator />\n * </ProgressDonut.Root>\n *\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n * </ProgressDonut.Root>\n * ```\n */\nconst Indicator = ({ className, ...props }: ProgressDonutIndicatorProps) => {\n\tconst gradientId = useId();\n\tconst ctx = useContext(ProgressContext) ?? defaultContextValue;\n\tconst percentage =\n\t\t(ctx.value === \"indeterminate\"\n\t\t\t? indeterminateTailPercent\n\t\t\t: ctx.value / ctx.max) * 100;\n\tconst strokeWidthPx = deriveStrokeWidthPx(ctx.strokeWidth);\n\tconst radius = calcRadius(strokeWidthPx);\n\n\treturn (\n\t\t<g className={cx(\"text-accent-600\", className)} {...props}>\n\t\t\t{ctx.value === \"indeterminate\" && (\n\t\t\t\t<defs>\n\t\t\t\t\t<linearGradient id={gradientId}>\n\t\t\t\t\t\t<stop className=\"stop-opacity-100 stop-color-current\" offset=\"0%\" />\n\t\t\t\t\t\t<stop className=\"stop-opacity-0 stop-color-current\" offset=\"95%\" />\n\t\t\t\t\t</linearGradient>\n\t\t\t\t</defs>\n\t\t\t)}\n\t\t\t<circle\n\t\t\t\tclassName={clsx(\n\t\t\t\t\t\"[r:var(--radius)]\", // set the circle radius to be the value of the calc'd CSS variable set on the style\n\t\t\t\t\t\"origin-center\",\n\t\t\t\t)}\n\t\t\t\tcx=\"50%\"\n\t\t\t\tcy=\"50%\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\tpathLength={100}\n\t\t\t\tstroke={\n\t\t\t\t\tctx.value === \"indeterminate\" ? `url(#${gradientId})` : \"currentColor\"\n\t\t\t\t}\n\t\t\t\tstrokeDasharray={100}\n\t\t\t\tstrokeDashoffset={100 - percentage}\n\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\tstrokeWidth={strokeWidthPx}\n\t\t\t\tstyle={{ \"--radius\": radius } as CSSProperties}\n\t\t\t\ttransform=\"rotate(-90)\" // rotate -90 degrees so it starts from the top\n\t\t\t/>\n\t\t</g>\n\t);\n};\nIndicator.displayName = \"ProgressDonutIndicator\";\n\n/**\n * A simple circular progress bar which shows the completion progress of a task.\n *\n * The indicator color is inherited via `currentColor`. Override the default\n * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.\n *\n * @see https://mantle.ngrok.com/components/progress\n *\n * @example\n * ```tsx\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator />\n * </ProgressDonut.Root>\n *\n * <ProgressDonut.Root value={60}>\n *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n * </ProgressDonut.Root>\n * ```\n */\nconst ProgressDonut = {\n\t/**\n\t * A simple circular progress bar which shows the completion progress of a task.\n\t *\n\t * The indicator color is inherited via `currentColor`. Override the default\n\t * (`accent-600`) by setting the `ProgressDonut.Indicator`'s text color.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-donut-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator />\n\t * </ProgressDonut.Root>\n\t *\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n\t * </ProgressDonut.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The indicator for the circular progress bar.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-donut-indicator\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator />\n\t * </ProgressDonut.Root>\n\t *\n\t * <ProgressDonut.Root value={60}>\n\t *   <ProgressDonut.Indicator color=\"text-danger-600\" />\n\t * </ProgressDonut.Root>\n\t * ```\n\t */\n\tIndicator,\n} as const;\n\nexport {\n\t//,\n\tProgressDonut,\n};\n\n/**\n * Derive the stroke width in pixels as a number value or pixels/rem from a string value.\n * Note, this function clamps the stroke width to a minimum of 1 and max of 12 since\n * it is proportional to the viewbox size (0 0 32 32).\n *\n * @example\n * ```tsx\n * const strokeWidth1 = deriveStrokeWidthPx(8);\n * // Returns: 8\n *\n * const strokeWidth2 = deriveStrokeWidthPx(\"0.5rem\");\n * // Returns: 8 (0.5 * 16)\n *\n * const strokeWidth3 = deriveStrokeWidthPx(20);\n * // Returns: 12 (clamped to maximum)\n * ```\n */\nexport function deriveStrokeWidthPx(\n\tstrokeWidth: number | string | undefined | null,\n): number {\n\tlet value = 4;\n\tif (strokeWidth == null) {\n\t\treturn value;\n\t}\n\n\tif (typeof strokeWidth === \"number\") {\n\t\tvalue = strokeWidth;\n\t} else if (strokeWidth.endsWith(\"rem\")) {\n\t\tvalue = Number(strokeWidth.replace(\"rem\", \"\")) * 16;\n\t} else {\n\t\tvalue = Number(strokeWidth);\n\t}\n\n\tconst stroke = Number.isNaN(value) ? 4 : value;\n\treturn clamp(stroke, { min: 1, max: 12 });\n}\n\n/**\n * Calculate the radius of the progress donut and indicator based on the stroke\n * width in pixels.\n */\nfunction calcRadius(strokeWidthPx: number) {\n\treturn `calc(50% - ${strokeWidthPx / 2}px)` as const;\n}\n","/**\n * Clamp a value between a minimum and maximum value.\n */\nfunction clamp(\n\tvalue: number,\n\t{ min, max }: { min: number; max: number },\n): number {\n\treturn Math.min(max, Math.max(min, value));\n}\n\n/**\n * Check if a value is a number.\n */\nfunction isNumber(value: unknown): value is number {\n\treturn typeof value === \"number\";\n}\n\n/**\n * Check if a value is a valid number within the range of 0 to `max`.\n */\nfunction isValidValueNumber(value: unknown, max: number): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0;\n}\n\n/**\n * Check if a value is a valid number greater than 0.\n */\nfunction isValidMaxNumber(value: unknown): value is number {\n\treturn isNumber(value) && !Number.isNaN(value) && value > 0;\n}\n\nexport {\n\t//,\n\tclamp,\n\tisNumber,\n\tisValidValueNumber,\n\tisValidMaxNumber,\n};\n","\"use client\";\n\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\n\nimport { type ComponentProps, createContext, useContext, useMemo } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { isNumber, isValidMaxNumber, isValidValueNumber } from \"./math.js\";\nimport type { ValueType } from \"./types.js\";\n\n/**\n * The default maximum value of the progress bar.\n */\nconst defaultMax = 100;\n\ntype ProgressContextValue = {\n\tmax: number;\n\tvalue: ValueType;\n};\n\nconst defaultContextValue = {\n\tmax: defaultMax,\n\tvalue: 0,\n} as const satisfies ProgressContextValue;\n\nconst ProgressContext =\n\tcreateContext<ProgressContextValue>(defaultContextValue);\n\ntype RootProps = ComponentProps<\"div\"> & {\n\t/**\n\t * The maximum value of the progress bar.\n\t * This attribute describes how much work the task indicated by the progress element requires.\n\t * The max attribute, if present, must have a value greater than 0. The default value is 100.\n\t *\n\t * @default 100\n\t */\n\tmax?: number | undefined;\n\t/**\n\t * The current value of the progress bar.\n\t * This attribute specifies how much of the task that has been completed.\n\t * It must be a valid floating point number between 0 and max, or between 0 and 100 if max is omitted.\n\t * If set to `\"indeterminate\"`, the progress bar is considered indeterminate. (for now there is no visual difference than 0)\n\t *\n\t * @default 0\n\t */\n\tvalue?: ValueType | undefined;\n};\n\n/**\n * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\n *\n * A horizontal progress bar that shows the completion progress of a task.\n * Use this component for linear progress indication.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-bar\n *\n * @example\n * ```tsx\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * <ProgressBar.Root value={75} max={100}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * // Indeterminate progress\n * <ProgressBar.Root value=\"indeterminate\">\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n * ```\n */\nfunction Root({\n\tclassName,\n\tchildren,\n\tmax: _max = defaultMax,\n\tvalue: _value,\n\t...props\n}: RootProps) {\n\tconst max = isValidMaxNumber(_max) ? _max : defaultMax;\n\tconst value = (\n\t\tisValidValueNumber(_value, max)\n\t\t\t? _value\n\t\t\t: _value == null\n\t\t\t\t? 0\n\t\t\t\t: \"indeterminate\"\n\t) satisfies ValueType;\n\n\tconst valueNow = isNumber(value) ? value : undefined;\n\n\tconst ctx: ProgressContextValue = useMemo(\n\t\t() => ({\n\t\t\tmax,\n\t\t\tvalue,\n\t\t}),\n\t\t[max, value],\n\t);\n\n\treturn (\n\t\t<ProgressContext.Provider value={ctx}>\n\t\t\t<ProgressPrimitive.Root\n\t\t\t\tdata-slot=\"progress\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"bg-base-hover dark:bg-base shadow-inner relative h-3 w-full overflow-hidden rounded-md\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tvalue={valueNow}\n\t\t\t\tmax={max}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</ProgressPrimitive.Root>\n\t\t</ProgressContext.Provider>\n\t);\n}\nRoot.displayName = \"Root\";\n\ntype IndicatorProps = ComponentProps<typeof ProgressPrimitive.Indicator>;\n\n/**\n * Displays the progress indicator, which visually represents the completion progress of a task.\n *\n * The visual indicator that shows the actual progress within the progress bar.\n * This component should be used inside a ProgressBar.Root component.\n *\n * @see https://mantle.ngrok.com/components/progress#api-progress-bar-indicator\n *\n * @example\n * ```tsx\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * // Custom styled indicator\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator className=\"bg-success-600\" />\n * </ProgressBar.Root>\n * ```\n */\nfunction Indicator({ className, style, ...props }: IndicatorProps) {\n\tconst ctx = useContext(ProgressContext);\n\tconst { max } = ctx;\n\tconst value = ctx.value === \"indeterminate\" ? 0 : ctx.value;\n\tconst translatePercent = ((max - value) / max) * 100;\n\n\treturn (\n\t\t<ProgressPrimitive.Indicator\n\t\t\tdata-slot=\"progress-indicator\"\n\t\t\tclassName={cx(\n\t\t\t\t\"bg-accent-600 h-full w-full flex-1 transition-all\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tstyle={{ ...style, transform: `translateX(-${translatePercent}%)` }}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nIndicator.displayName = \"Indicator\";\n\n/**\n * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\n *\n * A horizontal progress bar that shows the completion progress of a task.\n * Use this component for linear progress indication.\n *\n * @see https://mantle.ngrok.com/components/progress\n *\n * @example\n * ```tsx\n * <ProgressBar.Root value={60}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * <ProgressBar.Root value={75} max={100}>\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n *\n * // Indeterminate progress\n * <ProgressBar.Root value=\"indeterminate\">\n *   <ProgressBar.Indicator />\n * </ProgressBar.Root>\n * ```\n */\nconst ProgressBar = {\n\t/**\n\t * Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\n\t *\n\t * A horizontal progress bar that shows the completion progress of a task.\n\t * Use this component for linear progress indication.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-bar\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressBar.Root value={60}>\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t *\n\t * <ProgressBar.Root value={75} max={100}>\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t *\n\t * // Indeterminate progress\n\t * <ProgressBar.Root value=\"indeterminate\">\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Displays the progress indicator, which visually represents the completion progress of a task.\n\t *\n\t * The visual indicator that shows the actual progress within the progress bar.\n\t * This component should be used inside a ProgressBar.Root component.\n\t *\n\t * @see https://mantle.ngrok.com/components/progress#api-progress-bar-indicator\n\t *\n\t * @example\n\t * ```tsx\n\t * <ProgressBar.Root value={60}>\n\t *   <ProgressBar.Indicator />\n\t * </ProgressBar.Root>\n\t *\n\t * // Custom styled indicator\n\t * <ProgressBar.Root value={60}>\n\t *   <ProgressBar.Indicator className=\"bg-success-600\" />\n\t * </ProgressBar.Root>\n\t * ```\n\t */\n\tIndicator,\n} as const;\n\nexport {\n\t//,\n\tProgressBar,\n};\n"],"mappings":"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","names":["clsx","createContext","useContext","useId","useMemo","clamp","value","min","max","isNumber","isValidValueNumber","isValidMaxNumber","jsx","jsxs","defaultMax","defaultContextValue","ProgressContext","createContext","Root","children","className","_max","_strokeWidth","_value","props","max","isValidMaxNumber","value","isValidValueNumber","strokeWidthPx","deriveStrokeWidthPx","valueNow","isNumber","radius","calcRadius","ctx","useMemo","clsx","cx","indeterminateTailPercent","Indicator","gradientId","useId","useContext","percentage","ProgressDonut","deriveStrokeWidthPx","strokeWidth","value","stroke","clamp","calcRadius","strokeWidthPx","ProgressPrimitive","createContext","useContext","useMemo","jsx","defaultMax","defaultContextValue","ProgressContext","createContext","Root","className","children","_max","_value","props","max","isValidMaxNumber","value","isValidValueNumber","valueNow","isNumber","ctx","useMemo","cx","Indicator","style","useContext","translatePercent","ProgressBar"]}