@zidsa/zidmui 1.5.1 → 1.5.3

package/dist/cjs/components/app-icon-with-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-icon-with-tooltip.js","sources":["../../../src/components/app-icon-with-tooltip.tsx"],"sourcesContent":["import { Box, SvgIconOwnProps, styled } from '@mui/material';\n\nimport { IconInformationLine } from '../icons/system/information-line';\n\nimport { AppTooltip, AppTooltipProps } from './app-tooltip';\nimport { StackRow } from './stack-row';\n\n//\n//\n\n// NOTE: accessibleAreaWidth and accessibleAreaHeight are used to create non-visible area for\n//       the tooltip to be accessible on mobile\n\nexport type AppIconWithTooltipProps = {\n  accessibleAreaWidth?: string;\n  accessibleAreaHeight?: string;\n  icon?: React.ReactNode;\n  iconProps?: SvgIconOwnProps;\n  tooltip?: AppTooltipProps['description'];\n  tooltipProps?: Omit<AppTooltipProps, 'children'>;\n};\n\nexport const AppIconWithTooltip: React.FC<AppIconWithTooltipProps> = ({\n  tooltip,\n  tooltipProps,\n  accessibleAreaWidth = '36px',\n  accessibleAreaHeight = '36px',\n  icon,\n  iconProps,\n}) => {\n  if (!tooltip) return;\n\n  return (\n    <AppTooltip description={tooltip} {...tooltipProps}>\n      <StackRow position=\"relative\" alignItems=\"center\" justifyContent=\"center\">\n        {icon ?? <IconInformationLine fontSize=\"inherit\" color=\"action\" {...iconProps} />}\n        <TooltipArea width={accessibleAreaWidth} height={accessibleAreaHeight} />\n      </StackRow>\n    </AppTooltip>\n  );\n};\n\nconst TooltipArea = styled(Box)(({ width, height }) => ({\n  position: 'absolute',\n  display: 'none',\n  pointerEvents: 'none',\n  '@media (pointer:none), (pointer:coarse), (hover:none)': {\n    display: 'block',\n    width: width || '24px',\n    height: height || '24px',\n    pointerEvents: 'auto',\n  },\n}));\n"],"names":["jsx","AppTooltip","jsxs","StackRow","IconInformationLine","styled","Box"],"mappings":";;;;;;;AAsBO,MAAM,qBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,EACvB;AAAA,EACA;AACF,MAAM;AACJ,MAAI,CAAC,QAAS;AAEd,SACEA,2BAAAA,IAACC,WAAAA,YAAA,EAAW,aAAa,SAAU,GAAG,cACpC,UAAAC,2BAAAA,KAACC,SAAAA,UAAA,EAAS,UAAS,YAAW,YAAW,UAAS,gBAAe,UAC9D,UAAA;AAAA,IAAA,uCAASC,gBAAAA,qBAAA,EAAoB,UAAS,WAAU,OAAM,UAAU,GAAG,WAAW;AAAA,IAC/EJ,2BAAAA,IAAC,aAAA,EAAY,OAAO,qBAAqB,QAAQ,qBAAA,CAAsB;AAAA,EAAA,EAAA,CACzE,EAAA,CACF;AAEJ;AAEA,MAAM,cAAcK,SAAAA,OAAOC,SAAAA,GAAG,EAAE,CAAC,EAAE,OAAO,cAAc;AAAA,EACtD,UAAU;AAAA,EACV,SAAS;AAAA,EACT,eAAe;AAAA,EACf,yDAAyD;AAAA,IACvD,SAAS;AAAA,IACT,OAAO,SAAS;AAAA,IAChB,QAAQ,UAAU;AAAA,IAClB,eAAe;AAAA,EAAA;AAEnB,EAAE;;"}
+{"version":3,"file":"app-icon-with-tooltip.js","sources":["../../../src/components/app-icon-with-tooltip.tsx"],"sourcesContent":["import { Box, SvgIconOwnProps, styled } from '@mui/material';\n\nimport { IconInformationLine } from '~/icons/system/information-line';\n\nimport { AppTooltip, AppTooltipProps } from './app-tooltip';\nimport { StackRow } from './stack-row';\n\n//\n//\n\n// NOTE: accessibleAreaWidth and accessibleAreaHeight are used to create non-visible area for\n//       the tooltip to be accessible on mobile\n\nexport type AppIconWithTooltipProps = {\n  accessibleAreaWidth?: string;\n  accessibleAreaHeight?: string;\n  icon?: React.ReactNode;\n  iconProps?: SvgIconOwnProps;\n  tooltip?: AppTooltipProps['description'];\n  tooltipProps?: Omit<AppTooltipProps, 'children'>;\n};\n\nexport const AppIconWithTooltip: React.FC<AppIconWithTooltipProps> = ({\n  tooltip,\n  tooltipProps,\n  accessibleAreaWidth = '36px',\n  accessibleAreaHeight = '36px',\n  icon,\n  iconProps,\n}) => {\n  if (!tooltip) return;\n\n  return (\n    <AppTooltip description={tooltip} {...tooltipProps}>\n      <StackRow position=\"relative\" alignItems=\"center\" justifyContent=\"center\">\n        {icon ?? <IconInformationLine fontSize=\"inherit\" color=\"action\" {...iconProps} />}\n        <TooltipArea width={accessibleAreaWidth} height={accessibleAreaHeight} />\n      </StackRow>\n    </AppTooltip>\n  );\n};\n\nconst TooltipArea = styled(Box)(({ width, height }) => ({\n  position: 'absolute',\n  display: 'none',\n  pointerEvents: 'none',\n  '@media (pointer:none), (pointer:coarse), (hover:none)': {\n    display: 'block',\n    width: width || '24px',\n    height: height || '24px',\n    pointerEvents: 'auto',\n  },\n}));\n"],"names":["jsx","AppTooltip","jsxs","StackRow","IconInformationLine","styled","Box"],"mappings":";;;;;;;AAsBO,MAAM,qBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,EACvB;AAAA,EACA;AACF,MAAM;AACJ,MAAI,CAAC,QAAS;AAEd,SACEA,2BAAAA,IAACC,WAAAA,YAAA,EAAW,aAAa,SAAU,GAAG,cACpC,UAAAC,2BAAAA,KAACC,SAAAA,UAAA,EAAS,UAAS,YAAW,YAAW,UAAS,gBAAe,UAC9D,UAAA;AAAA,IAAA,uCAASC,gBAAAA,qBAAA,EAAoB,UAAS,WAAU,OAAM,UAAU,GAAG,WAAW;AAAA,IAC/EJ,2BAAAA,IAAC,aAAA,EAAY,OAAO,qBAAqB,QAAQ,qBAAA,CAAsB;AAAA,EAAA,EAAA,CACzE,EAAA,CACF;AAEJ;AAEA,MAAM,cAAcK,SAAAA,OAAOC,SAAAA,GAAG,EAAE,CAAC,EAAE,OAAO,cAAc;AAAA,EACtD,UAAU;AAAA,EACV,SAAS;AAAA,EACT,eAAe;AAAA,EACf,yDAAyD;AAAA,IACvD,SAAS;AAAA,IACT,OAAO,SAAS;AAAA,IAChB,QAAQ,UAAU;AAAA,IAClB,eAAe;AAAA,EAAA;AAEnB,EAAE;;"}

package/dist/cjs/components/app-input-base-search.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-input-base-search.js","sources":["../../../src/components/app-input-base-search.tsx"],"sourcesContent":["import { IconButtonProps, SvgIconProps, TextFieldProps } from '@mui/material';\n\nimport { IconSearchLine } from '../icons/system/search-line';\n\nimport { AppInputBase } from './app-input-base';\n\n//\n//\n\nexport type AppInputSearchProps = TextFieldProps & {\n  name: string;\n  transformText?: (text: string) => string;\n  iconButtonProps?: IconButtonProps;\n  iconProps?: SvgIconProps;\n};\n\nexport const AppInputBaseSearch = ({\n  name,\n  helperText,\n  transformText,\n  children,\n  ...props\n}: AppInputSearchProps) => {\n  return (\n    <AppInputBase\n      transformText={transformText}\n      id={'input-' + name}\n      helperText={helperText}\n      startAdornment={<IconSearchLine fontSize=\"small\" />}\n      {...props}\n    >\n      {children}\n    </AppInputBase>\n  );\n};\n"],"names":["jsx","AppInputBase","IconSearchLine"],"mappings":";;;;;AAgBO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,SACEA,2BAAAA;AAAAA,IAACC,aAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,IAAI,WAAW;AAAA,MACf;AAAA,MACA,gBAAgBD,2BAAAA,IAACE,WAAAA,gBAAA,EAAe,UAAS,QAAA,CAAQ;AAAA,MAChD,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;;"}
+{"version":3,"file":"app-input-base-search.js","sources":["../../../src/components/app-input-base-search.tsx"],"sourcesContent":["import { IconButtonProps, SvgIconProps, TextFieldProps } from '@mui/material';\n\nimport { IconSearchLine } from '~/icons/system/search-line';\n\nimport { AppInputBase } from './app-input-base';\n\n//\n//\n\nexport type AppInputSearchProps = TextFieldProps & {\n  name: string;\n  transformText?: (text: string) => string;\n  iconButtonProps?: IconButtonProps;\n  iconProps?: SvgIconProps;\n};\n\nexport const AppInputBaseSearch = ({\n  name,\n  helperText,\n  transformText,\n  children,\n  ...props\n}: AppInputSearchProps) => {\n  return (\n    <AppInputBase\n      transformText={transformText}\n      id={'input-' + name}\n      helperText={helperText}\n      startAdornment={<IconSearchLine fontSize=\"small\" />}\n      {...props}\n    >\n      {children}\n    </AppInputBase>\n  );\n};\n"],"names":["jsx","AppInputBase","IconSearchLine"],"mappings":";;;;;AAgBO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,SACEA,2BAAAA;AAAAA,IAACC,aAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,IAAI,WAAW;AAAA,MACf;AAAA,MACA,gBAAgBD,2BAAAA,IAACE,WAAAA,gBAAA,EAAe,UAAS,QAAA,CAAQ;AAAA,MAChD,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;;"}

package/dist/cjs/stories/css/Alert.stories.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+;/* empty css                   */
+const closeLine = require("../../icons/system/close-line.js");
+const icons = {
+  success: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }),
+  info: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) }),
+  warning: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) }),
+  error: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }) })
+};
+const meta = {
+  title: "CSS Styles/Components/Alert",
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["autodocs"]
+};
+const WithTitle = {
+  render: () => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "h3",
+        {
+          style: {
+            marginBottom: "8px",
+            fontFamily: "var(--zid-font-family)"
+          },
+          children: "Alerts with Title"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-alert zid-alert--success", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__icon", children: icons.success }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-alert__content", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__title", children: "Success" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__message", children: "Your order has been placed successfully." })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-alert__close", "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(closeLine.IconCloseLine, {}) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-alert zid-alert--info", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__icon", children: icons.info }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-alert__content", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__title", children: "Information" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__message", children: "This alert has a title and a message for more context." })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-alert__close", "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(closeLine.IconCloseLine, {}) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-alert zid-alert--warning", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__icon", children: icons.warning }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-alert__content", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__title", children: "Warning" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__message", children: "Your session will expire in 5 minutes." })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-alert__close", "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(closeLine.IconCloseLine, {}) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-alert zid-alert--error", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__icon", children: icons.error }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "zid-alert__content", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__title", children: "Error" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "zid-alert__message", children: "Failed to save changes. Please try again." })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "zid-alert__close", "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(closeLine.IconCloseLine, {}) })
+      ] })
+    ] });
+  }
+};
+exports.WithTitle = WithTitle;
+exports.default = meta;
+//# sourceMappingURL=Alert.stories.js.map

package/dist/cjs/stories/css/Alert.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.stories.js","sources":["../../../../src/stories/css/Alert.stories.tsx"],"sourcesContent":["import type { StoryObj } from '@storybook/react-vite';\nimport '../../css/index.css';\nimport { IconCloseLine } from '~/icons/system/close-line';\n\n//\n//\n\nconst icons = {\n  success: (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z\" />\n    </svg>\n  ),\n  info: (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\" />\n    </svg>\n  ),\n  warning: (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\" />\n    </svg>\n  ),\n  error: (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\" />\n    </svg>\n  ),\n};\n\n// Meta\nconst meta = {\n  title: 'CSS Styles/Components/Alert',\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const WithTitle: Story = {\n  render: () => {\n    return (\n      <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>\n        <h3\n          style={{\n            marginBottom: '8px',\n            fontFamily: 'var(--zid-font-family)',\n          }}\n        >\n          Alerts with Title\n        </h3>\n\n        <div className=\"zid-alert zid-alert--success\">\n          <div className=\"zid-alert__icon\">{icons.success}</div>\n          <div className=\"zid-alert__content\">\n            <div className=\"zid-alert__title\">Success</div>\n            <div className=\"zid-alert__message\">Your order has been placed successfully.</div>\n          </div>\n          <button className=\"zid-alert__close\" aria-label=\"Close\">\n            <IconCloseLine />\n          </button>\n        </div>\n\n        <div className=\"zid-alert zid-alert--info\">\n          <div className=\"zid-alert__icon\">{icons.info}</div>\n          <div className=\"zid-alert__content\">\n            <div className=\"zid-alert__title\">Information</div>\n            <div className=\"zid-alert__message\">\n              This alert has a title and a message for more context.\n            </div>\n          </div>\n          <button className=\"zid-alert__close\" aria-label=\"Close\">\n            <IconCloseLine />\n          </button>\n        </div>\n\n        <div className=\"zid-alert zid-alert--warning\">\n          <div className=\"zid-alert__icon\">{icons.warning}</div>\n          <div className=\"zid-alert__content\">\n            <div className=\"zid-alert__title\">Warning</div>\n            <div className=\"zid-alert__message\">Your session will expire in 5 minutes.</div>\n          </div>\n          <button className=\"zid-alert__close\" aria-label=\"Close\">\n            <IconCloseLine />\n          </button>\n        </div>\n\n        <div className=\"zid-alert zid-alert--error\">\n          <div className=\"zid-alert__icon\">{icons.error}</div>\n          <div className=\"zid-alert__content\">\n            <div className=\"zid-alert__title\">Error</div>\n            <div className=\"zid-alert__message\">Failed to save changes. Please try again.</div>\n          </div>\n          <button className=\"zid-alert__close\" aria-label=\"Close\">\n            <IconCloseLine />\n          </button>\n        </div>\n      </div>\n    );\n  },\n};\n"],"names":["jsx","jsxs","IconCloseLine"],"mappings":"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"}

package/dist/cjs/stories/design/Colors.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Colors.stories.js","sources":["../../../../src/stories/design/Colors.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\nimport { useState } from 'react';\n\nimport { Box, Typography, useTheme, styled } from '@mui/material';\n\n//\n//\n\nconst ColorSwatchContainer = styled(Box)({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '32px',\n  padding: '24px',\n  maxWidth: '1200px',\n});\n\nconst ColorGroupTitle = styled(Typography)(({ theme }) => ({\n  fontSize: theme.spacing(3),\n  fontWeight: 600,\n  marginBottom: theme.spacing(2),\n  textTransform: 'capitalize',\n}));\n\nconst ColorRow = styled(Box)({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: '12px',\n});\n\nconst ColorSwatch = styled(Box)<{ bgColor: string; isLight?: boolean }>(({ bgColor, isLight }) => ({\n  width: '100px',\n  height: '80px',\n  backgroundColor: bgColor,\n  borderRadius: '8px',\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'flex-end',\n  padding: '8px',\n  border: '1px solid rgba(0, 0, 0, 0.1)',\n  color: isLight ? '#0E0217' : '#FFFFFF',\n  fontSize: '11px',\n  fontFamily: 'monospace',\n  cursor: 'pointer',\n  transition: 'transform 0.15s ease, box-shadow 0.15s ease',\n  '&:hover': {\n    transform: 'scale(1.05)',\n    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',\n  },\n  '&:active': {\n    transform: 'scale(0.98)',\n  },\n}));\n\nconst SwatchLabel = styled('span')({\n  fontWeight: 600,\n  marginBottom: '2px',\n});\n\nconst SwatchHex = styled('span')({\n  opacity: 0.8,\n  fontSize: '10px',\n});\n\n//\n//\n\ninterface ColorScale {\n  [key: string]: string;\n}\n\nconst isLightColor = (color: string): boolean => {\n  let r: number, g: number, b: number;\n\n  // Handle rgba format: rgba(255, 255, 255, 0.8)\n  if (color.startsWith('rgba')) {\n    const match = color.match(/rgba?\\((\\d+),\\s*(\\d+),\\s*(\\d+)/);\n\n    if (match) {\n      r = parseInt(match[1], 10);\n      g = parseInt(match[2], 10);\n      b = parseInt(match[3], 10);\n    } else {\n      return true; // Default to light if parsing fails\n    }\n  } else {\n    // Handle hex format: #FFFFFF\n    const hex = color.replace('#', '');\n    r = parseInt(hex.substring(0, 2), 16);\n    g = parseInt(hex.substring(2, 4), 16);\n    b = parseInt(hex.substring(4, 6), 16);\n  }\n\n  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;\n\n  return luminance > 0.5;\n};\n\nconst ColorScaleDisplay = ({ name, colors }: { name: string; colors: ColorScale }) => {\n  const [copiedKey, setCopiedKey] = useState<string | null>(null);\n\n  const handleCopy = (shade: string, hex: string) => {\n    navigator.clipboard.writeText(hex);\n    setCopiedKey(shade);\n    setTimeout(() => setCopiedKey(null), 1500);\n  };\n\n  return (\n    <Box>\n      <ColorGroupTitle>{name}</ColorGroupTitle>\n      <ColorRow>\n        {Object.entries(colors).map(([shade, hex]) => (\n          <ColorSwatch\n            key={shade}\n            bgColor={hex}\n            isLight={isLightColor(hex)}\n            onClick={() => handleCopy(shade, hex)}\n            title={`Click to copy ${hex}`}\n          >\n            <SwatchLabel>{copiedKey === shade ? 'Copied!' : shade}</SwatchLabel>\n            <SwatchHex>{hex}</SwatchHex>\n          </ColorSwatch>\n        ))}\n      </ColorRow>\n    </Box>\n  );\n};\n\n//\n//\n\nconst ColorsDisplay = () => {\n  const theme = useTheme();\n  const { colors } = theme.palette;\n\n  const colorScales = [\n    { name: 'Primary', colors: colors.primary },\n    { name: 'Secondary', colors: colors.secondary },\n    { name: 'Neutral', colors: colors.neutral },\n    { name: 'Green', colors: colors.green },\n    { name: 'Blue', colors: colors.blue },\n    { name: 'Yellow', colors: colors.yellow },\n    { name: 'Orange', colors: colors.orange },\n    { name: 'Red', colors: colors.red },\n    { name: 'Base', colors: colors.base },\n  ];\n\n  return (\n    <ColorSwatchContainer>\n      <Box>\n        <Typography variant=\"h4\" sx={{ mb: 1 }}>\n          Parcel Design System Colors\n        </Typography>\n        <Typography variant=\"body2\" color=\"text.secondary\" sx={{ mb: 4 }}>\n          Access colors via <code>theme.palette.colors.&#123;colorName&#125;[shade]</code>\n        </Typography>\n      </Box>\n\n      {colorScales.map(({ name, colors }) => (\n        <ColorScaleDisplay key={name} name={name} colors={colors} />\n      ))}\n    </ColorSwatchContainer>\n  );\n};\n\n//\n//\n\nconst meta = {\n  title: 'Design System/Colors',\n  component: ColorsDisplay,\n  parameters: {\n    layout: 'fullscreen',\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof ColorsDisplay>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const AllColors: Story = {};\n"],"names":["styled","Box","Typography","useState","jsx","jsxs","useTheme","colors"],"mappings":"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"}

package/dist/cjs/stories/design/Spacing.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spacing.stories.js","sources":["../../../../src/stories/design/Spacing.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\nimport { Box, IconButton } from '@mui/material';\nimport { useState } from 'react';\nimport { StackColumn } from '../../components/stack-column';\nimport { StackRow } from '../../components/stack-row';\nimport { AppTooltip } from '../../components/app-tooltip';\nimport { IconFileCopyLine } from '../../icons/document/file-copy-line';\nimport { IconCheckLine } from '../../icons/system/check-line';\nimport { AppTypography } from '../../components/app-typography';\n\n//\n//\n\nconst meta = {\n  title: 'Design System/Spacing',\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nconst DemoBox = ({ color = '#1976d2' }: { color?: string }) => (\n  <Box\n    sx={{\n      width: 60,\n      height: 60,\n      backgroundColor: color,\n      borderRadius: 1,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color: 'white',\n      fontSize: '12px',\n      fontWeight: 'bold',\n    }}\n  >\n    Box\n  </Box>\n);\n\nconst CopyButton = ({ value }: { value: number | string }) => {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(`gap={${value}}`);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  return (\n    <AppTooltip description={copied ? 'Copied!' : 'Copy'}>\n      <IconButton size=\"small\" onClick={handleCopy}>\n        {copied ? <IconCheckLine fontSize=\"small\" /> : <IconFileCopyLine fontSize=\"small\" />}\n      </IconButton>\n    </AppTooltip>\n  );\n};\n\nconst spacingValues = [\n  1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3, 3.25, 3.5, 3.75, 4, 4.25, 4.5, 4.75, 5,\n];\n\nexport const StackRowSpacing: Story = {\n  render: () => (\n    <StackColumn gap={3}>\n      {spacingValues.map(spacing => (\n        <StackColumn key={`row-${spacing}`} gap={0.75}>\n          <StackRow gap={0}>\n            <AppTypography variant=\"subtitle1\" minWidth={60}>\n              Gap: {spacing}\n            </AppTypography>\n            <CopyButton value={spacing} />\n          </StackRow>\n\n          <StackRow gap={spacing}>\n            <DemoBox />\n            <DemoBox />\n            <DemoBox />\n            <DemoBox />\n          </StackRow>\n        </StackColumn>\n      ))}\n    </StackColumn>\n  ),\n};\n\nexport const StackColumnSpacing: Story = {\n  render: () => (\n    <StackColumn gap={3}>\n      {spacingValues.map(spacing => (\n        <StackColumn key={`col-${spacing}`} gap={0.75}>\n          <StackRow gap={0}>\n            <AppTypography variant=\"subtitle1\" minWidth={60}>\n              Gap: {spacing}\n            </AppTypography>\n            <CopyButton value={spacing} />\n          </StackRow>\n          <StackColumn gap={spacing}>\n            <DemoBox color=\"#dc3545\" />\n            <DemoBox color=\"#dc3545\" />\n            <DemoBox color=\"#dc3545\" />\n            <DemoBox color=\"#dc3545\" />\n          </StackColumn>\n        </StackColumn>\n      ))}\n    </StackColumn>\n  ),\n};\n"],"names":["jsx","Box","useState","AppTooltip","IconButton","IconCheckLine","IconFileCopyLine","StackColumn","jsxs","StackRow","AppTypography"],"mappings":";;;;;;;;;;;AAaA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AACnB;AAKA,MAAM,UAAU,CAAC,EAAE,QAAQ,gBACzBA,2BAAAA;AAAAA,EAACC,SAAAA;AAAAA,EAAA;AAAA,IACC,IAAI;AAAA,MACF,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,iBAAiB;AAAA,MACjB,cAAc;AAAA,MACd,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,UAAU;AAAA,MACV,YAAY;AAAA,IAAA;AAAA,IAEf,UAAA;AAAA,EAAA;AAED;AAGF,MAAM,aAAa,CAAC,EAAE,YAAwC;AAC5D,QAAM,CAAC,QAAQ,SAAS,IAAIC,MAAAA,SAAS,KAAK;AAE1C,QAAM,aAAa,MAAM;AACvB,cAAU,UAAU,UAAU,QAAQ,KAAK,GAAG;AAC9C,cAAU,IAAI;AACd,eAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AAAA,EACzC;AAEA,SACEF,2BAAAA,IAACG,WAAAA,cAAW,aAAa,SAAS,YAAY,QAC5C,UAAAH,2BAAAA,IAACI,SAAAA,YAAA,EAAW,MAAK,SAAQ,SAAS,YAC/B,UAAA,SAASJ,2BAAAA,IAACK,UAAAA,eAAA,EAAc,UAAS,QAAA,CAAQ,mCAAMC,aAAAA,kBAAA,EAAiB,UAAS,QAAA,CAAQ,EAAA,CACpF,EAAA,CACF;AAEJ;AAEA,MAAM,gBAAgB;AAAA,EACpB;AAAA,EAAG;AAAA,EAAM;AAAA,EAAK;AAAA,EAAM;AAAA,EAAG;AAAA,EAAM;AAAA,EAAK;AAAA,EAAM;AAAA,EAAG;AAAA,EAAM;AAAA,EAAK;AAAA,EAAM;AAAA,EAAG;AAAA,EAAM;AAAA,EAAK;AAAA,EAAM;AAClF;AAEO,MAAM,kBAAyB;AAAA,EACpC,QAAQ,MACNN,2BAAAA,IAACO,YAAAA,aAAA,EAAY,KAAK,GACf,UAAA,cAAc,IAAI,CAAA,YACjBC,gCAACD,YAAAA,aAAA,EAAmC,KAAK,MACvC,UAAA;AAAA,IAAAC,2BAAAA,KAACC,SAAAA,UAAA,EAAS,KAAK,GACb,UAAA;AAAA,MAAAD,2BAAAA,KAACE,cAAAA,eAAA,EAAc,SAAQ,aAAY,UAAU,IAAI,UAAA;AAAA,QAAA;AAAA,QACzC;AAAA,MAAA,GACR;AAAA,MACAV,2BAAAA,IAAC,YAAA,EAAW,OAAO,QAAA,CAAS;AAAA,IAAA,GAC9B;AAAA,IAEAQ,2BAAAA,KAACC,SAAAA,UAAA,EAAS,KAAK,SACb,UAAA;AAAA,MAAAT,2BAAAA,IAAC,SAAA,EAAQ;AAAA,qCACR,SAAA,EAAQ;AAAA,qCACR,SAAA,EAAQ;AAAA,qCACR,SAAA,CAAA,CAAQ;AAAA,IAAA,EAAA,CACX;AAAA,EAAA,EAAA,GAbgB,OAAO,OAAO,EAchC,CACD,EAAA,CACH;AAEJ;AAEO,MAAM,qBAA4B;AAAA,EACvC,QAAQ,MACNA,2BAAAA,IAACO,YAAAA,aAAA,EAAY,KAAK,GACf,UAAA,cAAc,IAAI,CAAA,YACjBC,gCAACD,YAAAA,aAAA,EAAmC,KAAK,MACvC,UAAA;AAAA,IAAAC,2BAAAA,KAACC,SAAAA,UAAA,EAAS,KAAK,GACb,UAAA;AAAA,MAAAD,2BAAAA,KAACE,cAAAA,eAAA,EAAc,SAAQ,aAAY,UAAU,IAAI,UAAA;AAAA,QAAA;AAAA,QACzC;AAAA,MAAA,GACR;AAAA,MACAV,2BAAAA,IAAC,YAAA,EAAW,OAAO,QAAA,CAAS;AAAA,IAAA,GAC9B;AAAA,IACAQ,2BAAAA,KAACD,YAAAA,aAAA,EAAY,KAAK,SAChB,UAAA;AAAA,MAAAP,2BAAAA,IAAC,SAAA,EAAQ,OAAM,UAAA,CAAU;AAAA,MACzBA,2BAAAA,IAAC,SAAA,EAAQ,OAAM,UAAA,CAAU;AAAA,MACzBA,2BAAAA,IAAC,SAAA,EAAQ,OAAM,UAAA,CAAU;AAAA,MACzBA,2BAAAA,IAAC,SAAA,EAAQ,OAAM,UAAA,CAAU;AAAA,IAAA,EAAA,CAC3B;AAAA,EAAA,EAAA,GAZgB,OAAO,OAAO,EAahC,CACD,EAAA,CACH;AAEJ;;;;"}
+{"version":3,"file":"Spacing.stories.js","sources":["../../../../src/stories/design/Spacing.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\nimport { Box, IconButton } from '@mui/material';\nimport { useState } from 'react';\nimport { StackColumn } from '~/components/stack-column';\nimport { StackRow } from '~/components/stack-row';\nimport { AppTooltip } from '~/components/app-tooltip';\nimport { IconFileCopyLine } from '~/icons/document/file-copy-line';\nimport { IconCheckLine } from '~/icons/system/check-line';\nimport { AppTypography } from '~/components/app-typography';\n\n//\n//\n\nconst meta = {\n  title: 'Design System/Spacing',\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nconst DemoBox = ({ color = '#1976d2' }: { color?: string }) => (\n  <Box\n    sx={{\n      width: 60,\n      height: 60,\n      backgroundColor: color,\n      borderRadius: 1,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color: 'white',\n      fontSize: '12px',\n      fontWeight: 'bold',\n    }}\n  >\n    Box\n  </Box>\n);\n\nconst CopyButton = ({ value }: { value: number | string }) => {\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(`gap={${value}}`);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  return (\n    <AppTooltip description={copied ? 'Copied!' : 'Copy'}>\n      <IconButton size=\"small\" onClick={handleCopy}>\n        {copied ? <IconCheckLine fontSize=\"small\" /> : <IconFileCopyLine fontSize=\"small\" />}\n      </IconButton>\n    </AppTooltip>\n  );\n};\n\nconst spacingValues = [\n  1, 1.25, 1.5, 1.75, 2, 2.25, 2.5, 2.75, 3, 3.25, 3.5, 3.75, 4, 4.25, 4.5, 4.75, 5,\n];\n\nexport const StackRowSpacing: Story = {\n  render: () => (\n    <StackColumn gap={3}>\n      {spacingValues.map(spacing => (\n        <StackColumn key={`row-${spacing}`} gap={0.75}>\n          <StackRow gap={0}>\n            <AppTypography variant=\"subtitle1\" minWidth={60}>\n              Gap: {spacing}\n            </AppTypography>\n            <CopyButton value={spacing} />\n          </StackRow>\n\n          <StackRow gap={spacing}>\n            <DemoBox />\n            <DemoBox />\n            <DemoBox />\n            <DemoBox />\n          </StackRow>\n        </StackColumn>\n      ))}\n    </StackColumn>\n  ),\n};\n\nexport const StackColumnSpacing: Story = {\n  render: () => (\n    <StackColumn gap={3}>\n      {spacingValues.map(spacing => (\n        <StackColumn key={`col-${spacing}`} gap={0.75}>\n          <StackRow gap={0}>\n            <AppTypography variant=\"subtitle1\" minWidth={60}>\n              Gap: {spacing}\n            </AppTypography>\n            <CopyButton value={spacing} />\n          </StackRow>\n          <StackColumn gap={spacing}>\n            <DemoBox color=\"#dc3545\" />\n            <DemoBox color=\"#dc3545\" />\n            <DemoBox color=\"#dc3545\" />\n            <DemoBox color=\"#dc3545\" />\n          </StackColumn>\n        </StackColumn>\n      ))}\n    </StackColumn>\n  ),\n};\n"],"names":["jsx","Box","useState","AppTooltip","IconButton","IconCheckLine","IconFileCopyLine","StackColumn","jsxs","StackRow","AppTypography"],"mappings":"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"}

package/dist/cjs/stories/{AppAlert.stories.js → react/AppAlert.stories.js}

@@ -2,14 +2,14 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("react/jsx-runtime");
 const material = require("@mui/material");
-const appAlert = require("../components/app-alert.js");
-const appTypography = require("../components/app-typography.js");
+const appAlert = require("../../components/app-alert.js");
+const appTypography = require("../../components/app-typography.js");
 const shortTitle = "Cupidatat proident dolor pariatur";
 const shortContent = "Nostrud commodo sunt ipsum dolore incididunt laboris exercitation pariatur duis.";
 const longTitle = "Cupidatat proident dolor pariatur cupidatat proident dolor pariatur cupidatat proident dolor pariatur cupidatat proident dolor pariatur";
 const longContent = "Nostrud commodo sunt ipsum dolore incididunt laboris exercitation pariatur duis qui Lorem pariatur nulla reprehenderit. Nostrud commodo sunt ipsum dolore incididunt laboris exercitation pariatur duis qui Lorem pariatur nulla reprehenderit.";
 const meta = {
-  title: "App Alert",
+  title: "React/App Alert",
   component: appAlert.AppAlert,
   parameters: {
     layout: "centered"

package/dist/cjs/stories/react/AppAlert.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppAlert.stories.js","sources":["../../../../src/stories/react/AppAlert.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Box, Stack } from '@mui/material';\n\nimport { AppAlert, AppAlertButton } from '~/components/app-alert';\nimport { AppTypography } from '~/components/app-typography';\n\n//\n//\n\nconst shortTitle = 'Cupidatat proident dolor pariatur';\nconst shortContent =\n  'Nostrud commodo sunt ipsum dolore incididunt laboris exercitation pariatur duis.';\n\nconst longTitle =\n  'Cupidatat proident dolor pariatur cupidatat proident dolor pariatur cupidatat proident dolor pariatur cupidatat proident dolor pariatur';\nconst longContent =\n  'Nostrud commodo sunt ipsum dolore incididunt laboris exercitation pariatur duis qui Lorem pariatur nulla reprehenderit. Nostrud commodo sunt ipsum dolore incididunt laboris exercitation pariatur duis qui Lorem pariatur nulla reprehenderit.';\n\n// Meta\nconst meta = {\n  title: 'React/App Alert',\n  component: AppAlert,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n} satisfies Meta<typeof AppAlert>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Variants: Story = {\n  render: () => {\n    const onClose = () => {};\n\n    return (\n      <>\n        <Stack spacing={2}>\n          <AppTypography variant=\"h6\">Variants</AppTypography>\n\n          <AppAlert title={shortTitle} />\n          <AppAlert title={shortTitle} content={shortContent} />\n\n          <Box />\n\n          <AppAlert severity=\"error\" title={shortTitle} />\n          <AppAlert severity=\"error\" title={shortTitle} content={shortContent} onClose={onClose} />\n\n          <Box />\n\n          <AppAlert severity=\"info\" title={shortTitle} onClose={onClose} />\n          <AppAlert severity=\"info\" title={shortTitle} content={shortContent} onClose={onClose} />\n\n          <Box />\n\n          <AppAlert severity=\"warning\" title={shortTitle} />\n          <AppAlert\n            severity=\"warning\"\n            title={shortTitle}\n            content={shortContent}\n            onClose={onClose}\n          />\n\n          <Box />\n          <AppTypography variant=\"h6\">Cases</AppTypography>\n\n          <Box />\n\n          <AppTypography variant=\"h6\">Title Only</AppTypography>\n\n          <AppAlert title={shortTitle} />\n          <AppAlert title={shortTitle} onClose={onClose} />\n\n          <Box />\n\n          <AppAlert severity=\"warning\" title={longTitle} />\n          <AppAlert severity=\"warning\" title={longTitle} onClose={onClose} />\n\n          <Box />\n\n          <AppTypography variant=\"h6\">Content Only</AppTypography>\n\n          <AppAlert severity=\"info\" content={shortContent} />\n          <AppAlert severity=\"info\" content={shortContent} onClose={onClose} />\n\n          <Box />\n\n          <AppAlert severity=\"warning\" content={longContent} />\n          <AppAlert severity=\"warning\" content={longContent} onClose={onClose} />\n\n          <Box />\n\n          <AppTypography variant=\"h6\">Short Title and Short Content</AppTypography>\n\n          <AppAlert severity=\"info\" title={shortTitle} content={shortContent} />\n          <AppAlert severity=\"info\" title={shortTitle} content={shortContent} onClose={onClose} />\n\n          <Box />\n\n          <AppTypography variant=\"h6\">Long Title and Short Content</AppTypography>\n\n          <AppAlert severity=\"info\" title={longTitle} content={shortContent} />\n          <AppAlert severity=\"info\" title={longTitle} content={shortContent} onClose={onClose} />\n\n          <Box />\n\n          <AppTypography variant=\"h6\">Short Title and Long Content</AppTypography>\n\n          <AppAlert severity=\"info\" title={shortTitle} content={longContent} />\n          <AppAlert severity=\"info\" title={shortTitle} content={longContent} onClose={onClose} />\n\n          <Box />\n\n          <AppTypography variant=\"h6\">Long Title and Long Content</AppTypography>\n\n          <AppAlert severity=\"info\" title={longTitle} content={longContent} />\n          <AppAlert severity=\"info\" title={longTitle} content={longContent} onClose={onClose} />\n\n          <AppTypography variant=\"h6\">With Actions</AppTypography>\n          <AppAlert\n            severity=\"info\"\n            title={shortTitle}\n            actions={<AppAlertButton>Button</AppAlertButton>}\n          />\n          <AppAlert\n            severity=\"info\"\n            content={shortContent}\n            actions={\n              <>\n                <AppAlertButton>View link</AppAlertButton>\n                <AppAlertButton variant=\"outlined\">Edit</AppAlertButton>\n              </>\n            }\n          />\n          <AppAlert\n            severity=\"info\"\n            title={shortTitle}\n            content={shortContent}\n            actions={<AppAlertButton variant=\"outlined\">Button</AppAlertButton>}\n          />\n          <AppAlert\n            severity=\"info\"\n            title={shortTitle}\n            content={longContent}\n            actions={<AppAlertButton>Button</AppAlertButton>}\n          />\n          <AppAlert\n            severity=\"info\"\n            title={longTitle}\n            content={shortContent}\n            actions={<AppAlertButton variant=\"outlined\">Button</AppAlertButton>}\n          />\n          <AppAlert\n            severity=\"info\"\n            title={longTitle}\n            content={longContent}\n            actions={<AppAlertButton>Button</AppAlertButton>}\n          />\n          <Box />\n          <AppTypography variant=\"h6\">With Loading</AppTypography>\n          <AppAlert\n            severity=\"info\"\n            title={longTitle}\n            content={longContent}\n            actions={<AppAlertButton>Button</AppAlertButton>}\n            isLoading\n          />\n        </Stack>\n      </>\n    );\n  },\n};\n\n//\n"],"names":["AppAlert","jsx","Fragment","jsxs","Stack","AppTypography","Box","AppAlertButton"],"mappings":";;;;;;AAUA,MAAM,aAAa;AACnB,MAAM,eACJ;AAEF,MAAM,YACJ;AACF,MAAM,cACJ;AAGF,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWA,SAAAA;AAAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AACnB;AAOO,MAAM,WAAkB;AAAA,EAC7B,QAAQ,MAAM;AACZ,UAAM,UAAU,MAAM;AAAA,IAAC;AAEvB,WACEC,2BAAAA,IAAAC,qBAAA,EACE,UAAAC,2BAAAA,KAACC,SAAAA,OAAA,EAAM,SAAS,GACd,UAAA;AAAA,MAAAH,2BAAAA,IAACI,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,YAAQ;AAAA,MAEpCJ,2BAAAA,IAACD,SAAAA,UAAA,EAAS,OAAO,WAAA,CAAY;AAAA,MAC7BC,2BAAAA,IAACD,SAAAA,UAAA,EAAS,OAAO,YAAY,SAAS,cAAc;AAAA,qCAEnDM,SAAAA,KAAA,EAAI;AAAA,MAELL,2BAAAA,IAACD,SAAAA,UAAA,EAAS,UAAS,SAAQ,OAAO,YAAY;AAAA,MAC9CC,+BAACD,SAAAA,YAAS,UAAS,SAAQ,OAAO,YAAY,SAAS,cAAc,SAAkB;AAAA,qCAEtFM,SAAAA,KAAA,EAAI;AAAA,qCAEJN,SAAAA,UAAA,EAAS,UAAS,QAAO,OAAO,YAAY,SAAkB;AAAA,MAC/DC,+BAACD,SAAAA,YAAS,UAAS,QAAO,OAAO,YAAY,SAAS,cAAc,SAAkB;AAAA,qCAErFM,SAAAA,KAAA,EAAI;AAAA,MAELL,2BAAAA,IAACD,SAAAA,UAAA,EAAS,UAAS,WAAU,OAAO,YAAY;AAAA,MAChDC,2BAAAA;AAAAA,QAACD,SAAAA;AAAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,OAAO;AAAA,UACP,SAAS;AAAA,UACT;AAAA,QAAA;AAAA,MAAA;AAAA,qCAGDM,SAAAA,KAAA,EAAI;AAAA,MACLL,2BAAAA,IAACI,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,SAAK;AAAA,qCAEhCC,SAAAA,KAAA,EAAI;AAAA,MAELL,2BAAAA,IAACI,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,cAAU;AAAA,MAEtCJ,2BAAAA,IAACD,SAAAA,UAAA,EAAS,OAAO,WAAA,CAAY;AAAA,MAC7BC,2BAAAA,IAACD,SAAAA,UAAA,EAAS,OAAO,YAAY,QAAA,CAAkB;AAAA,qCAE9CM,SAAAA,KAAA,EAAI;AAAA,MAELL,2BAAAA,IAACD,SAAAA,UAAA,EAAS,UAAS,WAAU,OAAO,WAAW;AAAA,qCAC9CA,SAAAA,UAAA,EAAS,UAAS,WAAU,OAAO,WAAW,SAAkB;AAAA,qCAEhEM,SAAAA,KAAA,EAAI;AAAA,MAELL,2BAAAA,IAACI,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,gBAAY;AAAA,MAExCJ,2BAAAA,IAACD,SAAAA,UAAA,EAAS,UAAS,QAAO,SAAS,cAAc;AAAA,qCAChDA,SAAAA,UAAA,EAAS,UAAS,QAAO,SAAS,cAAc,SAAkB;AAAA,qCAElEM,SAAAA,KAAA,EAAI;AAAA,MAELL,2BAAAA,IAACD,SAAAA,UAAA,EAAS,UAAS,WAAU,SAAS,aAAa;AAAA,qCAClDA,SAAAA,UAAA,EAAS,UAAS,WAAU,SAAS,aAAa,SAAkB;AAAA,qCAEpEM,SAAAA,KAAA,EAAI;AAAA,MAELL,2BAAAA,IAACI,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,iCAA6B;AAAA,qCAExDL,SAAAA,UAAA,EAAS,UAAS,QAAO,OAAO,YAAY,SAAS,cAAc;AAAA,MACpEC,+BAACD,SAAAA,YAAS,UAAS,QAAO,OAAO,YAAY,SAAS,cAAc,SAAkB;AAAA,qCAErFM,SAAAA,KAAA,EAAI;AAAA,MAELL,2BAAAA,IAACI,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,gCAA4B;AAAA,qCAEvDL,SAAAA,UAAA,EAAS,UAAS,QAAO,OAAO,WAAW,SAAS,cAAc;AAAA,MACnEC,+BAACD,SAAAA,YAAS,UAAS,QAAO,OAAO,WAAW,SAAS,cAAc,SAAkB;AAAA,qCAEpFM,SAAAA,KAAA,EAAI;AAAA,MAELL,2BAAAA,IAACI,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,gCAA4B;AAAA,qCAEvDL,SAAAA,UAAA,EAAS,UAAS,QAAO,OAAO,YAAY,SAAS,aAAa;AAAA,MACnEC,+BAACD,SAAAA,YAAS,UAAS,QAAO,OAAO,YAAY,SAAS,aAAa,SAAkB;AAAA,qCAEpFM,SAAAA,KAAA,EAAI;AAAA,MAELL,2BAAAA,IAACI,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,+BAA2B;AAAA,qCAEtDL,SAAAA,UAAA,EAAS,UAAS,QAAO,OAAO,WAAW,SAAS,aAAa;AAAA,MAClEC,+BAACD,SAAAA,YAAS,UAAS,QAAO,OAAO,WAAW,SAAS,aAAa,SAAkB;AAAA,MAEpFC,2BAAAA,IAACI,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,gBAAY;AAAA,MACxCJ,2BAAAA;AAAAA,QAACD,SAAAA;AAAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,OAAO;AAAA,UACP,SAASC,2BAAAA,IAACM,SAAAA,gBAAA,EAAe,UAAA,SAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAEjCN,2BAAAA;AAAAA,QAACD,SAAAA;AAAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,SAAS;AAAA,UACT,SACEG,2BAAAA,KAAAD,qBAAA,EACE,UAAA;AAAA,YAAAD,2BAAAA,IAACM,SAAAA,kBAAe,UAAA,YAAA,CAAS;AAAA,YACzBN,2BAAAA,IAACM,SAAAA,gBAAA,EAAe,SAAQ,YAAW,UAAA,OAAA,CAAI;AAAA,UAAA,EAAA,CACzC;AAAA,QAAA;AAAA,MAAA;AAAA,MAGJN,2BAAAA;AAAAA,QAACD,SAAAA;AAAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,OAAO;AAAA,UACP,SAAS;AAAA,UACT,SAASC,2BAAAA,IAACM,yBAAA,EAAe,SAAQ,YAAW,UAAA,SAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAEpDN,2BAAAA;AAAAA,QAACD,SAAAA;AAAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,OAAO;AAAA,UACP,SAAS;AAAA,UACT,SAASC,2BAAAA,IAACM,SAAAA,gBAAA,EAAe,UAAA,SAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAEjCN,2BAAAA;AAAAA,QAACD,SAAAA;AAAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,OAAO;AAAA,UACP,SAAS;AAAA,UACT,SAASC,2BAAAA,IAACM,yBAAA,EAAe,SAAQ,YAAW,UAAA,SAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAEpDN,2BAAAA;AAAAA,QAACD,SAAAA;AAAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,OAAO;AAAA,UACP,SAAS;AAAA,UACT,SAASC,2BAAAA,IAACM,SAAAA,gBAAA,EAAe,UAAA,SAAA,CAAM;AAAA,QAAA;AAAA,MAAA;AAAA,qCAEhCD,SAAAA,KAAA,EAAI;AAAA,MACLL,2BAAAA,IAACI,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,gBAAY;AAAA,MACxCJ,2BAAAA;AAAAA,QAACD,SAAAA;AAAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,OAAO;AAAA,UACP,SAAS;AAAA,UACT,SAASC,2BAAAA,IAACM,SAAAA,gBAAA,EAAe,UAAA,SAAA,CAAM;AAAA,UAC/B,WAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACX,EAAA,CACF,EAAA,CACF;AAAA,EAEJ;AACF;;;"}

package/dist/cjs/stories/{AppButton.stories.js → react/AppButton.stories.js}

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const appButton = require("../components/app-button.js");
+const appButton = require("../../components/app-button.js");
 const meta = {
-  title: "App Button",
+  title: "React/App Button",
   component: appButton.AppButton,
   parameters: {
     layout: "centered"

package/dist/cjs/stories/react/AppButton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppButton.stories.js","sources":["../../../../src/stories/react/AppButton.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { AppButton } from '~/components/app-button';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Button',\n  component: AppButton,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: 'select',\n      options: ['large', 'medium', 'small'],\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    tooltip: {\n      control: 'text',\n    },\n    tooltipProps: {\n      control: 'object',\n    },\n  },\n  args: {\n    size: 'large',\n    children: 'Text',\n    disabled: false,\n    tooltip: 'Tooltip sample',\n    tooltipProps: {\n      placement: 'top',\n    },\n  },\n} satisfies Meta<typeof AppButton>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Primary: Story = {\n  argTypes: {\n    color: {\n      control: 'select',\n      options: ['primary'],\n    },\n    variant: {\n      control: 'select',\n      options: ['contained'],\n    },\n  },\n  args: {\n    color: 'primary',\n    variant: 'contained',\n  },\n};\n\n//\n\nexport const Secondary: Story = {\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['text', 'outlined'],\n    },\n  },\n  args: {\n    color: 'secondary',\n    variant: 'outlined',\n  },\n};\n\n//\n\nexport const Tertiary: Story = {\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['contained', 'outlined'],\n    },\n  },\n  args: {\n    color: 'tertiary',\n    variant: 'contained',\n  },\n};\n\n//\n\nexport const Error: Story = {\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['text', 'outlined', 'contained'],\n    },\n  },\n  args: {\n    color: 'error',\n    variant: 'contained',\n  },\n};\n"],"names":["AppButton"],"mappings":";;;AAQA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWA,UAAAA;AAAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AAAA,EACjB,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,SAAS,UAAU,OAAO;AAAA,IAAA;AAAA,IAEtC,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,IAEX,SAAS;AAAA,MACP,SAAS;AAAA,IAAA;AAAA,IAEX,cAAc;AAAA,MACZ,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS;AAAA,IACT,cAAc;AAAA,MACZ,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ;AAOO,MAAM,UAAiB;AAAA,EAC5B,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,MACT,SAAS,CAAC,SAAS;AAAA,IAAA;AAAA,IAErB,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS,CAAC,WAAW;AAAA,IAAA;AAAA,EACvB;AAAA,EAEF,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAEb;AAIO,MAAM,YAAmB;AAAA,EAC9B,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,UAAU;AAAA,IAAA;AAAA,EAC9B;AAAA,EAEF,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAEb;AAIO,MAAM,WAAkB;AAAA,EAC7B,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS,CAAC,aAAa,UAAU;AAAA,IAAA;AAAA,EACnC;AAAA,EAEF,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAEb;AAIO,MAAM,QAAe;AAAA,EAC1B,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,YAAY,WAAW;AAAA,IAAA;AAAA,EAC3C;AAAA,EAEF,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,EAAA;AAEb;;;;;;"}

package/dist/cjs/stories/{AppIconWithTooltip.stories.js → react/AppIconWithTooltip.stories.js}

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const appIconWithTooltip = require("../components/app-icon-with-tooltip.js");
+const appIconWithTooltip = require("../../components/app-icon-with-tooltip.js");
 const meta = {
-  title: "App Icon With Tooltip",
+  title: "React/App Icon With Tooltip",
   component: appIconWithTooltip.AppIconWithTooltip,
   parameters: {
     layout: "centered"

package/dist/cjs/stories/react/AppIconWithTooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppIconWithTooltip.stories.js","sources":["../../../../src/stories/react/AppIconWithTooltip.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { AppIconWithTooltip } from '~/components/app-icon-with-tooltip';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Icon With Tooltip',\n  component: AppIconWithTooltip,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    tooltip: {\n      control: 'text',\n    },\n    accessibleAreaWidth: {\n      control: 'text',\n    },\n    accessibleAreaHeight: {\n      control: 'text',\n    },\n    iconProps: {\n      control: 'object',\n    },\n  },\n} satisfies Meta<typeof AppIconWithTooltip>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Variants: Story = {\n  args: {\n    tooltip: 'Tooltip sample',\n    accessibleAreaWidth: '36px',\n    accessibleAreaHeight: '36px',\n    tooltipProps: { enterDelay: 250 },\n  },\n};\n"],"names":["AppIconWithTooltip"],"mappings":";;;AAQA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWA,mBAAAA;AAAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AAAA,EACjB,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,IAAA;AAAA,IAEX,qBAAqB;AAAA,MACnB,SAAS;AAAA,IAAA;AAAA,IAEX,sBAAsB;AAAA,MACpB,SAAS;AAAA,IAAA;AAAA,IAEX,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAOO,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB,cAAc,EAAE,YAAY,IAAA;AAAA,EAAI;AAEpC;;;"}

package/dist/cjs/stories/{AppInputBase.stories.js → react/AppInputBase.stories.js}

@@ -2,11 +2,11 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("react/jsx-runtime");
 const material = require("@mui/material");
-const appInputBase = require("../components/app-input-base.js");
-const appTypography = require("../components/app-typography.js");
-const stackColumn = require("../components/stack-column.js");
+const appInputBase = require("../../components/app-input-base.js");
+const appTypography = require("../../components/app-typography.js");
+const stackColumn = require("../../components/stack-column.js");
 const meta = {
-  title: "App Input Base",
+  title: "React/App Input Base",
   component: appInputBase.AppInputBase,
   parameters: {
     layout: "centered"
@@ -63,7 +63,15 @@ const Variants = {
     /* @__PURE__ */ jsxRuntime.jsx(appInputBase.AppInputBase, { label: "User name", placeholder: "Enter your username", size: "small" }),
     /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
     /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h6", children: "States" }),
-    /* @__PURE__ */ jsxRuntime.jsx(appInputBase.AppInputBase, { label: "Error", placeholder: "Invalid input", error: true, helperText: "This field is required" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      appInputBase.AppInputBase,
+      {
+        label: "Error",
+        placeholder: "Invalid input",
+        error: true,
+        helperText: "This field is required"
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(appInputBase.AppInputBase, { label: "Disabled", placeholder: "Cannot edit", disabled: true }),
     /* @__PURE__ */ jsxRuntime.jsx(material.Divider, {}),
     /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "h6", children: "Adornments" }),

package/dist/cjs/stories/react/AppInputBase.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppInputBase.stories.js","sources":["../../../../src/stories/react/AppInputBase.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Divider } from '@mui/material';\n\nimport { AppInputBase } from '~/components/app-input-base';\nimport { AppTypography } from '~/components/app-typography';\nimport { StackColumn } from '~/components/stack-column';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Input Base',\n  component: AppInputBase,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: 'select',\n      options: ['medium', 'small'],\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    error: {\n      control: 'boolean',\n    },\n    multiline: {\n      control: 'boolean',\n    },\n    label: {\n      control: 'text',\n    },\n    placeholder: {\n      control: 'text',\n    },\n    helperText: {\n      control: 'text',\n    },\n    startAdornmentText: {\n      control: 'text',\n    },\n    endAdornmentText: {\n      control: 'text',\n    },\n  },\n  args: {\n    size: 'medium',\n    label: 'Label',\n    placeholder: 'Placeholder text',\n    disabled: false,\n    error: false,\n    multiline: false,\n  },\n} satisfies Meta<typeof AppInputBase>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Playground: Story = {\n  args: {},\n};\n\n//\n\nexport const Variants: Story = {\n  render: () => (\n    <StackColumn sx={{ background: 'white' }} padding={10} gap={4}>\n      <AppTypography variant=\"h6\">Basic</AppTypography>\n\n      <AppInputBase />\n      <AppInputBase label=\"User name\" />\n      <AppInputBase label=\"User name\" placeholder=\"Enter your username\" />\n      <AppInputBase label=\"User name\" placeholder=\"Enter your username\" size=\"small\" />\n\n      <Divider />\n\n      <AppTypography variant=\"h6\">States</AppTypography>\n\n      <AppInputBase\n        label=\"Error\"\n        placeholder=\"Invalid input\"\n        error\n        helperText=\"This field is required\"\n      />\n      <AppInputBase label=\"Disabled\" placeholder=\"Cannot edit\" disabled />\n\n      <Divider />\n\n      <AppTypography variant=\"h6\">Adornments</AppTypography>\n\n      <AppInputBase label=\"Price\" placeholder=\"0.00\" startAdornmentText=\"$\" />\n      <AppInputBase label=\"Price\" placeholder=\"0.00\" endAdornmentText=\"$\" />\n      <AppInputBase label=\"Weight\" placeholder=\"0\" endAdornmentText=\"Kg\" />\n      <AppInputBase\n        label=\"Price\"\n        placeholder=\"0.00\"\n        endAdornmentText=\"SAR\"\n        endAdornmentTextProps={{ typographyProps: { color: 'primary' } }}\n      />\n\n      <Divider />\n\n      <AppTypography variant=\"h6\">Multiline</AppTypography>\n\n      <AppInputBase\n        label=\"Description\"\n        placeholder=\"Enter a detailed description...\"\n        endAdornmentText=\"Kg\"\n        multiline\n      />\n\n      <Divider />\n\n      <AppTypography variant=\"h6\">RTL</AppTypography>\n\n      <AppInputBase dir=\"rtl\" label=\"اسم المستخدم\" />\n      <AppInputBase dir=\"rtl\" label=\"اسم المستخدم\" placeholder=\"اسم المستخدم\" />\n      <AppInputBase dir=\"rtl\" label=\"اسم المستخدم\" placeholder=\"اسم المستخدم\" size=\"small\" error />\n      <AppInputBase\n        dir=\"rtl\"\n        label=\"اسم المستخدم\"\n        placeholder=\"اسم المستخدم\"\n        startAdornmentText=\"$\"\n      />\n      <AppInputBase\n        dir=\"rtl\"\n        label=\"اسم المستخدم\"\n        placeholder=\"اسم المستخدم\"\n        endAdornmentText=\"Kg\"\n      />\n      <AppInputBase\n        dir=\"rtl\"\n        label=\"الوصف\"\n        placeholder=\"هذا النص طويل جداً جداً جداً جداً للاختبار\"\n        endAdornmentText=\"Kg\"\n        multiline\n      />\n    </StackColumn>\n  ),\n};\n"],"names":["AppInputBase","jsxs","StackColumn","jsx","AppTypography","Divider"],"mappings":"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"}

package/dist/cjs/stories/{AppInputBaseSearch.stories.js → react/AppInputBaseSearch.stories.js}

@@ -2,11 +2,11 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("react/jsx-runtime");
 const material = require("@mui/material");
-const appInputBaseSearch = require("../components/app-input-base-search.js");
-const appTypography = require("../components/app-typography.js");
-const stackColumn = require("../components/stack-column.js");
+const appInputBaseSearch = require("../../components/app-input-base-search.js");
+const appTypography = require("../../components/app-typography.js");
+const stackColumn = require("../../components/stack-column.js");
 const meta = {
-  title: "App Input Base Search",
+  title: "React/App Input Base Search",
   component: appInputBaseSearch.AppInputBaseSearch,
   parameters: {
     layout: "centered"

package/dist/cjs/stories/react/AppInputBaseSearch.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppInputBaseSearch.stories.js","sources":["../../../../src/stories/react/AppInputBaseSearch.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Divider } from '@mui/material';\n\nimport { AppInputBaseSearch } from '~/components/app-input-base-search';\nimport { AppTypography } from '~/components/app-typography';\nimport { StackColumn } from '~/components/stack-column';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Input Base Search',\n  component: AppInputBaseSearch,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    size: {\n      control: 'select',\n      options: ['medium', 'small'],\n    },\n    disabled: {\n      control: 'boolean',\n    },\n    error: {\n      control: 'boolean',\n    },\n    label: {\n      control: 'text',\n    },\n    placeholder: {\n      control: 'text',\n    },\n  },\n  args: {\n    name: 'search',\n    label: 'Search',\n    placeholder: 'Search for...',\n    disabled: false,\n    error: false,\n  },\n} satisfies Meta<typeof AppInputBaseSearch>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Playground: Story = {\n  args: {},\n};\n\n//\n\nexport const Variants: Story = {\n  render: () => (\n    <StackColumn sx={{ background: 'white' }} padding={10} gap={4}>\n      <AppTypography variant=\"h6\">Basic</AppTypography>\n\n      <AppInputBaseSearch name=\"search\" />\n      <AppInputBaseSearch name=\"search\" label=\"Search\" />\n      <AppInputBaseSearch name=\"search\" label=\"Search\" placeholder=\"Search for...\" />\n\n      <Divider />\n\n      <AppTypography variant=\"h6\">Sizes</AppTypography>\n\n      <AppInputBaseSearch name=\"search\" label=\"Medium\" placeholder=\"Search for...\" />\n      <AppInputBaseSearch name=\"search\" label=\"Small\" placeholder=\"Search for...\" size=\"small\" />\n\n      <Divider />\n\n      <AppTypography variant=\"h6\">States</AppTypography>\n\n      <AppInputBaseSearch name=\"search\" label=\"Error\" placeholder=\"Search for...\" error />\n      <AppInputBaseSearch name=\"search\" label=\"Disabled\" placeholder=\"Search for...\" disabled />\n\n      <Divider />\n\n      <AppTypography variant=\"h6\">RTL</AppTypography>\n\n      <AppInputBaseSearch name=\"search\" dir=\"rtl\" />\n      <AppInputBaseSearch name=\"search\" dir=\"rtl\" label=\"بحث\" />\n      <AppInputBaseSearch name=\"search\" dir=\"rtl\" label=\"بحث\" placeholder=\"ابحث عن...\" />\n      <AppInputBaseSearch\n        name=\"search\"\n        dir=\"rtl\"\n        label=\"بحث\"\n        placeholder=\"ابحث عن...\"\n        size=\"small\"\n        error\n      />\n    </StackColumn>\n  ),\n};\n"],"names":["AppInputBaseSearch","jsxs","StackColumn","jsx","AppTypography","Divider"],"mappings":";;;;;;;AAYA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWA,mBAAAA;AAAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AAAA,EACjB,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,UAAU,OAAO;AAAA,IAAA;AAAA,IAE7B,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,IAEX,aAAa;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAEF,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,IACV,OAAO;AAAA,EAAA;AAEX;AAOO,MAAM,aAAoB;AAAA,EAC/B,MAAM,CAAA;AACR;AAIO,MAAM,WAAkB;AAAA,EAC7B,QAAQ,MACNC,2BAAAA,KAACC,yBAAA,EAAY,IAAI,EAAE,YAAY,QAAA,GAAW,SAAS,IAAI,KAAK,GAC1D,UAAA;AAAA,IAAAC,2BAAAA,IAACC,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,SAAK;AAAA,IAEjCD,2BAAAA,IAACH,mBAAAA,oBAAA,EAAmB,MAAK,SAAA,CAAS;AAAA,IAClCG,2BAAAA,IAACH,mBAAAA,oBAAA,EAAmB,MAAK,UAAS,OAAM,UAAS;AAAA,mCAChDA,mBAAAA,oBAAA,EAAmB,MAAK,UAAS,OAAM,UAAS,aAAY,iBAAgB;AAAA,mCAE5EK,SAAAA,SAAA,EAAQ;AAAA,IAETF,2BAAAA,IAACC,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,SAAK;AAAA,mCAEhCJ,mBAAAA,oBAAA,EAAmB,MAAK,UAAS,OAAM,UAAS,aAAY,iBAAgB;AAAA,IAC7EG,2BAAAA,IAACH,mBAAAA,sBAAmB,MAAK,UAAS,OAAM,SAAQ,aAAY,iBAAgB,MAAK,QAAA,CAAQ;AAAA,mCAExFK,SAAAA,SAAA,EAAQ;AAAA,IAETF,2BAAAA,IAACC,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,UAAM;AAAA,IAElCD,2BAAAA,IAACH,mBAAAA,sBAAmB,MAAK,UAAS,OAAM,SAAQ,aAAY,iBAAgB,OAAK,KAAA,CAAC;AAAA,IAClFG,2BAAAA,IAACH,mBAAAA,sBAAmB,MAAK,UAAS,OAAM,YAAW,aAAY,iBAAgB,UAAQ,KAAA,CAAC;AAAA,mCAEvFK,SAAAA,SAAA,EAAQ;AAAA,IAETF,2BAAAA,IAACC,cAAAA,eAAA,EAAc,SAAQ,MAAK,UAAA,OAAG;AAAA,IAE/BD,2BAAAA,IAACH,mBAAAA,oBAAA,EAAmB,MAAK,UAAS,KAAI,OAAM;AAAA,mCAC3CA,mBAAAA,oBAAA,EAAmB,MAAK,UAAS,KAAI,OAAM,OAAM,OAAM;AAAA,IACxDG,2BAAAA,IAACH,mBAAAA,sBAAmB,MAAK,UAAS,KAAI,OAAM,OAAM,OAAM,aAAY,aAAA,CAAa;AAAA,IACjFG,2BAAAA;AAAAA,MAACH,mBAAAA;AAAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,KAAI;AAAA,QACJ,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,MAAK;AAAA,QACL,OAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACP,EAAA,CACF;AAEJ;;;;"}

package/dist/cjs/stories/{AppListItem.stories.js → react/AppListItem.stories.js}

@@ -2,13 +2,13 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("react/jsx-runtime");
 const material = require("@mui/material");
-const appListItem = require("../components/app-list-item.js");
-const appStatus = require("../components/app-status.js");
-const appTypography = require("../components/app-typography.js");
-const stackColumn = require("../components/stack-column.js");
-const bankLine = require("../icons/buildings/bank-line.js");
+const appListItem = require("../../components/app-list-item.js");
+const appStatus = require("../../components/app-status.js");
+const appTypography = require("../../components/app-typography.js");
+const stackColumn = require("../../components/stack-column.js");
+const bankLine = require("../../icons/buildings/bank-line.js");
 const meta = {
-  title: "App List Item",
+  title: "React/App List Item",
   component: appListItem.AppListItem,
   parameters: {
     layout: "centered"

package/dist/cjs/stories/react/AppListItem.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppListItem.stories.js","sources":["../../../../src/stories/react/AppListItem.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Box, Divider, styled } from '@mui/material';\n\nimport { AppListItem } from '~/components/app-list-item';\nimport { AppStatus } from '~/components/app-status';\nimport { AppTypography } from '~/components/app-typography';\nimport { StackColumn } from '~/components/stack-column';\nimport { IconBankLine } from '~/icons/buildings/bank-line';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App List Item',\n  component: AppListItem,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    textLabel: {\n      control: 'text',\n    },\n    textDescription: {\n      control: 'text',\n    },\n    textContent: {\n      control: 'text',\n    },\n    tooltip: {\n      control: 'text',\n    },\n  },\n  args: {\n    textLabel: 'List item label',\n    textDescription: 'Description text',\n  },\n} satisfies Meta<typeof AppListItem>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Playground: Story = {\n  args: {},\n};\n\n//\n\nexport const Variants: Story = {\n  render: () => (\n    <StackColumn gap={2}>\n      <AppTypography variant=\"h6\" sx={{ px: 1 }}>\n        Label Only\n      </AppTypography>\n\n      <Container>\n        <AppListItem textLabel=\"Sample Label\" />\n      </Container>\n\n      <Divider />\n\n      <AppTypography variant=\"h6\" sx={{ px: 1 }}>\n        Label and Description\n      </AppTypography>\n\n      <Container>\n        <AppListItem textLabel=\"Another Item\" textDescription=\"This is a description\" />\n      </Container>\n\n      <Divider />\n\n      <AppTypography variant=\"h6\" sx={{ px: 1 }}>\n        With Icon\n      </AppTypography>\n\n      <Container>\n        <AppListItem\n          textLabel=\"List Item with Icon\"\n          textDescription=\"This is a description\"\n          icon={<IconBankLine />}\n        />\n      </Container>\n\n      <Divider />\n\n      <AppTypography variant=\"h6\" sx={{ px: 1 }}>\n        With Label Suffix\n      </AppTypography>\n\n      <Container>\n        <AppListItem\n          textLabel=\"List Item with Label Suffix\"\n          textDescription=\"This is a description\"\n          labelSuffix={<AppStatus color=\"success\" label=\"Active\" size=\"small\" />}\n        />\n      </Container>\n\n      <Divider />\n\n      <AppTypography variant=\"h6\" sx={{ px: 1 }}>\n        With Text Content\n      </AppTypography>\n\n      <Container>\n        <AppListItem\n          textLabel=\"List Item with Text Content\"\n          textDescription=\"This is a description\"\n          textContent=\"Some text content here to demonstrate the textContent prop\"\n        />\n      </Container>\n\n      <Divider />\n\n      <AppTypography variant=\"h6\" sx={{ px: 1 }}>\n        With Tooltip\n      </AppTypography>\n\n      <Container>\n        <AppListItem\n          textLabel=\"List Item with Tooltip\"\n          textDescription=\"Hover the icon to see the tooltip\"\n          tooltip=\"This is a helpful tooltip\"\n        />\n      </Container>\n\n      <Divider />\n\n      <AppTypography variant=\"h6\" sx={{ px: 1 }}>\n        Full Example\n      </AppTypography>\n\n      <Container>\n        <AppListItem\n          textLabel=\"Complete List Item\"\n          textDescription=\"This item uses all available props\"\n          textContent=\"Additional content text\"\n          icon={<IconBankLine />}\n          labelSuffix={<AppStatus color=\"info\" label=\"New\" size=\"small\" />}\n          tooltip=\"Tooltip with extra info\"\n        />\n      </Container>\n\n      <Divider />\n\n      <AppTypography variant=\"h6\" sx={{ px: 1 }}>\n        With Children\n      </AppTypography>\n\n      <Container>\n        <AppListItem\n          textLabel=\"List Item with Children\"\n          textDescription=\"This is a description\"\n          textContent=\"Some text content\"\n        >\n          Additional content\n        </AppListItem>\n      </Container>\n    </StackColumn>\n  ),\n};\n\nconst Container = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(0),\n  border: `1px solid ${theme.palette.divider}`,\n  borderRadius: theme.shape.borderRadius,\n  backgroundColor: theme.palette.colors.base.white,\n  minWidth: 200,\n  maxWidth: 400,\n}));\n"],"names":["AppListItem","jsxs","StackColumn","jsx","AppTypography","Divider","IconBankLine","AppStatus","styled","Box"],"mappings":"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"}

package/dist/cjs/stories/{AppOverflownTextWithTooltip.stories.js → react/AppOverflownTextWithTooltip.stories.js}

@@ -2,10 +2,10 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("react/jsx-runtime");
 const material = require("@mui/material");
-const appOverflownTextWithTooltip = require("../components/app-overflown-text-with-tooltip.js");
-const stackColumn = require("../components/stack-column.js");
+const appOverflownTextWithTooltip = require("../../components/app-overflown-text-with-tooltip.js");
+const stackColumn = require("../../components/stack-column.js");
 const meta = {
-  title: "App Overflown Text With Tooltip",
+  title: "React/App Overflown Text With Tooltip",
   component: appOverflownTextWithTooltip.AppOverflownTextWithTooltip,
   parameters: {
     layout: "centered"

package/dist/cjs/stories/react/AppOverflownTextWithTooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppOverflownTextWithTooltip.stories.js","sources":["../../../../src/stories/react/AppOverflownTextWithTooltip.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Box, Divider, styled } from '@mui/material';\n\nimport { AppOverflownTextWithTooltip } from '~/components/app-overflown-text-with-tooltip';\nimport { StackColumn } from '~/components/stack-column';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Overflown Text With Tooltip',\n  component: AppOverflownTextWithTooltip,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {},\n} satisfies Meta<typeof AppOverflownTextWithTooltip>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Variants: Story = {\n  args: {\n    title: 'Sample Label',\n  },\n  render: () => (\n    <StackColumn gap={2}>\n      <Container>\n        <AppOverflownTextWithTooltip title=\"This is a very long title that will be truncated\" />\n      </Container>\n\n      <Divider />\n\n      <Container>\n        <AppOverflownTextWithTooltip\n          title=\"This is a very very long title that will be truncated and should show tooltip when hovered to see the full text with the rest of the content\"\n          twoLines\n        />\n      </Container>\n    </StackColumn>\n  ),\n};\n\nconst Container = styled(Box)(({ theme }) => ({\n  padding: theme.spacing(1),\n  border: `1px solid ${theme.palette.divider}`,\n  borderRadius: theme.shape.borderRadius,\n  backgroundColor: theme.palette.colors.base.white,\n  maxWidth: 200,\n}));\n"],"names":["AppOverflownTextWithTooltip","jsxs","StackColumn","jsx","Divider","styled","Box"],"mappings":";;;;;;AAWA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWA,4BAAAA;AAAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AAAA,EACjB,UAAU,CAAA;AACZ;AAOO,MAAM,WAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,OAAO;AAAA,EAAA;AAAA,EAET,QAAQ,MACNC,2BAAAA,KAACC,YAAAA,aAAA,EAAY,KAAK,GAChB,UAAA;AAAA,IAAAC,+BAAC,WAAA,EACC,UAAAA,2BAAAA,IAACH,4BAAAA,6BAAA,EAA4B,OAAM,oDAAmD,GACxF;AAAA,mCAECI,SAAAA,SAAA,EAAQ;AAAA,mCAER,WAAA,EACC,UAAAD,2BAAAA;AAAAA,MAACH,4BAAAA;AAAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,UAAQ;AAAA,MAAA;AAAA,IAAA,EACV,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;AAEA,MAAM,YAAYK,SAAAA,OAAOC,SAAAA,GAAG,EAAE,CAAC,EAAE,aAAa;AAAA,EAC5C,SAAS,MAAM,QAAQ,CAAC;AAAA,EACxB,QAAQ,aAAa,MAAM,QAAQ,OAAO;AAAA,EAC1C,cAAc,MAAM,MAAM;AAAA,EAC1B,iBAAiB,MAAM,QAAQ,OAAO,KAAK;AAAA,EAC3C,UAAU;AACZ,EAAE;;;"}

package/dist/cjs/stories/{AppStatus.stories.js → react/AppStatus.stories.js}

@@ -2,9 +2,9 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("react/jsx-runtime");
 const material = require("@mui/material");
-const appStatus = require("../components/app-status.js");
+const appStatus = require("../../components/app-status.js");
 const meta = {
-  title: "App Status",
+  title: "React/App Status",
   component: appStatus.AppStatus,
   parameters: {
     layout: "centered"

package/dist/cjs/stories/react/AppStatus.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppStatus.stories.js","sources":["../../../../src/stories/react/AppStatus.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Divider, Stack } from '@mui/material';\n\nimport { AppStatus } from '~/components/app-status';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Status',\n  component: AppStatus,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    color: {\n      control: 'select',\n    },\n  },\n} satisfies Meta<typeof AppStatus>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Playground: Story = {\n  args: {\n    color: 'success',\n    label: 'Text',\n    size: 'small',\n    tooltip: 'Tooltip sample',\n    tooltipProps: {\n      placement: 'top',\n    },\n  },\n};\n\nexport const Variants: Story = {\n  render: () => (\n    <Stack spacing={0} gap={4}>\n      <Stack direction=\"row\" spacing={0} gap={2} flexWrap=\"wrap\" justifyContent=\"center\">\n        <AppStatus label=\"Success\" color=\"success\" />\n        <AppStatus label=\"Warning\" color=\"warning\" />\n        <AppStatus label=\"Error\" color=\"error\" />\n        <AppStatus label=\"Neutral\" color=\"neutral\" />\n        <AppStatus label=\"Disabled\" color=\"disabled\" />\n        <AppStatus label=\"Info\" color=\"info\" />\n        <AppStatus label=\"Orange\" color=\"orange\" />\n        <AppStatus label=\"Blue\" color=\"blue\" />\n        <AppStatus label=\"With Tooltip\" color=\"neutral\" tooltip=\"Tooltip sample\" />\n      </Stack>\n\n      <Divider />\n\n      <Stack direction=\"row\" spacing={0} gap={2} flexWrap=\"wrap\" justifyContent=\"center\">\n        <AppStatus label=\"Success\" color=\"success\" size=\"medium\" />\n        <AppStatus label=\"Warning\" color=\"warning\" size=\"medium\" />\n        <AppStatus label=\"Error\" color=\"error\" size=\"medium\" />\n        <AppStatus label=\"Neutral\" color=\"neutral\" size=\"medium\" />\n        <AppStatus label=\"Disabled\" color=\"disabled\" size=\"medium\" />\n        <AppStatus label=\"Info\" color=\"info\" size=\"medium\" />\n        <AppStatus label=\"Orange\" color=\"orange\" size=\"medium\" />\n        <AppStatus label=\"Blue\" color=\"blue\" size=\"medium\" />\n        <AppStatus\n          label=\"With Tooltip size medium\"\n          color=\"neutral\"\n          size=\"medium\"\n          tooltip=\"Tooltip sample\"\n        />\n      </Stack>\n    </Stack>\n  ),\n};\n"],"names":["AppStatus","jsxs","Stack","jsx","Divider"],"mappings":";;;;;AAUA,MAAM,OAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWA,UAAAA;AAAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM,CAAC,UAAU;AAAA,EACjB,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAOO,MAAM,aAAoB;AAAA,EAC/B,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA,IACN,SAAS;AAAA,IACT,cAAc;AAAA,MACZ,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ;AAEO,MAAM,WAAkB;AAAA,EAC7B,QAAQ,MACNC,2BAAAA,KAACC,kBAAM,SAAS,GAAG,KAAK,GACtB,UAAA;AAAA,IAAAD,2BAAAA,KAACC,SAAAA,OAAA,EAAM,WAAU,OAAM,SAAS,GAAG,KAAK,GAAG,UAAS,QAAO,gBAAe,UACxE,UAAA;AAAA,MAAAC,2BAAAA,IAACH,UAAAA,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU;AAAA,MAC3CG,2BAAAA,IAACH,UAAAA,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU;AAAA,MAC3CG,2BAAAA,IAACH,UAAAA,WAAA,EAAU,OAAM,SAAQ,OAAM,SAAQ;AAAA,MACvCG,2BAAAA,IAACH,UAAAA,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU;AAAA,MAC3CG,2BAAAA,IAACH,UAAAA,WAAA,EAAU,OAAM,YAAW,OAAM,YAAW;AAAA,MAC7CG,2BAAAA,IAACH,UAAAA,WAAA,EAAU,OAAM,QAAO,OAAM,QAAO;AAAA,MACrCG,2BAAAA,IAACH,UAAAA,WAAA,EAAU,OAAM,UAAS,OAAM,UAAS;AAAA,MACzCG,2BAAAA,IAACH,UAAAA,WAAA,EAAU,OAAM,QAAO,OAAM,QAAO;AAAA,qCACpCA,UAAAA,WAAA,EAAU,OAAM,gBAAe,OAAM,WAAU,SAAQ,iBAAA,CAAiB;AAAA,IAAA,GAC3E;AAAA,mCAECI,SAAAA,SAAA,EAAQ;AAAA,IAETH,2BAAAA,KAACC,SAAAA,OAAA,EAAM,WAAU,OAAM,SAAS,GAAG,KAAK,GAAG,UAAS,QAAO,gBAAe,UACxE,UAAA;AAAA,MAAAC,+BAACH,UAAAA,aAAU,OAAM,WAAU,OAAM,WAAU,MAAK,UAAS;AAAA,qCACxDA,UAAAA,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU,MAAK,UAAS;AAAA,qCACxDA,UAAAA,WAAA,EAAU,OAAM,SAAQ,OAAM,SAAQ,MAAK,UAAS;AAAA,qCACpDA,UAAAA,WAAA,EAAU,OAAM,WAAU,OAAM,WAAU,MAAK,UAAS;AAAA,qCACxDA,UAAAA,WAAA,EAAU,OAAM,YAAW,OAAM,YAAW,MAAK,UAAS;AAAA,qCAC1DA,UAAAA,WAAA,EAAU,OAAM,QAAO,OAAM,QAAO,MAAK,UAAS;AAAA,qCAClDA,UAAAA,WAAA,EAAU,OAAM,UAAS,OAAM,UAAS,MAAK,UAAS;AAAA,qCACtDA,UAAAA,WAAA,EAAU,OAAM,QAAO,OAAM,QAAO,MAAK,UAAS;AAAA,MACnDG,2BAAAA;AAAAA,QAACH,UAAAA;AAAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,MAAK;AAAA,UACL,SAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IACV,EAAA,CACF;AAAA,EAAA,EAAA,CACF;AAEJ;;;;"}

package/dist/cjs/stories/{AppTooltip.stories.js → react/AppTooltip.stories.js}

@@ -2,14 +2,14 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("react/jsx-runtime");
 const material = require("@mui/material");
-const appButton = require("../components/app-button.js");
-const appTooltip = require("../components/app-tooltip.js");
-const appTypography = require("../components/app-typography.js");
-const stackColumn = require("../components/stack-column.js");
-const stackRow = require("../components/stack-row.js");
-const useToggle = require("../hooks/use-toggle.js");
+const appButton = require("../../components/app-button.js");
+const appTooltip = require("../../components/app-tooltip.js");
+const appTypography = require("../../components/app-typography.js");
+const stackColumn = require("../../components/stack-column.js");
+const stackRow = require("../../components/stack-row.js");
+const useToggle = require("../../hooks/use-toggle.js");
 const meta = {
-  title: "App Tooltip",
+  title: "React/App Tooltip",
   component: appTooltip.AppTooltip,
   parameters: {
     layout: "centered"

package/dist/cjs/stories/react/AppTooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppTooltip.stories.js","sources":["../../../../src/stories/react/AppTooltip.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Box, ClickAwayListener, styled, useTheme } from '@mui/material';\n\nimport { AppButton } from '~/components/app-button';\nimport { AppTooltip, AppTooltipProps } from '~/components/app-tooltip';\nimport { AppTypography } from '~/components/app-typography';\nimport { StackColumn } from '~/components/stack-column';\nimport { StackRow } from '~/components/stack-row';\nimport { useToggle } from '~/hooks/use-toggle';\n\n//\n//\n\n// Meta\nconst meta = {\n  title: 'React/App Tooltip',\n  component: AppTooltip,\n  parameters: {\n    layout: 'centered',\n  },\n  tags: ['autodocs'],\n  argTypes: {\n    arrow: {\n      control: 'boolean',\n    },\n    placement: {\n      control: 'select',\n      options: [\n        'auto',\n        'auto-start',\n        'auto-end',\n        'top',\n        'bottom',\n        'left',\n        'right',\n        'top-start',\n        'top-end',\n        'bottom-start',\n        'bottom-end',\n        'right-start',\n        'right-end',\n        'left-start',\n        'left-end',\n      ],\n    },\n    children: {\n      control: 'text',\n    },\n  },\n} satisfies Meta<typeof AppTooltip>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n//\n\nexport const Variants: Story = {\n  args: {\n    headline: 'Total sales over time',\n    description: 'Amount spent (subtotal, taxes, shipping, returns, discounts, fees, etc.)',\n    children: <></>,\n    placement: 'top',\n  },\n  render: args => <AppTooltips {...args} />,\n};\n\n//\n\nconst AppTooltips = (props: AppTooltipProps) => {\n  const toggle = useToggle();\n  const theme = useTheme();\n\n  return (\n    <StackRow gap={4}>\n      <StackColumn gap={4}>\n        <AppTooltip {...props} description=\"\">\n          <AppButton variant=\"outlined\">Default</AppButton>\n        </AppTooltip>\n\n        <AppTooltip disableFocusListener {...props} headline=\"\">\n          <AppButton variant=\"outlined\">Hover or touch</AppButton>\n        </AppTooltip>\n\n        <AppTooltip disableHoverListener {...props}>\n          <AppButton variant=\"outlined\">Focus or touch</AppButton>\n        </AppTooltip>\n\n        <AppTooltip disableFocusListener disableTouchListener {...props}>\n          <AppButton variant=\"outlined\">Hover</AppButton>\n        </AppTooltip>\n\n        <ClickAwayListener onClickAway={toggle.off}>\n          <AppTooltip\n            onClose={toggle.off}\n            open={toggle.value}\n            disableFocusListener\n            disableHoverListener\n            disableTouchListener\n            slotProps={{\n              popper: {\n                disablePortal: true,\n              },\n            }}\n            {...props}\n          >\n            <AppButton variant=\"outlined\" onClick={toggle.on}>\n              Click\n            </AppButton>\n          </AppTooltip>\n        </ClickAwayListener>\n      </StackColumn>\n\n      {/*  */}\n\n      <StackColumn gap={4}>\n        <AppTooltip {...props} headline=\"This is headline only\" description=\"\">\n          <AppButton variant=\"outlined\">Headline only</AppButton>\n        </AppTooltip>\n\n        <AppTooltip {...props} headline=\"\" description=\"This is description only\">\n          <AppButton variant=\"outlined\">Description only</AppButton>\n        </AppTooltip>\n\n        <AppTooltip\n          {...props}\n          headline=\"This is headline and description\"\n          description=\"This is description\"\n        >\n          <AppButton variant=\"outlined\">Headline and description</AppButton>\n        </AppTooltip>\n\n        <AppTooltip {...props} headline=\"This is headline and description\">\n          <AppButton variant=\"outlined\">Headline and description</AppButton>\n        </AppTooltip>\n\n        <AppTooltip\n          {...props}\n          content={\n            <Box>\n              <DescriptionTypography component=\"span\" color={theme.palette.colors.green[400]}>\n                Total sales ={' '}\n              </DescriptionTypography>\n              <DescriptionTypography component=\"span\" color={theme.palette.colors.primary[400]}>\n                net sales + additonal fees + duties + shipping charges + taxes\n              </DescriptionTypography>\n            </Box>\n          }\n        >\n          <AppButton variant=\"outlined\">With custom content</AppButton>\n        </AppTooltip>\n      </StackColumn>\n    </StackRow>\n  );\n};\n\n//\n\nconst DescriptionTypography = styled(AppTypography)(({ theme }) => ({\n  fontWeight: 400,\n  fontSize: theme.spacing(1.5),\n}));\n"],"names":["AppTooltip","jsx","Fragment","useToggle","useTheme","jsxs","StackRow","StackColumn","AppButton","ClickAwayListener","Box","styled","AppTypography"],"mappings":"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"}

package/dist/es/components/app-icon-with-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-icon-with-tooltip.js","sources":["../../../src/components/app-icon-with-tooltip.tsx"],"sourcesContent":["import { Box, SvgIconOwnProps, styled } from '@mui/material';\n\nimport { IconInformationLine } from '../icons/system/information-line';\n\nimport { AppTooltip, AppTooltipProps } from './app-tooltip';\nimport { StackRow } from './stack-row';\n\n//\n//\n\n// NOTE: accessibleAreaWidth and accessibleAreaHeight are used to create non-visible area for\n//       the tooltip to be accessible on mobile\n\nexport type AppIconWithTooltipProps = {\n  accessibleAreaWidth?: string;\n  accessibleAreaHeight?: string;\n  icon?: React.ReactNode;\n  iconProps?: SvgIconOwnProps;\n  tooltip?: AppTooltipProps['description'];\n  tooltipProps?: Omit<AppTooltipProps, 'children'>;\n};\n\nexport const AppIconWithTooltip: React.FC<AppIconWithTooltipProps> = ({\n  tooltip,\n  tooltipProps,\n  accessibleAreaWidth = '36px',\n  accessibleAreaHeight = '36px',\n  icon,\n  iconProps,\n}) => {\n  if (!tooltip) return;\n\n  return (\n    <AppTooltip description={tooltip} {...tooltipProps}>\n      <StackRow position=\"relative\" alignItems=\"center\" justifyContent=\"center\">\n        {icon ?? <IconInformationLine fontSize=\"inherit\" color=\"action\" {...iconProps} />}\n        <TooltipArea width={accessibleAreaWidth} height={accessibleAreaHeight} />\n      </StackRow>\n    </AppTooltip>\n  );\n};\n\nconst TooltipArea = styled(Box)(({ width, height }) => ({\n  position: 'absolute',\n  display: 'none',\n  pointerEvents: 'none',\n  '@media (pointer:none), (pointer:coarse), (hover:none)': {\n    display: 'block',\n    width: width || '24px',\n    height: height || '24px',\n    pointerEvents: 'auto',\n  },\n}));\n"],"names":[],"mappings":";;;;;AAsBO,MAAM,qBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,EACvB;AAAA,EACA;AACF,MAAM;AACJ,MAAI,CAAC,QAAS;AAEd,SACE,oBAAC,YAAA,EAAW,aAAa,SAAU,GAAG,cACpC,UAAA,qBAAC,UAAA,EAAS,UAAS,YAAW,YAAW,UAAS,gBAAe,UAC9D,UAAA;AAAA,IAAA,4BAAS,qBAAA,EAAoB,UAAS,WAAU,OAAM,UAAU,GAAG,WAAW;AAAA,IAC/E,oBAAC,aAAA,EAAY,OAAO,qBAAqB,QAAQ,qBAAA,CAAsB;AAAA,EAAA,EAAA,CACzE,EAAA,CACF;AAEJ;AAEA,MAAM,cAAc,OAAO,GAAG,EAAE,CAAC,EAAE,OAAO,cAAc;AAAA,EACtD,UAAU;AAAA,EACV,SAAS;AAAA,EACT,eAAe;AAAA,EACf,yDAAyD;AAAA,IACvD,SAAS;AAAA,IACT,OAAO,SAAS;AAAA,IAChB,QAAQ,UAAU;AAAA,IAClB,eAAe;AAAA,EAAA;AAEnB,EAAE;"}
+{"version":3,"file":"app-icon-with-tooltip.js","sources":["../../../src/components/app-icon-with-tooltip.tsx"],"sourcesContent":["import { Box, SvgIconOwnProps, styled } from '@mui/material';\n\nimport { IconInformationLine } from '~/icons/system/information-line';\n\nimport { AppTooltip, AppTooltipProps } from './app-tooltip';\nimport { StackRow } from './stack-row';\n\n//\n//\n\n// NOTE: accessibleAreaWidth and accessibleAreaHeight are used to create non-visible area for\n//       the tooltip to be accessible on mobile\n\nexport type AppIconWithTooltipProps = {\n  accessibleAreaWidth?: string;\n  accessibleAreaHeight?: string;\n  icon?: React.ReactNode;\n  iconProps?: SvgIconOwnProps;\n  tooltip?: AppTooltipProps['description'];\n  tooltipProps?: Omit<AppTooltipProps, 'children'>;\n};\n\nexport const AppIconWithTooltip: React.FC<AppIconWithTooltipProps> = ({\n  tooltip,\n  tooltipProps,\n  accessibleAreaWidth = '36px',\n  accessibleAreaHeight = '36px',\n  icon,\n  iconProps,\n}) => {\n  if (!tooltip) return;\n\n  return (\n    <AppTooltip description={tooltip} {...tooltipProps}>\n      <StackRow position=\"relative\" alignItems=\"center\" justifyContent=\"center\">\n        {icon ?? <IconInformationLine fontSize=\"inherit\" color=\"action\" {...iconProps} />}\n        <TooltipArea width={accessibleAreaWidth} height={accessibleAreaHeight} />\n      </StackRow>\n    </AppTooltip>\n  );\n};\n\nconst TooltipArea = styled(Box)(({ width, height }) => ({\n  position: 'absolute',\n  display: 'none',\n  pointerEvents: 'none',\n  '@media (pointer:none), (pointer:coarse), (hover:none)': {\n    display: 'block',\n    width: width || '24px',\n    height: height || '24px',\n    pointerEvents: 'auto',\n  },\n}));\n"],"names":[],"mappings":";;;;;AAsBO,MAAM,qBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,EACvB;AAAA,EACA;AACF,MAAM;AACJ,MAAI,CAAC,QAAS;AAEd,SACE,oBAAC,YAAA,EAAW,aAAa,SAAU,GAAG,cACpC,UAAA,qBAAC,UAAA,EAAS,UAAS,YAAW,YAAW,UAAS,gBAAe,UAC9D,UAAA;AAAA,IAAA,4BAAS,qBAAA,EAAoB,UAAS,WAAU,OAAM,UAAU,GAAG,WAAW;AAAA,IAC/E,oBAAC,aAAA,EAAY,OAAO,qBAAqB,QAAQ,qBAAA,CAAsB;AAAA,EAAA,EAAA,CACzE,EAAA,CACF;AAEJ;AAEA,MAAM,cAAc,OAAO,GAAG,EAAE,CAAC,EAAE,OAAO,cAAc;AAAA,EACtD,UAAU;AAAA,EACV,SAAS;AAAA,EACT,eAAe;AAAA,EACf,yDAAyD;AAAA,IACvD,SAAS;AAAA,IACT,OAAO,SAAS;AAAA,IAChB,QAAQ,UAAU;AAAA,IAClB,eAAe;AAAA,EAAA;AAEnB,EAAE;"}

package/dist/es/components/app-input-base-search.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-input-base-search.js","sources":["../../../src/components/app-input-base-search.tsx"],"sourcesContent":["import { IconButtonProps, SvgIconProps, TextFieldProps } from '@mui/material';\n\nimport { IconSearchLine } from '../icons/system/search-line';\n\nimport { AppInputBase } from './app-input-base';\n\n//\n//\n\nexport type AppInputSearchProps = TextFieldProps & {\n  name: string;\n  transformText?: (text: string) => string;\n  iconButtonProps?: IconButtonProps;\n  iconProps?: SvgIconProps;\n};\n\nexport const AppInputBaseSearch = ({\n  name,\n  helperText,\n  transformText,\n  children,\n  ...props\n}: AppInputSearchProps) => {\n  return (\n    <AppInputBase\n      transformText={transformText}\n      id={'input-' + name}\n      helperText={helperText}\n      startAdornment={<IconSearchLine fontSize=\"small\" />}\n      {...props}\n    >\n      {children}\n    </AppInputBase>\n  );\n};\n"],"names":[],"mappings":";;;AAgBO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,IAAI,WAAW;AAAA,MACf;AAAA,MACA,gBAAgB,oBAAC,gBAAA,EAAe,UAAS,QAAA,CAAQ;AAAA,MAChD,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"app-input-base-search.js","sources":["../../../src/components/app-input-base-search.tsx"],"sourcesContent":["import { IconButtonProps, SvgIconProps, TextFieldProps } from '@mui/material';\n\nimport { IconSearchLine } from '~/icons/system/search-line';\n\nimport { AppInputBase } from './app-input-base';\n\n//\n//\n\nexport type AppInputSearchProps = TextFieldProps & {\n  name: string;\n  transformText?: (text: string) => string;\n  iconButtonProps?: IconButtonProps;\n  iconProps?: SvgIconProps;\n};\n\nexport const AppInputBaseSearch = ({\n  name,\n  helperText,\n  transformText,\n  children,\n  ...props\n}: AppInputSearchProps) => {\n  return (\n    <AppInputBase\n      transformText={transformText}\n      id={'input-' + name}\n      helperText={helperText}\n      startAdornment={<IconSearchLine fontSize=\"small\" />}\n      {...props}\n    >\n      {children}\n    </AppInputBase>\n  );\n};\n"],"names":[],"mappings":";;;AAgBO,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2B;AACzB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,IAAI,WAAW;AAAA,MACf;AAAA,MACA,gBAAgB,oBAAC,gBAAA,EAAe,UAAS,QAAA,CAAQ;AAAA,MAChD,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}