@spaced-out/ui-design-system 0.4.12 → 0.4.13-beta.1

package/lib/components/Panel/Panel.stories.js

@@ -0,0 +1,415 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._WithNestedDialog = exports._WithInteractiveBackground = exports._Normal = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Button = require("../Button");
+var _Dialog = require("../Dialog");
+var _Dropdown = require("../Dropdown");
+var _Input = require("../Input");
+var _Text = require("../Text");
+var _Textarea = require("../Textarea");
+var _Tooltip = require("../Tooltip");
+var _Panel = require("./Panel");
+var _PanelStoriesModule = _interopRequireDefault(require("./Panel.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Components/Panel',
+  argTypes: {
+    isOpen: {
+      description: 'if **true**, the modal is presented',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    },
+    classNames: {
+      description: 'External classnames to be applied',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{container?: string, content?: string, backdrop?: string}'
+        }
+      }
+    },
+    tapOutsideToClose: {
+      description: 'if **true**, closes the modal on tap of backdrop',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'true'
+        }
+      }
+    },
+    anchor: {
+      options: ['left', 'right'],
+      description: 'Position of Panel',
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: 'enum'
+        },
+        defaultValue: {
+          summary: 'left'
+        }
+      }
+    },
+    allowBackgroundInteraction: {
+      description: 'if **true**, allows interaction with the background content. This would remove the backdrop layer for the panel and set tapOutsideToClose to false',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    },
+    size: {
+      description: 'Panel supports only three size variants namely small, medium and large. `small` < `medium` < `large`',
+      options: ['small', 'medium', 'large'],
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: 'enum'
+        },
+        defaultValue: {
+          summary: 'medium'
+        }
+      }
+    },
+    children: {
+      description: 'The children to rendered inside the Modal window',
+      table: {
+        type: {
+          summary: 'React.ReactNode'
+        }
+      }
+    },
+    onClose: {
+      description: '**onClose** handler is triggered on backdrop click',
+      action: 'clicked',
+      table: {
+        type: {
+          summary: '(SyntheticEvent<HTMLElement>) => mixed'
+        }
+      }
+    },
+    customAnimation: {
+      description: `
+\`<Modal>\` and its derivatives(\`<Dialog>\`, \`<Panel>\`) support
+\`customAnimation: UseTransitionStylesProps\` prop for
+all your custom animation needs.
+It defines the following properties:
+
+- \`duration\` (optional): Specifies the duration of the animation in milliseconds.
+It can be a single number to set the duration for both opening and closing animations,
+or an object with separate open and close properties to specify different durations
+for opening and closing animations.
+- \`initial\` (optional): Represents the initial CSS styles for the modal component when
+it is first mounted. This property allows you to define the initial appearance of the
+modal before any animations occur.
+- \`open\` (optional): Defines the CSS styles that should be applied when the modal is fully
+opened. This property specifies the appearance of the modal when it transitions from the
+initial state to the fully open state.
+- \`close\` (optional): Specifies the CSS styles for the modal when it is being closed. This
+property determines the appearance of the modal when it transitions from the fully open
+state to the closed state.
+- \`common\` (optional): Represents the CSS styles that are common to all states of the modal
+component. These styles will be applied throughout the entire lifecycle of the modal,
+regardless of whether it is in the initial, open, or close state. You can use this property
+to define shared styles that should be present in all states.
+
+The modal component follows a predefined order of states as it transitions through
+its lifecycle. It starts in the \`unmounted\` state, then moves to the \`initial\` state when mounted.
+From there, it can transition to the \`open\` state when fully opened, and then to the \`close\` state
+when being closed. Finally, it returns to the \`unmounted\` state when it is no longer needed.
+
+This is the transition order: \`unmounted\` -> \`initial\` -> \`open\` -> \`close\` -> \`unmounted\`
+By specifying the appropriate values for the \`duration\`, \`initial\`, \`open\`, \`close\`, and \`common\` properties,
+you can control the animation and styling of the modal at each stage of its lifecycle.
+      `,
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: 'UseTransitionStylesProps'
+        }
+      }
+    },
+    hideBackdrop: {
+      description: 'if **true**, dark backdrop is removed and transparent backdrop is applied on the DOM',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'true'
+        }
+      }
+    },
+    initialFocus: {
+      description: 'Which element to initially focus. Can be a number (tabbable index as specified by the order)',
+      control: {
+        type: 'number'
+      },
+      table: {
+        type: {
+          summary: 'number'
+        },
+        defaultValue: {
+          summary: '-1'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a Panel component',
+      description: {
+        component: `
+\`\`\`js
+import { Panel, PanelBody, PanelHeader, PanelFooter } from "@spaced-out/ui-design-system/lib/components/Panel";
+\`\`\`
+Destinations in the app are accessible through Panels. Panels are **side sheets**, which are attached to the left or
+right edge of the screen and are surfaces with extra content. Panels can either be permanently on-screen or controlled by an **action**.
+
+Panel is a variation of a **<a href="../?path=/docs/components-modal--docs">Modal</a>** with additional animation, position and size overrides.
+
+Semantically a Panel component should be composed from \`PanelHeader\`, \`PanelBody\`, and \`PanelFooter\` **components**, these are nothing but layout components which defines
+appropriate spacing for the children living in them. \`PanelHeader\` adds a close icon by default and provides a callback on click. You can pass a prop to
+show/hide the close button as well.
+Each of these components also exposes a className
+          `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/Panel/Panel.jsx'
+    }
+  }
+};
+const _Normal = args => {
+  const [isOpen, setIsOpen] = React.useState(args.isOpen);
+  React.useEffect(() => {
+    setIsOpen(args.isOpen);
+  }, [args.isOpen]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _PanelStoriesModule.default.container
+  }, /*#__PURE__*/React.createElement(_Button.Button, {
+    onClick: () => setIsOpen(!isOpen)
+  }, "Open Panel"), /*#__PURE__*/React.createElement(_Panel.Panel, _extends({}, args, {
+    isOpen: isOpen,
+    onClose: () => setIsOpen(false)
+  }), /*#__PURE__*/React.createElement(_Panel.PanelHeader, {
+    onCloseButtonClick: () => setIsOpen(false),
+    size: "medium"
+  }, /*#__PURE__*/React.createElement(_Text.SubTitleLarge, null, "Panel Title")), /*#__PURE__*/React.createElement(_Panel.PanelBody, null, /*#__PURE__*/React.createElement(_Input.Input, {
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email address"
+  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(_Dropdown.SimpleDropdown, {
+    label: "Issue Type",
+    placeholder: "Select an issue type",
+    options: [{
+      iconLeft: 'bug',
+      iconLeftType: 'duotone',
+      key: '1',
+      label: 'Production Issue'
+    }, {
+      iconLeft: 'bug-slash',
+      iconLeftType: 'duotone',
+      key: '2',
+      label: 'Dev Issue'
+    }, {
+      iconLeft: 'ban-bug',
+      iconLeftType: 'duotone',
+      key: '4',
+      label: 'Product Issue'
+    }]
+  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(_Textarea.Textarea, {
+    label: "Description",
+    placeholder: "Enter the issue description"
+  })), /*#__PURE__*/React.createElement(_Panel.PanelFooter, null, /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "tertiary",
+    onClick: () => setIsOpen(false)
+  }, "Close"), /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "secondary",
+    onClick: () => setIsOpen(false)
+  }, "Save"))));
+};
+exports._Normal = _Normal;
+_Normal.args = {
+  anchor: 'right',
+  size: 'medium',
+  tapOutsideToClose: true,
+  initialFocus: 1
+};
+const _WithNestedDialog = args => {
+  const [isOpen, setIsOpen] = React.useState(args.isOpen || false);
+  const [isOpen2, setIsOpen2] = React.useState(false);
+  React.useEffect(() => {
+    // @ts-ignore - TS2345 - Argument of type 'boolean | undefined' is not assignable to parameter of type 'SetStateAction<boolean>'.
+    setIsOpen(args.isOpen);
+  }, [args.isOpen]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _PanelStoriesModule.default.container
+  }, /*#__PURE__*/React.createElement(_Button.Button, {
+    onClick: () => setIsOpen(!isOpen)
+  }, "Open Panel With Nested Dialog"), /*#__PURE__*/React.createElement(_Panel.Panel, _extends({}, args, {
+    isOpen: isOpen,
+    onClose: () => setIsOpen(false)
+  }), /*#__PURE__*/React.createElement(_Panel.PanelHeader, {
+    onCloseButtonClick: () => setIsOpen(false),
+    size: "medium"
+  }, /*#__PURE__*/React.createElement(_Text.SubTitleLarge, null, "Panel Title(First Elevation)")), /*#__PURE__*/React.createElement(_Panel.PanelBody, null, /*#__PURE__*/React.createElement(_Input.Input, {
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email address"
+  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(_Dropdown.SimpleDropdown, {
+    label: "Issue Type",
+    placeholder: "Select an issue type",
+    options: [{
+      iconLeft: 'bug',
+      iconLeftType: 'duotone',
+      key: '1',
+      label: 'Production Issue'
+    }, {
+      iconLeft: 'bug-slash',
+      iconLeftType: 'duotone',
+      key: '2',
+      label: 'Dev Issue'
+    }, {
+      iconLeft: 'ban-bug',
+      iconLeftType: 'duotone',
+      key: '4',
+      label: 'Product Issue'
+    }]
+  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(_Textarea.Textarea, {
+    label: "Description",
+    placeholder: "Enter the issue description"
+  }), /*#__PURE__*/React.createElement(_Dialog.Dialog, {
+    initialFocus: 1,
+    onClose: () => setIsOpen2(false),
+    semantic: "neutral",
+    isOpen: isOpen2
+  }, /*#__PURE__*/React.createElement(_Dialog.DialogHeader, null, /*#__PURE__*/React.createElement(_Text.SubTitleLarge, null, " Dialog Title")), /*#__PURE__*/React.createElement(_Dialog.DialogBody, null, /*#__PURE__*/React.createElement(_Text.BodyLarge, {
+    color: "secondary"
+  }, "Dialogs should only be used occasionally because they are intended to be disruptive. Dialogs come in multiple variants.")), /*#__PURE__*/React.createElement(_Dialog.DialogFooter, null, /*#__PURE__*/React.createElement(_Button.Button, {
+    isFluid: true,
+    onClick: () => setIsOpen2(false),
+    type: "tertiary"
+  }, "Close"), /*#__PURE__*/React.createElement(_Button.Button, {
+    isFluid: true,
+    onClick: () => setIsOpen2(false),
+    type: "secondary"
+  }, "Confirm")))), /*#__PURE__*/React.createElement(_Panel.PanelFooter, null, /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "tertiary",
+    onClick: () => setIsOpen(false)
+  }, "Close"), /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "secondary",
+    onClick: () => setIsOpen2(true)
+  }, "Open Nested Dialog"))));
+};
+exports._WithNestedDialog = _WithNestedDialog;
+_WithNestedDialog.args = {
+  anchor: 'right',
+  size: 'medium',
+  tapOutsideToClose: true,
+  initialFocus: 1
+};
+const _WithInteractiveBackground = args => {
+  const [isOpen, setIsOpen] = React.useState(args.isOpen);
+  React.useEffect(() => {
+    setIsOpen(args.isOpen);
+  }, [args.isOpen]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: _PanelStoriesModule.default.container
+  }, /*#__PURE__*/React.createElement(_Button.Button, {
+    onClick: () => setIsOpen(!isOpen)
+  }, "Open Panel"), /*#__PURE__*/React.createElement("div", {
+    className: _PanelStoriesModule.default.interactionContainer
+  }, /*#__PURE__*/React.createElement(_Tooltip.Tooltip, {
+    body: "When the panel opens, the background content is interactive",
+    bodyMaxLines: 2,
+    placement: "top",
+    title: "I am interactive tooltip"
+  }, /*#__PURE__*/React.createElement(_Button.Button, {
+    iconLeftName: "face-sunglasses",
+    type: "tertiary"
+  }, "Hover Me after opening the panel"))), /*#__PURE__*/React.createElement(_Panel.Panel, _extends({}, args, {
+    isOpen: isOpen,
+    onClose: () => setIsOpen(false)
+  }), /*#__PURE__*/React.createElement(_Panel.PanelHeader, {
+    onCloseButtonClick: () => setIsOpen(false),
+    size: "medium"
+  }, /*#__PURE__*/React.createElement(_Text.SubTitleLarge, null, "Panel Title")), /*#__PURE__*/React.createElement(_Panel.PanelBody, null, /*#__PURE__*/React.createElement(_Input.Input, {
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email address"
+  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(_Dropdown.SimpleDropdown, {
+    label: "Issue Type",
+    placeholder: "Select an issue type",
+    options: [{
+      iconLeft: 'bug',
+      iconLeftType: 'duotone',
+      key: '1',
+      label: 'Production Issue'
+    }, {
+      iconLeft: 'bug-slash',
+      iconLeftType: 'duotone',
+      key: '2',
+      label: 'Dev Issue'
+    }, {
+      iconLeft: 'ban-bug',
+      iconLeftType: 'duotone',
+      key: '4',
+      label: 'Product Issue'
+    }]
+  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(_Textarea.Textarea, {
+    label: "Description",
+    placeholder: "Enter the issue description"
+  })), /*#__PURE__*/React.createElement(_Panel.PanelFooter, null, /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "tertiary",
+    onClick: () => setIsOpen(false)
+  }, "Close"), /*#__PURE__*/React.createElement(_Button.Button, {
+    type: "secondary",
+    onClick: () => setIsOpen(false)
+  }, "Save"))));
+};
+exports._WithInteractiveBackground = _WithInteractiveBackground;
+_WithInteractiveBackground.args = {
+  anchor: 'right',
+  size: 'medium',
+  initialFocus: 1,
+  allowBackgroundInteraction: true
+};

package/lib/components/Panel/index.d.ts

@@ -0,0 +1,3 @@
+export type { PanelAnchor, PanelBodyProps, PanelFooterProps, PanelHeaderProps, PanelProps, PanelSize } from './Panel';
+export { Panel, PanelBody, PanelFooter, PanelHeader } from './Panel';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Panel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAC,WAAW,EAAE,cAAc,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,UAAU,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AACpH,OAAO,EAAC,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAC,MAAM,SAAS,CAAC"}

package/lib/components/ProgressDonut/ProgressDonut.d.ts

@@ -0,0 +1,13 @@
+import { Flow } from 'flow-to-typescript-codemod';
+import * as COLORS from '../../styles/variables/_color';
+type ClassNames = Readonly<{
+    wrapper?: string;
+}>;
+export type ProgressDonutProps = {
+    classNames?: ClassNames;
+    color?: keyof typeof COLORS;
+    percentage: number;
+};
+export declare const ProgressDonut: Flow.AbstractComponent<ProgressDonutProps, HTMLDivElement>;
+export {};
+//# sourceMappingURL=ProgressDonut.d.ts.map

package/lib/components/ProgressDonut/ProgressDonut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressDonut.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressDonut/ProgressDonut.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAIhD,OAAO,KAAK,MAAM,MAAM,+BAA+B,CAAC;AAgBxD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAcF,eAAO,MAAM,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAAC,kBAAkB,EAAE,cAAc,CAoEnF,CAAC"}

package/lib/components/ProgressDonut/ProgressDonut.js

@@ -34,6 +34,7 @@ const ProgressDonut = exports.ProgressDonut = /*#__PURE__*/React.forwardRef((_re
   let {
     classNames,
     percentage = 0,
+    // @ts-ignore - TS2322 - Type '""' is not assignable to type '"colorTextPrimary" | "colorTextSecondary" | "colorTextTertiary" | "colorTextDisabled" | "colorTextClickable" | "colorTextNeutral" | "colorTextSuccess" | "colorTextInformation" | ... 95 more ... | "colorDangerDarkest"'.
     color = ''
   } = _ref;
   const donutPercentage = React.useMemo(() => Math.min(Math.max(percentage, MIN_PERCENTAGE), MAX_PERCENTAGE), [percentage]);

package/lib/components/ProgressDonut/ProgressDonut.stories.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import type { ProgressDonutProps } from './';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: import("flow-to-typescript-codemod").Flow.AbstractComponent<ProgressDonutProps, HTMLDivElement>;
+    argTypes: {
+        classNames: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        percentage: {
+            description: string;
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: number;
+                };
+            };
+        };
+        color: {
+            description: string;
+            options: unknown[];
+            control: {
+                type: string;
+            };
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    parameters: {
+        docs: {
+            subtitle: string;
+            description: {
+                component: string;
+            };
+        };
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _Default: {
+    (args: ProgressDonutProps): React.JSX.Element;
+    args: {
+        percentage: number;
+    };
+};
+export declare const _WithCustomColor: {
+    (args: ProgressDonutProps): React.JSX.Element;
+    args: {
+        percentage: number;
+        color: string;
+    };
+};
+//# sourceMappingURL=ProgressDonut.stories.d.ts.map

package/lib/components/ProgressDonut/ProgressDonut.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressDonut.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressDonut/ProgressDonut.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAW3C,wBAgEE;AAEF,eAAO,MAAM,QAAQ;WAAU,kBAAkB;;;;CAE1C,CAAC;AAMR,eAAO,MAAM,gBAAgB;WAAU,kBAAkB;;;;;CAElD,CAAC"}

package/lib/components/ProgressDonut/ProgressDonut.stories.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._WithCustomColor = exports._Default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var COLORS = _interopRequireWildcard(require("../../styles/variables/_color"));
+var _ = require("./");
+var _ProgressDonutStoriesModule = _interopRequireDefault(require("./ProgressDonut.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const colorOptions = ['--', ...Object.keys(COLORS).filter(color => color.startsWith('colorText'))];
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Components/Progress Donut',
+  component: _.ProgressDonut,
+  argTypes: {
+    classNames: {
+      description: 'Provide an optional classNames to be applied to the wrapper, {wrapper?: string}',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{ wrapper?: string }'
+        }
+      }
+    },
+    percentage: {
+      description: 'Represents the completion percentage of the donut progress, ranging from 0 to 100 inclusive',
+      control: {
+        type: 'number'
+      },
+      table: {
+        type: {
+          summary: 'number'
+        },
+        defaultValue: {
+          summary: 0
+        }
+      }
+    },
+    color: {
+      description: 'Pass different text color token string to show loader in different color',
+      options: colorOptions,
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      subtitle: 'Generates a ProgressDonut component.',
+      description: {
+        component: `
+\`\`\`js
+import { ProgressDonut } from "@spaced-out/ui-design-system/lib/components/ProgressDonut";
+\`\`\`
+A progress indicator in the shape of a donut chart to visually represent completion percentages. This component uses configurable colors based on the percentage range, and supports an optional custom color.
+
+**Usage: **
+\`\`\`
+<ProgressDonut
+  percentage={75}
+  color="colorFillPrimary" // Optional custom color
+/>
+\`\`\`
+        `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/ProgressDonut/ProgressDonut.jsx'
+    }
+  }
+};
+const _Default = args => /*#__PURE__*/React.createElement("div", {
+  className: _ProgressDonutStoriesModule.default.container
+}, /*#__PURE__*/React.createElement(_.ProgressDonut, args));
+exports._Default = _Default;
+_Default.args = {
+  percentage: 90
+};
+const _WithCustomColor = args => /*#__PURE__*/React.createElement("div", {
+  className: _ProgressDonutStoriesModule.default.container
+}, /*#__PURE__*/React.createElement(_.ProgressDonut, args));
+exports._WithCustomColor = _WithCustomColor;
+_WithCustomColor.args = {
+  percentage: 47,
+  color: 'colorTextInformation'
+};

package/lib/components/ProgressDonut/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ProgressDonut';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/ProgressDonut/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressDonut/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/lib/components/PromptChip/PromptChip.d.ts

@@ -0,0 +1,38 @@
+import { Flow } from 'flow-to-typescript-codemod';
+import * as React from 'react';
+import type { ColorTypes } from '../../types/typography';
+import type { IconType } from '../Icon';
+import type { BaseTooltipProps } from '../Tooltip';
+type ClassNames = Readonly<{
+    icon?: string;
+    wrapper?: string;
+    children?: string;
+    container?: string;
+}>;
+export declare const PROMPT_CHIP_TYPE: Readonly<{
+    primary: "primary";
+    secondary: "secondary";
+}>;
+export type PromptChipType = typeof PROMPT_CHIP_TYPE[keyof typeof PROMPT_CHIP_TYPE];
+export type PromptChipProps = ({
+    classNames?: ClassNames;
+} & ({
+    onDismiss?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
+    dismissable: true;
+    selfDismiss?: boolean;
+} | {
+    dismissable?: false;
+}) & {
+    type?: PromptChipType;
+    onClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
+    iconName?: string;
+    iconType?: IconType;
+    children?: React.ReactNode;
+    iconColor?: ColorTypes;
+    rightSlot?: React.ReactNode;
+    showInfoIcon?: boolean;
+    infoIconTooltip?: BaseTooltipProps;
+});
+export declare const PromptChip: Flow.AbstractComponent<PromptChipProps, HTMLDivElement>;
+export {};
+//# sourceMappingURL=PromptChip.d.ts.map

package/lib/components/PromptChip/PromptChip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromptChip.d.ts","sourceRoot":"","sources":["../../../src/components/PromptChip/PromptChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAEhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,wBAAwB,CAAC;AAIvD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEtC,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,YAAY,CAAC;AAMjD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,OAAO,gBAAgB,CAAC,MAAM,OAAO,gBAAgB,CAAC,CAAC;AACpF,MAAM,MAAM,eAAe,GAAG,CAAC;IAC7B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,GAAG,CAAC;IACH,SAAS,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACtF,WAAW,EAAE,IAAI,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG;IACF,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CAAC,GAAG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,gBAAgB,CAAC;CACpC,CAAC,CAAC;AAEH,eAAO,MAAM,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAAC,eAAe,EAAE,cAAc,CAoH7E,CAAC"}