@common-origin/design-system 2.19.0 → 2.21.0

package/dist/components/molecules/Sheet/Sheet.mjs

@@ -0,0 +1,243 @@
+'use client';
+import { __makeTemplateObject } from '../../../vendor/tslib/tslib.es6.mjs';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import styled$module, { keyframes, css } from 'styled-components';
+const styled = styled$module.default || styled$module;
+import tokens from '../../../lib/cssTokens.mjs';
+import { exitAnimation, reducedMotion } from '../../../lib/styleUtils.mjs';
+import { usePresence, useInert } from '../../../lib/usePresence.mjs';
+
+var semantic = tokens.semantic;
+// Fade in animation for overlay
+var fadeIn = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"], ["\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n"
+// Slide animations for each position
+])));
+// Slide animations for each position
+var slideInRight = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n"], ["\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n"])));
+var slideInLeft = keyframes(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n"], ["\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n"])));
+var slideInTop = keyframes(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  from {\n    transform: translateY(-100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n"], ["\n  from {\n    transform: translateY(-100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n"])));
+var slideInBottom = keyframes(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n"], ["\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n"])));
+var StyledOverlay = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Sheet__StyledOverlay",
+  componentId: "sc-8abisx-0"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ", ";\n  z-index: ", ";\n  ", "\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ", ";\n  z-index: ", ";\n  ", "\n"])), semantic.surface.scrim, semantic.layer.overlay, css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["animation: ", " ", " ", "", ";"], ["animation: ", " ", " ", "", ";"])), fadeIn, semantic.motion.duration.moderate, semantic.motion.easing.standard, function (_a) {
+  var $isExiting = _a.$isExiting;
+  return $isExiting && exitAnimation;
+}));
+var StyledSheet = /*#__PURE__*/styled.div.withConfig({
+  shouldForwardProp: function shouldForwardProp(prop) {
+    return !prop.startsWith('$');
+  },
+  displayName: "Sheet__StyledSheet",
+  componentId: "sc-8abisx-1"
+})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  position: fixed;\n  background-color: ", ";\n  box-shadow: ", ";\n  z-index: ", ";\n  overflow-y: auto;\n  \n  /* Position-specific styles */\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n  \n  /* Focus trap styling */\n  &:focus {\n    outline: none;\n  }\n\n  \n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"], ["\n  position: fixed;\n  background-color: ", ";\n  box-shadow: ", ";\n  z-index: ", ";\n  overflow-y: auto;\n  \n  /* Position-specific styles */\n  ", "\n\n  ", " {\n    animation: ", " ", " ", "", ";\n  }\n  \n  /* Focus trap styling */\n  &:focus {\n    outline: none;\n  }\n\n  \n  /* Scrollbar styling */\n  &::-webkit-scrollbar {\n    width: ", ";\n  }\n  \n  &::-webkit-scrollbar-track {\n    background: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: ", ";\n  }\n  \n  &::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), semantic.surface.base, semantic.elevation.overlay, semantic.layer.overlay, function (_a) {
+  var $position = _a.$position,
+    $variant = _a.$variant,
+    $width = _a.$width,
+    $height = _a.$height;
+  var isDrawer = $variant === 'drawer';
+  var margin = isDrawer ? semantic.space[400] : '0';
+  var borderRadius = isDrawer ? semantic.radius.md : '0';
+  switch ($position) {
+    case 'right':
+      return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n          top: ", ";\n          right: ", ";\n          bottom: ", ";\n          width: ", ";\n          max-width: calc(100vw - ", ");\n          border-radius: ", " 0 0 ", ";\n          animation: ", " ", " ", "", ";\n        "], ["\n          top: ", ";\n          right: ", ";\n          bottom: ", ";\n          width: ", ";\n          max-width: calc(100vw - ", ");\n          border-radius: ", " 0 0 ", ";\n          animation: ", " ", " ", "", ";\n        "])), margin, margin, margin, $width, isDrawer ? "".concat(semantic.space[400], " * 2") : '0px', borderRadius, borderRadius, slideInRight, semantic.motion.duration.moderate, semantic.motion.easing.standard, function (_a) {
+        var $isExiting = _a.$isExiting;
+        return $isExiting && exitAnimation;
+      });
+    case 'left':
+      return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n          top: ", ";\n          left: ", ";\n          bottom: ", ";\n          width: ", ";\n          max-width: calc(100vw - ", ");\n          border-radius: 0 ", " ", " 0;\n          animation: ", " ", " ", "", ";\n        "], ["\n          top: ", ";\n          left: ", ";\n          bottom: ", ";\n          width: ", ";\n          max-width: calc(100vw - ", ");\n          border-radius: 0 ", " ", " 0;\n          animation: ", " ", " ", "", ";\n        "])), margin, margin, margin, $width, isDrawer ? "".concat(semantic.space[400], " * 2") : '0px', borderRadius, borderRadius, slideInLeft, semantic.motion.duration.moderate, semantic.motion.easing.standard, function (_a) {
+        var $isExiting = _a.$isExiting;
+        return $isExiting && exitAnimation;
+      });
+    case 'top':
+      return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n          top: ", ";\n          left: ", ";\n          right: ", ";\n          height: ", ";\n          max-height: calc(100vh - ", ");\n          border-radius: 0 0 ", " ", ";\n          animation: ", " ", " ", "", ";\n        "], ["\n          top: ", ";\n          left: ", ";\n          right: ", ";\n          height: ", ";\n          max-height: calc(100vh - ", ");\n          border-radius: 0 0 ", " ", ";\n          animation: ", " ", " ", "", ";\n        "])), margin, margin, margin, $height, isDrawer ? "".concat(semantic.space[400], " * 2") : '0px', borderRadius, borderRadius, slideInTop, semantic.motion.duration.moderate, semantic.motion.easing.standard, function (_a) {
+        var $isExiting = _a.$isExiting;
+        return $isExiting && exitAnimation;
+      });
+    case 'bottom':
+      return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n          bottom: ", ";\n          left: ", ";\n          right: ", ";\n          height: ", ";\n          max-height: calc(100vh - ", ");\n          border-radius: ", " ", " 0 0;\n          animation: ", " ", " ", "", ";\n        "], ["\n          bottom: ", ";\n          left: ", ";\n          right: ", ";\n          height: ", ";\n          max-height: calc(100vh - ", ");\n          border-radius: ", " ", " 0 0;\n          animation: ", " ", " ", "", ";\n        "])), margin, margin, margin, $height, isDrawer ? "".concat(semantic.space[400], " * 2") : '0px', borderRadius, borderRadius, slideInBottom, semantic.motion.duration.moderate, semantic.motion.easing.standard, function (_a) {
+        var $isExiting = _a.$isExiting;
+        return $isExiting && exitAnimation;
+      });
+  }
+}, reducedMotion, fadeIn, semantic.motion.duration.moderate, semantic.motion.easing.standard, function (_a) {
+  var $isExiting = _a.$isExiting;
+  return $isExiting && exitAnimation;
+}, semantic.space[200], semantic.surface.raised, semantic.color.border["default"], semantic.radius.full, semantic.color.fill.inverse);
+var StyledSheetContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Sheet__StyledSheetContent",
+  componentId: "sc-8abisx-2"
+})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  padding: ", ";\n  min-height: 100%;\n"], ["\n  padding: ", ";\n  min-height: 100%;\n"
+/**
+ * Sheet component for side panels and drawers
+ *
+ * Provides a sliding panel that appears from any edge of the screen.
+ * Can be used for navigation menus, filters, forms, or additional content.
+ *
+ * @example
+ * ```tsx
+ * // Right-positioned sheet (default)
+ * <Sheet isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <h2>Sheet Content</h2>
+ *   <p>Your content here</p>
+ * </Sheet>
+ *
+ * // Drawer variant from bottom
+ * <Sheet
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   position="bottom"
+ *   variant="drawer"
+ *   height="60vh"
+ * >
+ *   <h2>Mobile Menu</h2>
+ * </Sheet>
+ * ```
+ */])), semantic.space[600]);
+/**
+ * Sheet component for side panels and drawers
+ *
+ * Provides a sliding panel that appears from any edge of the screen.
+ * Can be used for navigation menus, filters, forms, or additional content.
+ *
+ * @example
+ * ```tsx
+ * // Right-positioned sheet (default)
+ * <Sheet isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <h2>Sheet Content</h2>
+ *   <p>Your content here</p>
+ * </Sheet>
+ *
+ * // Drawer variant from bottom
+ * <Sheet
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   position="bottom"
+ *   variant="drawer"
+ *   height="60vh"
+ * >
+ *   <h2>Mobile Menu</h2>
+ * </Sheet>
+ * ```
+ */
+var Sheet = function Sheet(_a) {
+  var isOpen = _a.isOpen,
+    onClose = _a.onClose,
+    _b = _a.position,
+    position = _b === void 0 ? 'right' : _b,
+    _c = _a.variant,
+    variant = _c === void 0 ? 'sheet' : _c,
+    _d = _a.width,
+    width = _d === void 0 ? tokens.semantic.size.overlay.sm : _d,
+    _e = _a.height,
+    height = _e === void 0 ? tokens.semantic.size.overlay.sm : _e,
+    children = _a.children,
+    _f = _a.closeOnOverlayClick,
+    closeOnOverlayClick = _f === void 0 ? true : _f,
+    _g = _a.closeOnEscape,
+    closeOnEscape = _g === void 0 ? true : _g,
+    title = _a.title,
+    dataTestId = _a["data-testid"],
+    ariaLabel = _a["aria-label"],
+    ariaDescribedBy = _a["aria-describedby"];
+  var sheetRef = useRef(null);
+  var previousFocusRef = useRef(null);
+  var _h = usePresence(isOpen),
+    isPresent = _h.isPresent,
+    isExiting = _h.isExiting;
+  useInert(sheetRef, isExiting);
+  // Focus management
+  useEffect(function () {
+    if (isOpen) {
+      // Store previous focus
+      previousFocusRef.current = document.activeElement;
+      // Focus sheet
+      var timer_1 = setTimeout(function () {
+        var _a;
+        (_a = sheetRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      }, 100); // Small delay to allow animation to start
+      // Prevent body scroll
+      document.body.style.overflow = 'hidden';
+      // A quick close cancels the pending focus, so it can't pull focus back into the exiting sheet
+      return function () {
+        clearTimeout(timer_1);
+        document.body.style.overflow = '';
+      };
+    } else {
+      // Restore previous focus
+      if (previousFocusRef.current) {
+        previousFocusRef.current.focus();
+      }
+      // Restore body scroll
+      document.body.style.overflow = '';
+    }
+    return function () {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+  // Keyboard handling
+  var handleKeyDown = function handleKeyDown(event) {
+    var _a;
+    if (closeOnEscape && event.key === 'Escape') {
+      event.preventDefault();
+      onClose();
+    }
+    // Focus trap
+    if (event.key === 'Tab') {
+      var focusableElements = (_a = sheetRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+      if (!focusableElements || focusableElements.length === 0) return;
+      var firstElement = focusableElements[0];
+      var lastElement = focusableElements[focusableElements.length - 1];
+      if (event.shiftKey && document.activeElement === firstElement) {
+        event.preventDefault();
+        lastElement.focus();
+      } else if (!event.shiftKey && document.activeElement === lastElement) {
+        event.preventDefault();
+        firstElement.focus();
+      }
+    }
+  };
+  // Overlay click handling
+  var handleOverlayClick = function handleOverlayClick(event) {
+    // While exiting, the backdrop still catches clicks but doesn't close again
+    if (!isExiting && closeOnOverlayClick && event.target === event.currentTarget) {
+      onClose();
+    }
+  };
+  // Stays mounted while the exit fade runs, hidden from assistive technology
+  if (!isPresent) return null;
+  return jsxs(Fragment, {
+    children: [jsx(StyledOverlay, {
+      "$isExiting": isExiting,
+      onClick: handleOverlayClick,
+      "data-testid": dataTestId ? "".concat(dataTestId, "-overlay") : 'sheet-overlay'
+    }), jsx(StyledSheet, {
+      ref: sheetRef,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": ariaLabel || title || 'Sheet dialog',
+      "aria-describedby": ariaDescribedBy,
+      "aria-hidden": isExiting || undefined,
+      tabIndex: -1,
+      "$position": position,
+      "$variant": variant,
+      "$width": width,
+      "$height": height,
+      "$isExiting": isExiting,
+      onKeyDown: handleKeyDown,
+      "data-testid": dataTestId,
+      children: jsx(StyledSheetContent, {
+        children: children
+      })
+    })]
+  });
+};
+Sheet.displayName = 'Sheet';
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
+
+export { Sheet };
+//# sourceMappingURL=Sheet.mjs.map

package/dist/components/molecules/Sheet/Sheet.mjs.map

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

package/dist/components/molecules/Sheet/index.d.mts

@@ -0,0 +1,2 @@
+export { Sheet } from './Sheet.mjs';
+export type { SheetProps } from './Sheet.mjs';

package/dist/components/molecules/Slider/Slider.d.mts

@@ -0,0 +1,102 @@
+/**
+ * Props for the Slider component
+ */
+export interface SliderProps {
+    /**
+     * Minimum value of the slider
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum value of the slider
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Step increment for value changes
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Current value for single slider
+     */
+    value?: number;
+    /**
+     * Default value for uncontrolled single slider
+     */
+    defaultValue?: number;
+    /**
+     * Current values for range slider [min, max]
+     */
+    rangeValue?: [number, number];
+    /**
+     * Default values for uncontrolled range slider [min, max]
+     */
+    defaultRangeValue?: [number, number];
+    /**
+     * Callback fired when value changes (single slider)
+     */
+    onChange?: (value: number) => void;
+    /**
+     * Callback fired when range values change (range slider)
+     */
+    onRangeChange?: (values: [number, number]) => void;
+    /**
+     * Whether the slider is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Label for the slider
+     */
+    label?: string;
+    /**
+     * Whether to show value labels
+     * @default true
+     */
+    showValueLabel?: boolean;
+    /**
+     * Custom formatter for value labels
+     */
+    formatValue?: (value: number) => string;
+    /**
+     * Test identifier for automated testing
+     */
+    'data-testid'?: string;
+    /**
+     * Accessible name for the slider
+     */
+    'aria-label'?: string;
+    /**
+     * ID of element describing the slider
+     */
+    'aria-describedby'?: string;
+}
+/**
+ * Slider component for single value or range selection
+ *
+ * @example
+ * ```tsx
+ * // Single value slider
+ * <Slider
+ *   label="Volume"
+ *   min={0}
+ *   max={100}
+ *   value={50}
+ *   onChange={(value) => console.log(value)}
+ * />
+ *
+ * // Range slider
+ * <Slider
+ *   label="Budget Range"
+ *   min={0}
+ *   max={1000}
+ *   rangeValue={[200, 800]}
+ *   onRangeChange={(values) => console.log(values)}
+ * />
+ * ```
+ */
+export declare const Slider: {
+    ({ min, max, step, value: controlledValue, defaultValue, rangeValue: controlledRangeValue, defaultRangeValue, onChange, onRangeChange, disabled, label, showValueLabel, formatValue, "data-testid": dataTestId, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, }: SliderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};