@artsy/palette 44.0.1 → 44.2.0

package/dist/elements/Popover/Popover.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.story.js","names":["_test","require","_react","_interopRequireDefault","_storybookStates","_utils","_Box","_Button","_Flex","_Spacer","_Text","_Popover","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","CONTENT","_default","exports","title","Default","createElement","States","states","visible","onClose","fn","onDismiss","popover","Text","variant","width","pointer","p","Fragment","Array","fill","map","_","overflowEllipsis","bg","px","py","placement","zIndex","ignoreClickOutside","Popover","_ref","onVisible","anchorRef","Box","textAlign","Button","ref","size","onClick","displayName","story","parameters","chromatic","disable","Placement","keys","POSITION","props","JSON","stringify","_ref2","maxWidth","mx","ManageFocus","manageFocus","_ref3","PopoverActions","_ref4","onHide","Spacer","y","Flex","flex","x","_ref5","CrashAtSpecificZoomLevels","height","_ref6","_ref7"],"sources":["../../../src/elements/Popover/Popover.story.tsx"],"sourcesContent":["import { fn } from \"@storybook/test\"\nimport React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Position, POSITION } from \"../../utils\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { Popover, PopoverProps } from \"./Popover\"\n\nconst CONTENT =\n  \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi eius autem aliquid cumque, mollitia incidunt totam. Id ut quae hic in quisquam, cupiditate iure nobis, provident minus voluptatem tenetur consequatur.\"\n\nexport default {\n  title: \"Components/Popover\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<PopoverProps>>\n      states={[\n        {},\n        { visible: true },\n        { onClose: fn(), onDismiss: fn() },\n        {\n          visible: true,\n          popover: (\n            <Text variant=\"xs\" width={300}>\n              | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n              | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n              | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n              | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n              | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n              | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n              | | | — (Content interaction with close button.)\n            </Text>\n          ),\n        },\n        {\n          pointer: true,\n          visible: true,\n          p: 0,\n          popover: (\n            <>\n              {new Array(4).fill(0).map((_, i) => (\n                <Text\n                  key={i}\n                  variant=\"sm-display\"\n                  overflowEllipsis\n                  bg=\"red10\"\n                  px={1}\n                  py={0.5}\n                >\n                  Example Item\n                </Text>\n              ))}\n            </>\n          ),\n        },\n        {\n          variant: \"defaultDark\",\n          placement: \"bottom\",\n          visible: true,\n          pointer: true,\n          zIndex: 99,\n        },\n        {\n          ignoreClickOutside: true,\n        },\n      ]}\n    >\n      <Popover\n        placement=\"bottom\"\n        popover={\n          <Text variant=\"xs\" width={300}>\n            {CONTENT}\n          </Text>\n        }\n      >\n        {({ onVisible, anchorRef }) => {\n          return (\n            <Box textAlign=\"center\">\n              <Button\n                ref={anchorRef}\n                variant=\"secondaryBlack\"\n                size=\"small\"\n                onClick={onVisible}\n              >\n                Click to display popover\n              </Button>\n            </Box>\n          )\n        }}\n      </Popover>\n    </States>\n  )\n}\n\nDefault.story = {\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const Placement = () => {\n  return (\n    <States<Partial<PopoverProps>>\n      states={Object.keys(POSITION).map((placement) => ({\n        placement: placement as Position,\n      }))}\n    >\n      {(props) => {\n        return (\n          <Popover\n            popover={<Text variant=\"xs\">{JSON.stringify(props)}</Text>}\n            visible\n            variant=\"defaultDark\"\n            pointer\n            {...props}\n          >\n            {({ anchorRef }) => {\n              return (\n                <Text\n                  ref={anchorRef as any}\n                  variant=\"xs\"\n                  textAlign=\"center\"\n                  p={1}\n                  maxWidth=\"50%\"\n                  mx=\"auto\"\n                  bg=\"mono10\"\n                >\n                  {JSON.stringify(props)}\n                </Text>\n              )\n            }}\n          </Popover>\n        )\n      }}\n    </States>\n  )\n}\n\nPlacement.story = {\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const ManageFocus = () => {\n  return (\n    <States<Partial<PopoverProps>>\n      states={[\n        { visible: true, manageFocus: false },\n        { visible: true, manageFocus: true },\n      ]}\n    >\n      <Popover\n        placement=\"bottom\"\n        popover={\n          <Text variant=\"xs\" width={300}>\n            {CONTENT}\n          </Text>\n        }\n      >\n        {({ onVisible, anchorRef }) => {\n          return (\n            <Box textAlign=\"center\">\n              <Button\n                ref={anchorRef}\n                variant=\"secondaryBlack\"\n                size=\"small\"\n                onClick={onVisible}\n              >\n                Click to display popover\n              </Button>\n            </Box>\n          )\n        }}\n      </Popover>\n    </States>\n  )\n}\n\nexport const PopoverActions = () => {\n  return (\n    <States<Partial<PopoverProps>> states={[{ visible: true }]}>\n      <Popover\n        placement=\"bottom\"\n        popover={({ onHide, onDismiss }) => {\n          return (\n            <>\n              <Text variant=\"xs\" width={300}>\n                {CONTENT}\n              </Text>\n\n              <Spacer y={2} />\n\n              <Flex>\n                <Button\n                  flex={1}\n                  size=\"small\"\n                  variant=\"secondaryBlack\"\n                  onClick={onHide}\n                >\n                  Hide\n                </Button>\n\n                <Spacer x={1} />\n\n                <Button\n                  flex={1}\n                  size=\"small\"\n                  variant=\"secondaryBlack\"\n                  onClick={onDismiss}\n                >\n                  Dismiss\n                </Button>\n              </Flex>\n            </>\n          )\n        }}\n      >\n        {({ onVisible, anchorRef }) => {\n          return (\n            <Box textAlign=\"center\">\n              <Button\n                ref={anchorRef}\n                variant=\"secondaryBlack\"\n                size=\"small\"\n                onClick={onVisible}\n              >\n                Click to display popover\n              </Button>\n            </Box>\n          )\n        }}\n      </Popover>\n    </States>\n  )\n}\n\nexport const CrashAtSpecificZoomLevels = () => {\n  return (\n    <>\n      <Box height={100}>Zoom to 90% in Chrome, click, then scroll.</Box>\n\n      <Box height={2000} bg=\"mono5\">\n        <Box height={200} />\n\n        <Popover\n          placement=\"top\"\n          popover={({ onHide, onDismiss }) => {\n            return (\n              <>\n                <Text variant=\"xs\" width={300}>\n                  {CONTENT}\n                </Text>\n\n                <Spacer y={2} />\n\n                <Flex>\n                  <Button\n                    flex={1}\n                    size=\"small\"\n                    variant=\"secondaryBlack\"\n                    onClick={onHide}\n                  >\n                    Hide\n                  </Button>\n\n                  <Spacer x={1} />\n\n                  <Button\n                    flex={1}\n                    size=\"small\"\n                    variant=\"secondaryBlack\"\n                    onClick={onDismiss}\n                  >\n                    Dismiss\n                  </Button>\n                </Flex>\n              </>\n            )\n          }}\n        >\n          {({ onVisible, anchorRef }) => {\n            return (\n              <Box textAlign=\"center\">\n                <Button\n                  ref={anchorRef}\n                  variant=\"secondaryBlack\"\n                  size=\"small\"\n                  onClick={onVisible}\n                >\n                  Click to display popover\n                </Button>\n              </Box>\n            )\n          }}\n        </Popover>\n      </Box>\n    </>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"Popover.story.js","names":["_react","_interopRequireDefault","require","_storybookStates","_utils","_Box","_Button","_Flex","_Spacer","_Text","_Popover","_storybookBlocklist","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","CONTENT","_default","exports","component","Popover","title","tags","parameters","docs","description","controls","exclude","STORYBOOK_PROPS_BLOCKLIST","Default","args","placement","popover","createElement","Text","variant","width","children","_ref","onVisible","anchorRef","Box","textAlign","Button","ref","size","onClick","story","Visible","visible","_ref2","WithContentInteraction","_ref3","Pointer","pointer","p","Fragment","Array","fill","map","_","overflowEllipsis","bg","px","py","_ref4","DarkVariant","zIndex","_ref5","IgnoreClickOutside","ignoreClickOutside","_ref6","Placement","render","States","states","keys","POSITION","props","JSON","stringify","_ref7","maxWidth","mx","chromatic","disable","ManageFocus","manageFocus","_ref8","PopoverActions","_ref9","onHide","onDismiss","Spacer","y","Flex","flex","x","_ref10","CrashAtSpecificZoomLevels","height","_ref11","_ref12"],"sources":["../../../src/elements/Popover/Popover.story.tsx"],"sourcesContent":["import React from \"react\"\nimport { States } from \"storybook-states\"\nimport { Position, POSITION } from \"../../utils\"\nimport { Box } from \"../Box\"\nimport { Button } from \"../Button\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { Popover, PopoverProps } from \"./Popover\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nconst CONTENT =\n  \"Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi eius autem aliquid cumque, mollitia incidunt totam. Id ut quae hic in quisquam, cupiditate iure nobis, provident minus voluptatem tenetur consequatur.\"\n\nexport default {\n  component: Popover,\n  title: \"Components/Popover\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A floating popover component that can be positioned relative to an anchor element.\",\n      },\n    },\n    controls: {\n      exclude: STORYBOOK_PROPS_BLOCKLIST,\n    },\n  },\n}\n\nexport const Default = {\n  args: {\n    placement: \"bottom\",\n    popover: (\n      <Text variant=\"xs\" width={300}>\n        {CONTENT}\n      </Text>\n    ),\n    children: ({ onVisible, anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button\n          ref={anchorRef}\n          variant=\"secondaryBlack\"\n          size=\"small\"\n          onClick={onVisible}\n        >\n          Click to display popover\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Default popover.\",\n      },\n    },\n  },\n}\n\nexport const Visible = {\n  tags: [\"!autodocs\"],\n  args: {\n    placement: \"bottom\",\n    visible: true,\n    popover: (\n      <Text variant=\"xs\" width={300}>\n        {CONTENT}\n      </Text>\n    ),\n    children: ({ anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button ref={anchorRef} variant=\"secondaryBlack\" size=\"small\">\n          Popover Visible\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover visible state.\",\n      },\n    },\n  },\n}\n\nexport const WithContentInteraction = {\n  tags: [\"!autodocs\"],\n  args: {\n    placement: \"bottom\",\n    visible: true,\n    popover: (\n      <Text variant=\"xs\" width={300}>\n        | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n        | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n        | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n        | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n        | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |\n        | | | | | | | | | | | | | | | | | | | | | — (Content interaction with\n        close button.)\n      </Text>\n    ),\n    children: ({ anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button ref={anchorRef} variant=\"secondaryBlack\" size=\"small\">\n          Popover With Content Interaction\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with content interaction.\",\n      },\n    },\n  },\n}\n\nexport const Pointer = {\n  tags: [\"!autodocs\"],\n  args: {\n    placement: \"bottom\",\n    pointer: true,\n    visible: true,\n    p: 0,\n    popover: (\n      <>\n        {new Array(4).fill(0).map((_, i) => (\n          <Text\n            key={i}\n            variant=\"sm-display\"\n            overflowEllipsis\n            bg=\"red10\"\n            px={1}\n            py={0.5}\n          >\n            Example Item\n          </Text>\n        ))}\n      </>\n    ),\n    children: ({ anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button ref={anchorRef} variant=\"secondaryBlack\" size=\"small\">\n          Popover With Pointer\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with pointer and multiple items.\",\n      },\n    },\n  },\n}\n\nexport const DarkVariant = {\n  tags: [\"!autodocs\"],\n  args: {\n    placement: \"bottom\",\n    variant: \"defaultDark\",\n    visible: true,\n    pointer: true,\n    zIndex: 99,\n    popover: (\n      <Text variant=\"xs\" width={300}>\n        {CONTENT}\n      </Text>\n    ),\n    children: ({ anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button ref={anchorRef} variant=\"secondaryBlack\" size=\"small\">\n          Popover Dark Variant\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with dark variant styling.\",\n      },\n    },\n  },\n}\n\nexport const IgnoreClickOutside = {\n  tags: [\"!autodocs\"],\n  args: {\n    placement: \"bottom\",\n    ignoreClickOutside: true,\n    popover: (\n      <Text variant=\"xs\" width={300}>\n        {CONTENT}\n      </Text>\n    ),\n    children: ({ anchorRef }) => (\n      <Box textAlign=\"center\">\n        <Button ref={anchorRef} variant=\"secondaryBlack\" size=\"small\">\n          Popover Ignore Click Outside\n        </Button>\n      </Box>\n    ),\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with ignoreClickOutside enabled.\",\n      },\n    },\n  },\n}\n\nexport const Placement = {\n  tags: [\"!autodocs\"],\n  render: () => (\n    <States<Partial<PopoverProps>>\n      states={Object.keys(POSITION).map((placement) => ({\n        placement: placement as Position,\n      }))}\n    >\n      {(props) => (\n        <Popover\n          popover={<Text variant=\"xs\">{JSON.stringify(props)}</Text>}\n          visible\n          variant=\"defaultDark\"\n          pointer\n          {...props}\n        >\n          {({ anchorRef }) => (\n            <Text\n              ref={anchorRef as any}\n              variant=\"xs\"\n              textAlign=\"center\"\n              p={1}\n              maxWidth=\"50%\"\n              mx=\"auto\"\n              bg=\"mono10\"\n            >\n              {JSON.stringify(props)}\n            </Text>\n          )}\n        </Popover>\n      )}\n    </States>\n  ),\n  parameters: {\n    chromatic: { disable: true },\n    docs: {\n      description: {\n        story: \"Popover shown in all available placement positions.\",\n      },\n    },\n  },\n}\n\nexport const ManageFocus = {\n  tags: [\"!autodocs\"],\n  render: () => (\n    <States<Partial<PopoverProps>>\n      states={[\n        { visible: true, manageFocus: false },\n        { visible: true, manageFocus: true },\n      ]}\n    >\n      <Popover\n        placement=\"bottom\"\n        popover={\n          <Text variant=\"xs\" width={300}>\n            {CONTENT}\n          </Text>\n        }\n      >\n        {({ onVisible, anchorRef }) => (\n          <Box textAlign=\"center\">\n            <Button\n              ref={anchorRef}\n              variant=\"secondaryBlack\"\n              size=\"small\"\n              onClick={onVisible}\n            >\n              Click to display popover\n            </Button>\n          </Box>\n        )}\n      </Popover>\n    </States>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with different focus management settings.\",\n      },\n    },\n  },\n}\n\nexport const PopoverActions = {\n  tags: [\"!autodocs\"],\n  render: () => (\n    <States<Partial<PopoverProps>> states={[{ visible: true }]}>\n      <Popover\n        placement=\"bottom\"\n        popover={({ onHide, onDismiss }) => (\n          <>\n            <Text variant=\"xs\" width={300}>\n              {CONTENT}\n            </Text>\n\n            <Spacer y={2} />\n\n            <Flex>\n              <Button\n                flex={1}\n                size=\"small\"\n                variant=\"secondaryBlack\"\n                onClick={onHide}\n              >\n                Hide\n              </Button>\n\n              <Spacer x={1} />\n\n              <Button\n                flex={1}\n                size=\"small\"\n                variant=\"secondaryBlack\"\n                onClick={onDismiss}\n              >\n                Dismiss\n              </Button>\n            </Flex>\n          </>\n        )}\n      >\n        {({ onVisible, anchorRef }) => (\n          <Box textAlign=\"center\">\n            <Button\n              ref={anchorRef}\n              variant=\"secondaryBlack\"\n              size=\"small\"\n              onClick={onVisible}\n            >\n              Click to display popover\n            </Button>\n          </Box>\n        )}\n      </Popover>\n    </States>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Popover with action buttons (Hide and Dismiss).\",\n      },\n    },\n  },\n}\n\nexport const CrashAtSpecificZoomLevels = {\n  tags: [\"!autodocs\"],\n  render: () => (\n    <>\n      <Box height={100}>Zoom to 90% in Chrome, click, then scroll.</Box>\n\n      <Box height={2000} bg=\"mono5\">\n        <Box height={200} />\n\n        <Popover\n          placement=\"top\"\n          popover={({ onHide, onDismiss }) => (\n            <>\n              <Text variant=\"xs\" width={300}>\n                {CONTENT}\n              </Text>\n\n              <Spacer y={2} />\n\n              <Flex>\n                <Button\n                  flex={1}\n                  size=\"small\"\n                  variant=\"secondaryBlack\"\n                  onClick={onHide}\n                >\n                  Hide\n                </Button>\n\n                <Spacer x={1} />\n\n                <Button\n                  flex={1}\n                  size=\"small\"\n                  variant=\"secondaryBlack\"\n                  onClick={onDismiss}\n                >\n                  Dismiss\n                </Button>\n              </Flex>\n            </>\n          )}\n        >\n          {({ onVisible, anchorRef }) => (\n            <Box textAlign=\"center\">\n              <Button\n                ref={anchorRef}\n                variant=\"secondaryBlack\"\n                size=\"small\"\n                onClick={onVisible}\n              >\n                Click to display popover\n              </Button>\n            </Box>\n          )}\n        </Popover>\n      </Box>\n    </>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Test case for popover behavior at specific zoom levels.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

package/dist/elements/ProgressBar/ProgressBar.story.d.ts

@@ -1,15 +1,51 @@
 import React from "react";
 declare const _default: {
+    component: React.FC<React.PropsWithChildren<import("./ProgressBar").ProgressBarProps>>;
     title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+        controls: {
+            exclude: string[];
+        };
+    };
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
-export declare const Demo: {
-    (): React.JSX.Element;
-    story: {
-        parameters: {
-            chromatic: {
-                disable: boolean;
+export declare const Default: {
+    args: {
+        percentComplete: number;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const Variants: {
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const AnimatedDemo: {
+    render: () => React.JSX.Element;
+    parameters: {
+        chromatic: {
+            disable: boolean;
+        };
+        docs: {
+            description: {
+                story: string;
             };
         };
     };

package/dist/elements/ProgressBar/ProgressBar.story.js

@@ -4,10 +4,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Demo = exports.Default = void 0;
+exports.default = exports.Variants = exports.Default = exports.AnimatedDemo = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _storybookStates = require("storybook-states");
 var _ProgressBar = require("./ProgressBar");
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -17,52 +17,90 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var _default = exports.default = {
-  title: "Components/ProgressBar"
+  component: _ProgressBar.ProgressBar,
+  title: "Components/ProgressBar",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A progress bar component that displays completion percentage with customizable colors and background."
+      }
+    },
+    controls: {
+      exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
 };
-var Default = exports.Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{
+var Default = exports.Default = {
+  args: {
+    percentComplete: 40
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic progress bar showing completion percentage."
+      }
+    }
+  }
+};
+var Variants = exports.Variants = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px"
+      }
+    }, /*#__PURE__*/_react.default.createElement(_ProgressBar.ProgressBar, {
       percentComplete: 0
-    }, {
+    }), /*#__PURE__*/_react.default.createElement(_ProgressBar.ProgressBar, {
       percentComplete: 1
-    }, {
+    }), /*#__PURE__*/_react.default.createElement(_ProgressBar.ProgressBar, {
       percentComplete: 50
-    }, {
+    }), /*#__PURE__*/_react.default.createElement(_ProgressBar.ProgressBar, {
       percentComplete: 100
-    }, {
+    }), /*#__PURE__*/_react.default.createElement(_ProgressBar.ProgressBar, {
       percentComplete: 50,
       highlight: "red100"
-    }, {
+    }), /*#__PURE__*/_react.default.createElement(_ProgressBar.ProgressBar, {
       percentComplete: 50,
       showBackground: false
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_ProgressBar.ProgressBar, {
-    percentComplete: 40
-  }));
-};
-Default.displayName = "Default";
-var Demo = exports.Demo = function Demo() {
-  var _useState = (0, _react.useState)(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    progress = _useState2[0],
-    setProgress = _useState2[1];
-  (0, _react.useEffect)(function () {
-    var timer = setInterval(function () {
-      return setProgress(Math.floor(Math.random() * Math.floor(100)));
-    }, 500);
-    return function () {
-      return clearInterval(timer);
-    };
-  }, []);
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, null, /*#__PURE__*/_react.default.createElement(_ProgressBar.ProgressBar, {
-    percentComplete: progress
-  }));
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Different progress bar configurations and states."
+      }
+    }
+  }
 };
-Demo.displayName = "Demo";
-Demo.story = {
+var AnimatedDemo = exports.AnimatedDemo = {
+  render: function render() {
+    var _useState = (0, _react.useState)(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      progress = _useState2[0],
+      setProgress = _useState2[1];
+    (0, _react.useEffect)(function () {
+      var timer = setInterval(function () {
+        return setProgress(Math.floor(Math.random() * Math.floor(100)));
+      }, 500);
+      return function () {
+        return clearInterval(timer);
+      };
+    }, []);
+    return /*#__PURE__*/_react.default.createElement(_ProgressBar.ProgressBar, {
+      percentComplete: progress
+    });
+  },
   parameters: {
     chromatic: {
       disable: true
+    },
+    docs: {
+      description: {
+        story: "Animated progress bar with randomly changing values."
+      }
     }
   }
 };

package/dist/elements/ProgressBar/ProgressBar.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.story.js","names":["_react","_interopRequireWildcard","require","_storybookStates","_ProgressBar","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_default","exports","title","Default","createElement","States","states","percentComplete","highlight","showBackground","ProgressBar","displayName","Demo","_useState","useState","_useState2","progress","setProgress","useEffect","timer","setInterval","Math","floor","random","clearInterval","story","parameters","chromatic","disable"],"sources":["../../../src/elements/ProgressBar/ProgressBar.story.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { ProgressBar, ProgressBarProps } from \"./ProgressBar\"\n\nexport default {\n  title: \"Components/ProgressBar\",\n}\n\nexport const Default = () => {\n  return (\n    <States<ProgressBarProps>\n      states={[\n        { percentComplete: 0 },\n        { percentComplete: 1 },\n        { percentComplete: 50 },\n        { percentComplete: 100 },\n        { percentComplete: 50, highlight: \"red100\" },\n        { percentComplete: 50, showBackground: false },\n      ]}\n    >\n      <ProgressBar percentComplete={40} />\n    </States>\n  )\n}\n\nexport const Demo = () => {\n  const [progress, setProgress] = useState(0)\n\n  useEffect(() => {\n    const timer = setInterval(\n      () => setProgress(Math.floor(Math.random() * Math.floor(100))),\n      500\n    )\n    return () => clearInterval(timer)\n  }, [])\n\n  return (\n    <States<Partial<ProgressBarProps>>>\n      <ProgressBar percentComplete={progress} />\n    </States>\n  )\n}\n\nDemo.story = {\n  parameters: { chromatic: { disable: true } },\n}\n"],"mappings":"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"}
+{"version":3,"file":"ProgressBar.story.js","names":["_react","_interopRequireWildcard","require","_ProgressBar","_storybookBlocklist","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","_typeof","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","toString","slice","constructor","name","Array","from","test","len","length","arr2","_i","Symbol","iterator","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","return","isArray","_default","exports","component","ProgressBar","title","tags","parameters","docs","description","controls","exclude","STORYBOOK_PROPS_BLOCKLIST","Default","args","percentComplete","story","Variants","render","createElement","style","display","flexDirection","gap","highlight","showBackground","AnimatedDemo","_useState","useState","_useState2","progress","setProgress","useEffect","timer","setInterval","Math","floor","random","clearInterval","chromatic","disable"],"sources":["../../../src/elements/ProgressBar/ProgressBar.story.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { ProgressBar } from \"./ProgressBar\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: ProgressBar,\n  title: \"Components/ProgressBar\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A progress bar component that displays completion percentage with customizable colors and background.\",\n      },\n    },\n    controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n  },\n}\n\nexport const Default = {\n  args: {\n    percentComplete: 40,\n  },\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic progress bar showing completion percentage.\",\n      },\n    },\n  },\n}\n\nexport const Variants = {\n  render: () => (\n    <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"16px\" }}>\n      <ProgressBar percentComplete={0} />\n      <ProgressBar percentComplete={1} />\n      <ProgressBar percentComplete={50} />\n      <ProgressBar percentComplete={100} />\n      <ProgressBar percentComplete={50} highlight=\"red100\" />\n      <ProgressBar percentComplete={50} showBackground={false} />\n    </div>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Different progress bar configurations and states.\",\n      },\n    },\n  },\n}\n\nexport const AnimatedDemo = {\n  render: () => {\n    const [progress, setProgress] = useState(0)\n\n    useEffect(() => {\n      const timer = setInterval(\n        () => setProgress(Math.floor(Math.random() * Math.floor(100))),\n        500\n      )\n      return () => clearInterval(timer)\n    }, [])\n\n    return <ProgressBar percentComplete={progress} />\n  },\n  parameters: {\n    chromatic: { disable: true },\n    docs: {\n      description: {\n        story: \"Animated progress bar with randomly changing values.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

package/dist/elements/ProgressDots/ProgressDots.story.d.ts

@@ -1,15 +1,77 @@
 import React from "react";
 declare const _default: {
+    component: React.FC<React.PropsWithChildren<import("./ProgressDots").ProgressDotsProps>>;
     title: string;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+        controls: {
+            exclude: string[];
+        };
+    };
 };
 export default _default;
-export declare const Default: () => React.JSX.Element;
-export declare const Demo: {
-    (): React.JSX.Element;
-    story: {
-        parameters: {
-            chromatic: {
-                disable: boolean;
+export declare const Default: {
+    args: {
+        activeIndex: number;
+        amount: number;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const DotVariants: {
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const DashVariants: {
+    render: () => React.JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const Interactive: {
+    render: () => React.JSX.Element;
+    parameters: {
+        chromatic: {
+            disable: boolean;
+        };
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const Clickable: {
+    args: {
+        variant: string;
+        activeIndex: number;
+        amount: number;
+        onClick: import("@vitest/spy").Mock<(...args: any[]) => any>;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
             };
         };
     };

package/dist/elements/ProgressDots/ProgressDots.story.js

@@ -4,11 +4,11 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Demo = exports.Default = void 0;
+exports.default = exports.Interactive = exports.DotVariants = exports.Default = exports.DashVariants = exports.Clickable = void 0;
 var _test = require("@storybook/test");
 var _react = _interopRequireWildcard(require("react"));
-var _storybookStates = require("storybook-states");
 var _ProgressDots = require("./ProgressDots");
+var _storybookBlocklist = require("../../utils/storybookBlocklist");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -18,72 +18,139 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var _default = exports.default = {
-  title: "Components/ProgressDots"
+  component: _ProgressDots.ProgressDots,
+  title: "Components/ProgressDots",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A navigation component displaying a series of dots or dashes to indicate progress or position."
+      }
+    },
+    controls: {
+      exclude: _storybookBlocklist.STORYBOOK_PROPS_BLOCKLIST
+    }
+  }
+};
+var Default = exports.Default = {
+  args: {
+    activeIndex: 0,
+    amount: 5
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic progress dots showing position in a sequence."
+      }
+    }
+  }
 };
-var Default = exports.Default = function Default() {
-  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
-    states: [{
+var DotVariants = exports.DotVariants = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px"
+      }
+    }, /*#__PURE__*/_react.default.createElement(_ProgressDots.ProgressDots, {
       activeIndex: 0,
       amount: 5
-    }, {
+    }), /*#__PURE__*/_react.default.createElement(_ProgressDots.ProgressDots, {
       activeIndex: 2,
       amount: 5
-    }, {
+    }), /*#__PURE__*/_react.default.createElement(_ProgressDots.ProgressDots, {
       activeIndex: 4,
       amount: 5
-    }, {
+    }), /*#__PURE__*/_react.default.createElement(_ProgressDots.ProgressDots, {
       activeIndex: 0,
       amount: 25
-    }, {
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Dot variant with different active indices and amounts."
+      }
+    }
+  }
+};
+var DashVariants = exports.DashVariants = {
+  render: function render() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: "16px"
+      }
+    }, /*#__PURE__*/_react.default.createElement(_ProgressDots.ProgressDots, {
       variant: "dash",
       activeIndex: 0,
       amount: 5
-    }, {
+    }), /*#__PURE__*/_react.default.createElement(_ProgressDots.ProgressDots, {
       variant: "dash",
       activeIndex: 2,
       amount: 5
-    }, {
+    }), /*#__PURE__*/_react.default.createElement(_ProgressDots.ProgressDots, {
       variant: "dash",
       activeIndex: 4,
       amount: 5
-    }, {
+    }), /*#__PURE__*/_react.default.createElement(_ProgressDots.ProgressDots, {
       variant: "dash",
       activeIndex: 0,
       amount: 25
-    }, {
+    }));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Dash variant with different active indices and amounts."
+      }
+    }
+  }
+};
+var Interactive = exports.Interactive = {
+  render: function render() {
+    var _useState = (0, _react.useState)(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      index = _useState2[0],
+      setIndex = _useState2[1];
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ProgressDots.ProgressDots, {
+      activeIndex: index,
+      amount: 5,
+      my: 2,
+      onClick: setIndex
+    }), /*#__PURE__*/_react.default.createElement(_ProgressDots.ProgressDots, {
       variant: "dash",
-      activeIndex: 0,
+      activeIndex: index,
       amount: 5,
-      onClick: (0, _test.fn)()
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_ProgressDots.ProgressDots, {
-    activeIndex: 0,
-    amount: 5
-  }));
+      my: 2,
+      onClick: setIndex
+    }));
+  },
+  parameters: {
+    chromatic: {
+      disable: true
+    },
+    docs: {
+      description: {
+        story: "Interactive progress dots that respond to clicks."
+      }
+    }
+  }
 };
-Default.displayName = "Default";
-var Demo = exports.Demo = function Demo() {
-  var _useState = (0, _react.useState)(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    index = _useState2[0],
-    setIndex = _useState2[1];
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ProgressDots.ProgressDots, {
-    activeIndex: index,
-    amount: 5,
-    my: 2,
-    onClick: setIndex
-  }), /*#__PURE__*/_react.default.createElement(_ProgressDots.ProgressDots, {
+var Clickable = exports.Clickable = {
+  args: {
     variant: "dash",
-    activeIndex: index,
+    activeIndex: 0,
     amount: 5,
-    my: 2,
-    onClick: setIndex
-  }));
-};
-Demo.story = {
+    onClick: (0, _test.fn)()
+  },
   parameters: {
-    chromatic: {
-      disable: true
+    docs: {
+      description: {
+        story: "Progress dots with click handler functionality."
+      }
     }
   }
 };