@brycks/core-front 0.3.2 → 0.3.4

package/dist/components/feedback/Alert/Alert.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),S=require("react"),M=require("../../../utils/styles.cjs"),W={info:{icon:r.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[r.jsx("circle",{cx:"9",cy:"9",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),r.jsx("path",{d:"M9 8V12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r.jsx("circle",{cx:"9",cy:"5.5",r:"0.75",fill:"currentColor"})]}),colors:{subtle:{backgroundColor:"var(--brycks-info-muted)",color:"var(--brycks-info-default)",borderColor:"transparent"},solid:{backgroundColor:"var(--brycks-info-default)",color:"var(--brycks-info-foreground)",borderColor:"transparent"},outline:{backgroundColor:"transparent",color:"var(--brycks-info-default)",borderColor:"var(--brycks-info-default)"}}},success:{icon:r.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[r.jsx("circle",{cx:"9",cy:"9",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),r.jsx("path",{d:"M6 9L8 11L12 7",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),colors:{subtle:{backgroundColor:"var(--brycks-success-muted)",color:"var(--brycks-success-default)",borderColor:"transparent"},solid:{backgroundColor:"var(--brycks-success-default)",color:"var(--brycks-success-foreground)",borderColor:"transparent"},outline:{backgroundColor:"transparent",color:"var(--brycks-success-default)",borderColor:"var(--brycks-success-default)"}}},warning:{icon:r.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[r.jsx("path",{d:"M9 2L16.5 15H1.5L9 2Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinejoin:"round"}),r.jsx("path",{d:"M9 7V10",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r.jsx("circle",{cx:"9",cy:"12.5",r:"0.75",fill:"currentColor"})]}),colors:{subtle:{backgroundColor:"var(--brycks-warning-muted)",color:"var(--brycks-warning-default)",borderColor:"transparent"},solid:{backgroundColor:"var(--brycks-warning-default)",color:"var(--brycks-warning-foreground)",borderColor:"transparent"},outline:{backgroundColor:"transparent",color:"var(--brycks-warning-default)",borderColor:"var(--brycks-warning-default)"}}},error:{icon:r.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[r.jsx("circle",{cx:"9",cy:"9",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),r.jsx("path",{d:"M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]}),colors:{subtle:{backgroundColor:"var(--brycks-error-muted)",color:"var(--brycks-error-default)",borderColor:"transparent"},solid:{backgroundColor:"var(--brycks-error-default)",color:"var(--brycks-error-foreground)",borderColor:"transparent"},outline:{backgroundColor:"transparent",color:"var(--brycks-error-default)",borderColor:"var(--brycks-error-default)"}}}},d=S.forwardRef(function({intent:l="info",variant:e="subtle",title:c,icon:u,showIcon:k=!0,action:n,isDismissible:a,onDismiss:b,className:y,style:f,testId:g,children:s,...h},x){const i=W[l],o=i.colors[e],p={display:"flex",alignItems:"flex-start",gap:12,padding:"12px 16px",borderRadius:"var(--brycks-radius-default)",border:`1px solid ${o.borderColor}`,backgroundColor:o.backgroundColor,color:e==="solid"?o.color:"var(--brycks-foreground-default)",...f},v={flexShrink:0,color:o.color,marginTop:1},C={flex:1,minWidth:0},j={fontSize:14,fontWeight:600,marginBottom:s?4:0,color:o.color},m={fontSize:14,lineHeight:1.5,color:e==="solid"?o.color:"var(--brycks-foreground-muted)"},w={display:"flex",alignItems:"center",gap:8,flexShrink:0},L={display:"flex",alignItems:"center",justifyContent:"center",width:24,height:24,borderRadius:"var(--brycks-radius-sm)",color:e==="solid"?o.color:"var(--brycks-foreground-muted)",transition:"all 150ms ease-out",opacity:.7};return r.jsxs("div",{ref:x,role:"alert",className:M.cx("brycks-alert",`brycks-alert--${l}`,`brycks-alert--${e}`,y),style:p,"data-testid":g,...h,children:[k&&r.jsx("span",{className:"brycks-alert-icon",style:v,children:u??i.icon}),r.jsxs("div",{className:"brycks-alert-content",style:C,children:[c&&r.jsx("div",{className:"brycks-alert-title",style:j,children:c}),s&&r.jsx("div",{className:"brycks-alert-description",style:m,children:s})]}),(n||a)&&r.jsxs("div",{className:"brycks-alert-actions",style:w,children:[n,a&&r.jsx("button",{type:"button",className:"brycks-alert-dismiss",style:L,onClick:b,"aria-label":"Dismiss alert",onMouseEnter:t=>{t.currentTarget.style.opacity="1"},onMouseLeave:t=>{t.currentTarget.style.opacity="0.7"},children:r.jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",children:r.jsx("path",{d:"M3 3L11 11M11 3L3 11",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})});d.displayName="Alert";exports.Alert=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),y=require("react"),p=require("../../../utils/styles.cjs"),v={info:r.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[r.jsx("circle",{cx:"9",cy:"9",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),r.jsx("path",{d:"M9 8V12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r.jsx("circle",{cx:"9",cy:"5.5",r:"0.75",fill:"currentColor"})]}),success:r.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[r.jsx("circle",{cx:"9",cy:"9",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),r.jsx("path",{d:"M6 9L8 11L12 7",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})]}),warning:r.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[r.jsx("path",{d:"M9 2L16.5 15H1.5L9 2Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinejoin:"round"}),r.jsx("path",{d:"M9 7V10",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"}),r.jsx("circle",{cx:"9",cy:"12.5",r:"0.75",fill:"currentColor"})]}),error:r.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",children:[r.jsx("circle",{cx:"9",cy:"9",r:"7.5",stroke:"currentColor",strokeWidth:"1.5"}),r.jsx("path",{d:"M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})},i=y.forwardRef(function({intent:e="info",variant:l="subtle",title:s,icon:n,showIcon:d=!0,action:t,isDismissible:o,onDismiss:a,className:h,style:k,testId:x,children:c,...u},j){return r.jsxs("div",{ref:j,role:"alert",className:p.cx("brycks-alert",`brycks-alert--${e}`,`brycks-alert--${l}`,h),style:k,"data-testid":x,...u,children:[d&&r.jsx("span",{className:"brycks-alert__icon",children:n??v[e]}),r.jsxs("div",{className:"brycks-alert__content",children:[s&&r.jsx("div",{className:"brycks-alert__title",children:s}),c&&r.jsx("div",{className:"brycks-alert__description",children:c})]}),(t||o)&&r.jsxs("div",{className:"brycks-alert__actions",children:[t,o&&r.jsx("button",{type:"button",className:"brycks-alert__dismiss",onClick:a,"aria-label":"Dismiss alert",children:r.jsx("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",children:r.jsx("path",{d:"M3 3L11 11M11 3L3 11",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})]})]})});i.displayName="Alert";exports.Alert=i;
 //# sourceMappingURL=Alert.cjs.map

package/dist/components/feedback/Alert/Alert.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/feedback/Alert/Alert.tsx"],"sourcesContent":["/**\r\n * Alert Component\r\n *\r\n * Contextual feedback message for user actions and states.\r\n * Clean design with subtle color coding and optional icons.\r\n */\r\n\r\nimport React, {\r\n  forwardRef,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type AlertIntent = 'info' | 'success' | 'warning' | 'error'\r\nexport type AlertVariant = 'subtle' | 'solid' | 'outline'\r\n\r\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\r\n  /** Visual intent/status */\r\n  intent?: AlertIntent\r\n  /** Visual variant */\r\n  variant?: AlertVariant\r\n  /** Alert title */\r\n  title?: ReactNode\r\n  /** Custom icon */\r\n  icon?: ReactNode\r\n  /** Whether to show default icon */\r\n  showIcon?: boolean\r\n  /** Action element (button, link) */\r\n  action?: ReactNode\r\n  /** Whether alert can be dismissed */\r\n  isDismissible?: boolean\r\n  /** Callback when dismissed */\r\n  onDismiss?: () => void\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Alert content */\r\n  children?: ReactNode\r\n}\r\n\r\nconst intentConfig: Record<AlertIntent, { icon: React.JSX.Element; colors: Record<AlertVariant, CSSProperties> }> = {\r\n  info: {\r\n    icon: (\r\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n        <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n        <path d=\"M9 8V12\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n        <circle cx=\"9\" cy=\"5.5\" r=\"0.75\" fill=\"currentColor\" />\r\n      </svg>\r\n    ),\r\n    colors: {\r\n      subtle: {\r\n        backgroundColor: 'var(--brycks-info-muted)',\r\n        color: 'var(--brycks-info-default)',\r\n        borderColor: 'transparent',\r\n      },\r\n      solid: {\r\n        backgroundColor: 'var(--brycks-info-default)',\r\n        color: 'var(--brycks-info-foreground)',\r\n        borderColor: 'transparent',\r\n      },\r\n      outline: {\r\n        backgroundColor: 'transparent',\r\n        color: 'var(--brycks-info-default)',\r\n        borderColor: 'var(--brycks-info-default)',\r\n      },\r\n    },\r\n  },\r\n  success: {\r\n    icon: (\r\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n        <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n        <path d=\"M6 9L8 11L12 7\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n      </svg>\r\n    ),\r\n    colors: {\r\n      subtle: {\r\n        backgroundColor: 'var(--brycks-success-muted)',\r\n        color: 'var(--brycks-success-default)',\r\n        borderColor: 'transparent',\r\n      },\r\n      solid: {\r\n        backgroundColor: 'var(--brycks-success-default)',\r\n        color: 'var(--brycks-success-foreground)',\r\n        borderColor: 'transparent',\r\n      },\r\n      outline: {\r\n        backgroundColor: 'transparent',\r\n        color: 'var(--brycks-success-default)',\r\n        borderColor: 'var(--brycks-success-default)',\r\n      },\r\n    },\r\n  },\r\n  warning: {\r\n    icon: (\r\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n        <path d=\"M9 2L16.5 15H1.5L9 2Z\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinejoin=\"round\" />\r\n        <path d=\"M9 7V10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n        <circle cx=\"9\" cy=\"12.5\" r=\"0.75\" fill=\"currentColor\" />\r\n      </svg>\r\n    ),\r\n    colors: {\r\n      subtle: {\r\n        backgroundColor: 'var(--brycks-warning-muted)',\r\n        color: 'var(--brycks-warning-default)',\r\n        borderColor: 'transparent',\r\n      },\r\n      solid: {\r\n        backgroundColor: 'var(--brycks-warning-default)',\r\n        color: 'var(--brycks-warning-foreground)',\r\n        borderColor: 'transparent',\r\n      },\r\n      outline: {\r\n        backgroundColor: 'transparent',\r\n        color: 'var(--brycks-warning-default)',\r\n        borderColor: 'var(--brycks-warning-default)',\r\n      },\r\n    },\r\n  },\r\n  error: {\r\n    icon: (\r\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n        <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n        <path d=\"M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n      </svg>\r\n    ),\r\n    colors: {\r\n      subtle: {\r\n        backgroundColor: 'var(--brycks-error-muted)',\r\n        color: 'var(--brycks-error-default)',\r\n        borderColor: 'transparent',\r\n      },\r\n      solid: {\r\n        backgroundColor: 'var(--brycks-error-default)',\r\n        color: 'var(--brycks-error-foreground)',\r\n        borderColor: 'transparent',\r\n      },\r\n      outline: {\r\n        backgroundColor: 'transparent',\r\n        color: 'var(--brycks-error-default)',\r\n        borderColor: 'var(--brycks-error-default)',\r\n      },\r\n    },\r\n  },\r\n}\r\n\r\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(\r\n  {\r\n    intent = 'info',\r\n    variant = 'subtle',\r\n    title,\r\n    icon,\r\n    showIcon = true,\r\n    action,\r\n    isDismissible,\r\n    onDismiss,\r\n    className,\r\n    style,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const config = intentConfig[intent]\r\n  const variantColors = config.colors[variant]\r\n\r\n  const alertStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'flex-start',\r\n    gap: 12,\r\n    padding: '12px 16px',\r\n    borderRadius: 'var(--brycks-radius-default)',\r\n    border: `1px solid ${variantColors.borderColor}`,\r\n    backgroundColor: variantColors.backgroundColor,\r\n    color: variant === 'solid' ? variantColors.color : 'var(--brycks-foreground-default)',\r\n    ...style,\r\n  }\r\n\r\n  const iconStyle: CSSProperties = {\r\n    flexShrink: 0,\r\n    color: variantColors.color,\r\n    marginTop: 1,\r\n  }\r\n\r\n  const contentStyle: CSSProperties = {\r\n    flex: 1,\r\n    minWidth: 0,\r\n  }\r\n\r\n  const titleStyle: CSSProperties = {\r\n    fontSize: 14,\r\n    fontWeight: 600,\r\n    marginBottom: children ? 4 : 0,\r\n    color: variant === 'solid' ? variantColors.color : variantColors.color,\r\n  }\r\n\r\n  const descriptionStyle: CSSProperties = {\r\n    fontSize: 14,\r\n    lineHeight: 1.5,\r\n    color: variant === 'solid' ? variantColors.color : 'var(--brycks-foreground-muted)',\r\n  }\r\n\r\n  const actionsStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    gap: 8,\r\n    flexShrink: 0,\r\n  }\r\n\r\n  const dismissButtonStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    width: 24,\r\n    height: 24,\r\n    borderRadius: 'var(--brycks-radius-sm)',\r\n    color: variant === 'solid' ? variantColors.color : 'var(--brycks-foreground-muted)',\r\n    transition: 'all 150ms ease-out',\r\n    opacity: 0.7,\r\n  }\r\n\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      role=\"alert\"\r\n      className={cx(\r\n        'brycks-alert',\r\n        `brycks-alert--${intent}`,\r\n        `brycks-alert--${variant}`,\r\n        className\r\n      )}\r\n      style={alertStyle}\r\n      data-testid={testId}\r\n      {...props}\r\n    >\r\n      {showIcon && (\r\n        <span className=\"brycks-alert-icon\" style={iconStyle}>\r\n          {icon ?? config.icon}\r\n        </span>\r\n      )}\r\n\r\n      <div className=\"brycks-alert-content\" style={contentStyle}>\r\n        {title && <div className=\"brycks-alert-title\" style={titleStyle}>{title}</div>}\r\n        {children && <div className=\"brycks-alert-description\" style={descriptionStyle}>{children}</div>}\r\n      </div>\r\n\r\n      {(action || isDismissible) && (\r\n        <div className=\"brycks-alert-actions\" style={actionsStyle}>\r\n          {action}\r\n          {isDismissible && (\r\n            <button\r\n              type=\"button\"\r\n              className=\"brycks-alert-dismiss\"\r\n              style={dismissButtonStyle}\r\n              onClick={onDismiss}\r\n              aria-label=\"Dismiss alert\"\r\n              onMouseEnter={(e) => { e.currentTarget.style.opacity = '1' }}\r\n              onMouseLeave={(e) => { e.currentTarget.style.opacity = '0.7' }}\r\n            >\r\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n                <path d=\"M3 3L11 11M11 3L3 11\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n              </svg>\r\n            </button>\r\n          )}\r\n        </div>\r\n      )}\r\n    </div>\r\n  )\r\n})\r\n\r\nAlert.displayName = 'Alert'\r\n"],"names":["intentConfig","jsxs","jsx","Alert","forwardRef","intent","variant","title","icon","showIcon","action","isDismissible","onDismiss","className","style","testId","children","props","ref","config","variantColors","alertStyle","iconStyle","contentStyle","titleStyle","descriptionStyle","actionsStyle","dismissButtonStyle","cx","e"],"mappings":"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"}
+{"version":3,"file":"Alert.cjs","sources":["../../../../src/components/feedback/Alert/Alert.tsx"],"sourcesContent":["/**\r\n * Alert Component\r\n *\r\n * Contextual feedback message for user actions and states.\r\n * Clean design with subtle color coding and optional icons.\r\n *\r\n * All color styles are handled via CSS classes for easy customization.\r\n */\r\n\r\nimport React, {\r\n  forwardRef,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type AlertIntent = 'info' | 'success' | 'warning' | 'error'\r\nexport type AlertVariant = 'subtle' | 'solid' | 'outline'\r\n\r\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\r\n  /** Visual intent/status */\r\n  intent?: AlertIntent\r\n  /** Visual variant */\r\n  variant?: AlertVariant\r\n  /** Alert title */\r\n  title?: ReactNode\r\n  /** Custom icon */\r\n  icon?: ReactNode\r\n  /** Whether to show default icon */\r\n  showIcon?: boolean\r\n  /** Action element (button, link) */\r\n  action?: ReactNode\r\n  /** Whether alert can be dismissed */\r\n  isDismissible?: boolean\r\n  /** Callback when dismissed */\r\n  onDismiss?: () => void\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Alert content */\r\n  children?: ReactNode\r\n}\r\n\r\nconst defaultIcons: Record<AlertIntent, React.JSX.Element> = {\r\n  info: (\r\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n      <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n      <path d=\"M9 8V12\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n      <circle cx=\"9\" cy=\"5.5\" r=\"0.75\" fill=\"currentColor\" />\r\n    </svg>\r\n  ),\r\n  success: (\r\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n      <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n      <path d=\"M6 9L8 11L12 7\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n    </svg>\r\n  ),\r\n  warning: (\r\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n      <path d=\"M9 2L16.5 15H1.5L9 2Z\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinejoin=\"round\" />\r\n      <path d=\"M9 7V10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n      <circle cx=\"9\" cy=\"12.5\" r=\"0.75\" fill=\"currentColor\" />\r\n    </svg>\r\n  ),\r\n  error: (\r\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n      <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n      <path d=\"M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n    </svg>\r\n  ),\r\n}\r\n\r\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(\r\n  {\r\n    intent = 'info',\r\n    variant = 'subtle',\r\n    title,\r\n    icon,\r\n    showIcon = true,\r\n    action,\r\n    isDismissible,\r\n    onDismiss,\r\n    className,\r\n    style,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      role=\"alert\"\r\n      className={cx(\r\n        'brycks-alert',\r\n        `brycks-alert--${intent}`,\r\n        `brycks-alert--${variant}`,\r\n        className\r\n      )}\r\n      style={style}\r\n      data-testid={testId}\r\n      {...props}\r\n    >\r\n      {showIcon && (\r\n        <span className=\"brycks-alert__icon\">\r\n          {icon ?? defaultIcons[intent]}\r\n        </span>\r\n      )}\r\n\r\n      <div className=\"brycks-alert__content\">\r\n        {title && <div className=\"brycks-alert__title\">{title}</div>}\r\n        {children && <div className=\"brycks-alert__description\">{children}</div>}\r\n      </div>\r\n\r\n      {(action || isDismissible) && (\r\n        <div className=\"brycks-alert__actions\">\r\n          {action}\r\n          {isDismissible && (\r\n            <button\r\n              type=\"button\"\r\n              className=\"brycks-alert__dismiss\"\r\n              onClick={onDismiss}\r\n              aria-label=\"Dismiss alert\"\r\n            >\r\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n                <path d=\"M3 3L11 11M11 3L3 11\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n              </svg>\r\n            </button>\r\n          )}\r\n        </div>\r\n      )}\r\n    </div>\r\n  )\r\n})\r\n\r\nAlert.displayName = 'Alert'\r\n"],"names":["defaultIcons","jsxs","jsx","Alert","forwardRef","intent","variant","title","icon","showIcon","action","isDismissible","onDismiss","className","style","testId","children","props","ref","cx"],"mappings":"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"}

package/dist/components/feedback/Alert/Alert.js

@@ -1,194 +1,69 @@
 import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { forwardRef as W } from "react";
-import { cx as M } from "../../../utils/styles.js";
-const N = {
-  info: {
-    icon: /* @__PURE__ */ e("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
-      /* @__PURE__ */ r("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
-      /* @__PURE__ */ r("path", { d: "M9 8V12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
-      /* @__PURE__ */ r("circle", { cx: "9", cy: "5.5", r: "0.75", fill: "currentColor" })
-    ] }),
-    colors: {
-      subtle: {
-        backgroundColor: "var(--brycks-info-muted)",
-        color: "var(--brycks-info-default)",
-        borderColor: "transparent"
-      },
-      solid: {
-        backgroundColor: "var(--brycks-info-default)",
-        color: "var(--brycks-info-foreground)",
-        borderColor: "transparent"
-      },
-      outline: {
-        backgroundColor: "transparent",
-        color: "var(--brycks-info-default)",
-        borderColor: "var(--brycks-info-default)"
-      }
-    }
-  },
-  success: {
-    icon: /* @__PURE__ */ e("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
-      /* @__PURE__ */ r("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
-      /* @__PURE__ */ r("path", { d: "M6 9L8 11L12 7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
-    ] }),
-    colors: {
-      subtle: {
-        backgroundColor: "var(--brycks-success-muted)",
-        color: "var(--brycks-success-default)",
-        borderColor: "transparent"
-      },
-      solid: {
-        backgroundColor: "var(--brycks-success-default)",
-        color: "var(--brycks-success-foreground)",
-        borderColor: "transparent"
-      },
-      outline: {
-        backgroundColor: "transparent",
-        color: "var(--brycks-success-default)",
-        borderColor: "var(--brycks-success-default)"
-      }
-    }
-  },
-  warning: {
-    icon: /* @__PURE__ */ e("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
-      /* @__PURE__ */ r("path", { d: "M9 2L16.5 15H1.5L9 2Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
-      /* @__PURE__ */ r("path", { d: "M9 7V10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
-      /* @__PURE__ */ r("circle", { cx: "9", cy: "12.5", r: "0.75", fill: "currentColor" })
-    ] }),
-    colors: {
-      subtle: {
-        backgroundColor: "var(--brycks-warning-muted)",
-        color: "var(--brycks-warning-default)",
-        borderColor: "transparent"
-      },
-      solid: {
-        backgroundColor: "var(--brycks-warning-default)",
-        color: "var(--brycks-warning-foreground)",
-        borderColor: "transparent"
-      },
-      outline: {
-        backgroundColor: "transparent",
-        color: "var(--brycks-warning-default)",
-        borderColor: "var(--brycks-warning-default)"
-      }
-    }
-  },
-  error: {
-    icon: /* @__PURE__ */ e("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
-      /* @__PURE__ */ r("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
-      /* @__PURE__ */ r("path", { d: "M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
-    ] }),
-    colors: {
-      subtle: {
-        backgroundColor: "var(--brycks-error-muted)",
-        color: "var(--brycks-error-default)",
-        borderColor: "transparent"
-      },
-      solid: {
-        backgroundColor: "var(--brycks-error-default)",
-        color: "var(--brycks-error-foreground)",
-        borderColor: "transparent"
-      },
-      outline: {
-        backgroundColor: "transparent",
-        color: "var(--brycks-error-default)",
-        borderColor: "var(--brycks-error-default)"
-      }
-    }
-  }
-}, B = W(function({
-  intent: c = "info",
-  variant: t = "subtle",
-  title: n,
-  icon: u,
-  showIcon: k = !0,
-  action: a,
+import { forwardRef as y } from "react";
+import { cx as m } from "../../../utils/styles.js";
+const v = {
+  info: /* @__PURE__ */ e("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
+    /* @__PURE__ */ r("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ r("path", { d: "M9 8V12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+    /* @__PURE__ */ r("circle", { cx: "9", cy: "5.5", r: "0.75", fill: "currentColor" })
+  ] }),
+  success: /* @__PURE__ */ e("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
+    /* @__PURE__ */ r("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ r("path", { d: "M6 9L8 11L12 7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] }),
+  warning: /* @__PURE__ */ e("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
+    /* @__PURE__ */ r("path", { d: "M9 2L16.5 15H1.5L9 2Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }),
+    /* @__PURE__ */ r("path", { d: "M9 7V10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+    /* @__PURE__ */ r("circle", { cx: "9", cy: "12.5", r: "0.75", fill: "currentColor" })
+  ] }),
+  error: /* @__PURE__ */ e("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [
+    /* @__PURE__ */ r("circle", { cx: "9", cy: "9", r: "7.5", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ r("path", { d: "M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] })
+}, L = y(function({
+  intent: t = "info",
+  variant: l = "subtle",
+  title: o,
+  icon: n,
+  showIcon: d = !0,
+  action: c,
   isDismissible: i,
-  onDismiss: b,
-  className: y,
-  style: f,
-  testId: g,
-  children: l,
-  ...h
-}, p) {
-  const d = N[c], o = d.colors[t], C = {
-    display: "flex",
-    alignItems: "flex-start",
-    gap: 12,
-    padding: "12px 16px",
-    borderRadius: "var(--brycks-radius-default)",
-    border: `1px solid ${o.borderColor}`,
-    backgroundColor: o.backgroundColor,
-    color: t === "solid" ? o.color : "var(--brycks-foreground-default)",
-    ...f
-  }, v = {
-    flexShrink: 0,
-    color: o.color,
-    marginTop: 1
-  }, m = {
-    flex: 1,
-    minWidth: 0
-  }, x = {
-    fontSize: 14,
-    fontWeight: 600,
-    marginBottom: l ? 4 : 0,
-    color: o.color
-  }, w = {
-    fontSize: 14,
-    lineHeight: 1.5,
-    color: t === "solid" ? o.color : "var(--brycks-foreground-muted)"
-  }, L = {
-    display: "flex",
-    alignItems: "center",
-    gap: 8,
-    flexShrink: 0
-  }, S = {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: 24,
-    height: 24,
-    borderRadius: "var(--brycks-radius-sm)",
-    color: t === "solid" ? o.color : "var(--brycks-foreground-muted)",
-    transition: "all 150ms ease-out",
-    opacity: 0.7
-  };
+  onDismiss: a,
+  className: h,
+  style: k,
+  testId: u,
+  children: s,
+  ...p
+}, f) {
   return /* @__PURE__ */ e(
     "div",
     {
-      ref: p,
+      ref: f,
       role: "alert",
-      className: M(
+      className: m(
         "brycks-alert",
-        `brycks-alert--${c}`,
         `brycks-alert--${t}`,
-        y
+        `brycks-alert--${l}`,
+        h
       ),
-      style: C,
-      "data-testid": g,
-      ...h,
+      style: k,
+      "data-testid": u,
+      ...p,
       children: [
-        k && /* @__PURE__ */ r("span", { className: "brycks-alert-icon", style: v, children: u ?? d.icon }),
-        /* @__PURE__ */ e("div", { className: "brycks-alert-content", style: m, children: [
-          n && /* @__PURE__ */ r("div", { className: "brycks-alert-title", style: x, children: n }),
-          l && /* @__PURE__ */ r("div", { className: "brycks-alert-description", style: w, children: l })
+        d && /* @__PURE__ */ r("span", { className: "brycks-alert__icon", children: n ?? v[t] }),
+        /* @__PURE__ */ e("div", { className: "brycks-alert__content", children: [
+          o && /* @__PURE__ */ r("div", { className: "brycks-alert__title", children: o }),
+          s && /* @__PURE__ */ r("div", { className: "brycks-alert__description", children: s })
         ] }),
-        (a || i) && /* @__PURE__ */ e("div", { className: "brycks-alert-actions", style: L, children: [
-          a,
+        (c || i) && /* @__PURE__ */ e("div", { className: "brycks-alert__actions", children: [
+          c,
           i && /* @__PURE__ */ r(
             "button",
             {
               type: "button",
-              className: "brycks-alert-dismiss",
-              style: S,
-              onClick: b,
+              className: "brycks-alert__dismiss",
+              onClick: a,
               "aria-label": "Dismiss alert",
-              onMouseEnter: (s) => {
-                s.currentTarget.style.opacity = "1";
-              },
-              onMouseLeave: (s) => {
-                s.currentTarget.style.opacity = "0.7";
-              },
               children: /* @__PURE__ */ r("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ r("path", { d: "M3 3L11 11M11 3L3 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
             }
           )
@@ -197,8 +72,8 @@ const N = {
     }
   );
 });
-B.displayName = "Alert";
+L.displayName = "Alert";
 export {
-  B as Alert
+  L as Alert
 };
 //# sourceMappingURL=Alert.js.map

package/dist/components/feedback/Alert/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../../src/components/feedback/Alert/Alert.tsx"],"sourcesContent":["/**\r\n * Alert Component\r\n *\r\n * Contextual feedback message for user actions and states.\r\n * Clean design with subtle color coding and optional icons.\r\n */\r\n\r\nimport React, {\r\n  forwardRef,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type AlertIntent = 'info' | 'success' | 'warning' | 'error'\r\nexport type AlertVariant = 'subtle' | 'solid' | 'outline'\r\n\r\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\r\n  /** Visual intent/status */\r\n  intent?: AlertIntent\r\n  /** Visual variant */\r\n  variant?: AlertVariant\r\n  /** Alert title */\r\n  title?: ReactNode\r\n  /** Custom icon */\r\n  icon?: ReactNode\r\n  /** Whether to show default icon */\r\n  showIcon?: boolean\r\n  /** Action element (button, link) */\r\n  action?: ReactNode\r\n  /** Whether alert can be dismissed */\r\n  isDismissible?: boolean\r\n  /** Callback when dismissed */\r\n  onDismiss?: () => void\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Alert content */\r\n  children?: ReactNode\r\n}\r\n\r\nconst intentConfig: Record<AlertIntent, { icon: React.JSX.Element; colors: Record<AlertVariant, CSSProperties> }> = {\r\n  info: {\r\n    icon: (\r\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n        <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n        <path d=\"M9 8V12\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n        <circle cx=\"9\" cy=\"5.5\" r=\"0.75\" fill=\"currentColor\" />\r\n      </svg>\r\n    ),\r\n    colors: {\r\n      subtle: {\r\n        backgroundColor: 'var(--brycks-info-muted)',\r\n        color: 'var(--brycks-info-default)',\r\n        borderColor: 'transparent',\r\n      },\r\n      solid: {\r\n        backgroundColor: 'var(--brycks-info-default)',\r\n        color: 'var(--brycks-info-foreground)',\r\n        borderColor: 'transparent',\r\n      },\r\n      outline: {\r\n        backgroundColor: 'transparent',\r\n        color: 'var(--brycks-info-default)',\r\n        borderColor: 'var(--brycks-info-default)',\r\n      },\r\n    },\r\n  },\r\n  success: {\r\n    icon: (\r\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n        <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n        <path d=\"M6 9L8 11L12 7\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n      </svg>\r\n    ),\r\n    colors: {\r\n      subtle: {\r\n        backgroundColor: 'var(--brycks-success-muted)',\r\n        color: 'var(--brycks-success-default)',\r\n        borderColor: 'transparent',\r\n      },\r\n      solid: {\r\n        backgroundColor: 'var(--brycks-success-default)',\r\n        color: 'var(--brycks-success-foreground)',\r\n        borderColor: 'transparent',\r\n      },\r\n      outline: {\r\n        backgroundColor: 'transparent',\r\n        color: 'var(--brycks-success-default)',\r\n        borderColor: 'var(--brycks-success-default)',\r\n      },\r\n    },\r\n  },\r\n  warning: {\r\n    icon: (\r\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n        <path d=\"M9 2L16.5 15H1.5L9 2Z\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinejoin=\"round\" />\r\n        <path d=\"M9 7V10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n        <circle cx=\"9\" cy=\"12.5\" r=\"0.75\" fill=\"currentColor\" />\r\n      </svg>\r\n    ),\r\n    colors: {\r\n      subtle: {\r\n        backgroundColor: 'var(--brycks-warning-muted)',\r\n        color: 'var(--brycks-warning-default)',\r\n        borderColor: 'transparent',\r\n      },\r\n      solid: {\r\n        backgroundColor: 'var(--brycks-warning-default)',\r\n        color: 'var(--brycks-warning-foreground)',\r\n        borderColor: 'transparent',\r\n      },\r\n      outline: {\r\n        backgroundColor: 'transparent',\r\n        color: 'var(--brycks-warning-default)',\r\n        borderColor: 'var(--brycks-warning-default)',\r\n      },\r\n    },\r\n  },\r\n  error: {\r\n    icon: (\r\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n        <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n        <path d=\"M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n      </svg>\r\n    ),\r\n    colors: {\r\n      subtle: {\r\n        backgroundColor: 'var(--brycks-error-muted)',\r\n        color: 'var(--brycks-error-default)',\r\n        borderColor: 'transparent',\r\n      },\r\n      solid: {\r\n        backgroundColor: 'var(--brycks-error-default)',\r\n        color: 'var(--brycks-error-foreground)',\r\n        borderColor: 'transparent',\r\n      },\r\n      outline: {\r\n        backgroundColor: 'transparent',\r\n        color: 'var(--brycks-error-default)',\r\n        borderColor: 'var(--brycks-error-default)',\r\n      },\r\n    },\r\n  },\r\n}\r\n\r\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(\r\n  {\r\n    intent = 'info',\r\n    variant = 'subtle',\r\n    title,\r\n    icon,\r\n    showIcon = true,\r\n    action,\r\n    isDismissible,\r\n    onDismiss,\r\n    className,\r\n    style,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const config = intentConfig[intent]\r\n  const variantColors = config.colors[variant]\r\n\r\n  const alertStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'flex-start',\r\n    gap: 12,\r\n    padding: '12px 16px',\r\n    borderRadius: 'var(--brycks-radius-default)',\r\n    border: `1px solid ${variantColors.borderColor}`,\r\n    backgroundColor: variantColors.backgroundColor,\r\n    color: variant === 'solid' ? variantColors.color : 'var(--brycks-foreground-default)',\r\n    ...style,\r\n  }\r\n\r\n  const iconStyle: CSSProperties = {\r\n    flexShrink: 0,\r\n    color: variantColors.color,\r\n    marginTop: 1,\r\n  }\r\n\r\n  const contentStyle: CSSProperties = {\r\n    flex: 1,\r\n    minWidth: 0,\r\n  }\r\n\r\n  const titleStyle: CSSProperties = {\r\n    fontSize: 14,\r\n    fontWeight: 600,\r\n    marginBottom: children ? 4 : 0,\r\n    color: variant === 'solid' ? variantColors.color : variantColors.color,\r\n  }\r\n\r\n  const descriptionStyle: CSSProperties = {\r\n    fontSize: 14,\r\n    lineHeight: 1.5,\r\n    color: variant === 'solid' ? variantColors.color : 'var(--brycks-foreground-muted)',\r\n  }\r\n\r\n  const actionsStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    gap: 8,\r\n    flexShrink: 0,\r\n  }\r\n\r\n  const dismissButtonStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    width: 24,\r\n    height: 24,\r\n    borderRadius: 'var(--brycks-radius-sm)',\r\n    color: variant === 'solid' ? variantColors.color : 'var(--brycks-foreground-muted)',\r\n    transition: 'all 150ms ease-out',\r\n    opacity: 0.7,\r\n  }\r\n\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      role=\"alert\"\r\n      className={cx(\r\n        'brycks-alert',\r\n        `brycks-alert--${intent}`,\r\n        `brycks-alert--${variant}`,\r\n        className\r\n      )}\r\n      style={alertStyle}\r\n      data-testid={testId}\r\n      {...props}\r\n    >\r\n      {showIcon && (\r\n        <span className=\"brycks-alert-icon\" style={iconStyle}>\r\n          {icon ?? config.icon}\r\n        </span>\r\n      )}\r\n\r\n      <div className=\"brycks-alert-content\" style={contentStyle}>\r\n        {title && <div className=\"brycks-alert-title\" style={titleStyle}>{title}</div>}\r\n        {children && <div className=\"brycks-alert-description\" style={descriptionStyle}>{children}</div>}\r\n      </div>\r\n\r\n      {(action || isDismissible) && (\r\n        <div className=\"brycks-alert-actions\" style={actionsStyle}>\r\n          {action}\r\n          {isDismissible && (\r\n            <button\r\n              type=\"button\"\r\n              className=\"brycks-alert-dismiss\"\r\n              style={dismissButtonStyle}\r\n              onClick={onDismiss}\r\n              aria-label=\"Dismiss alert\"\r\n              onMouseEnter={(e) => { e.currentTarget.style.opacity = '1' }}\r\n              onMouseLeave={(e) => { e.currentTarget.style.opacity = '0.7' }}\r\n            >\r\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n                <path d=\"M3 3L11 11M11 3L3 11\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n              </svg>\r\n            </button>\r\n          )}\r\n        </div>\r\n      )}\r\n    </div>\r\n  )\r\n})\r\n\r\nAlert.displayName = 'Alert'\r\n"],"names":["intentConfig","jsxs","jsx","Alert","forwardRef","intent","variant","title","icon","showIcon","action","isDismissible","onDismiss","className","style","testId","children","props","ref","config","variantColors","alertStyle","iconStyle","contentStyle","titleStyle","descriptionStyle","actionsStyle","dismissButtonStyle","cx","e"],"mappings":"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"}
+{"version":3,"file":"Alert.js","sources":["../../../../src/components/feedback/Alert/Alert.tsx"],"sourcesContent":["/**\r\n * Alert Component\r\n *\r\n * Contextual feedback message for user actions and states.\r\n * Clean design with subtle color coding and optional icons.\r\n *\r\n * All color styles are handled via CSS classes for easy customization.\r\n */\r\n\r\nimport React, {\r\n  forwardRef,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { cx } from '../../../utils/styles'\r\n\r\nexport type AlertIntent = 'info' | 'success' | 'warning' | 'error'\r\nexport type AlertVariant = 'subtle' | 'solid' | 'outline'\r\n\r\nexport interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\r\n  /** Visual intent/status */\r\n  intent?: AlertIntent\r\n  /** Visual variant */\r\n  variant?: AlertVariant\r\n  /** Alert title */\r\n  title?: ReactNode\r\n  /** Custom icon */\r\n  icon?: ReactNode\r\n  /** Whether to show default icon */\r\n  showIcon?: boolean\r\n  /** Action element (button, link) */\r\n  action?: ReactNode\r\n  /** Whether alert can be dismissed */\r\n  isDismissible?: boolean\r\n  /** Callback when dismissed */\r\n  onDismiss?: () => void\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Alert content */\r\n  children?: ReactNode\r\n}\r\n\r\nconst defaultIcons: Record<AlertIntent, React.JSX.Element> = {\r\n  info: (\r\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n      <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n      <path d=\"M9 8V12\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n      <circle cx=\"9\" cy=\"5.5\" r=\"0.75\" fill=\"currentColor\" />\r\n    </svg>\r\n  ),\r\n  success: (\r\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n      <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n      <path d=\"M6 9L8 11L12 7\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\r\n    </svg>\r\n  ),\r\n  warning: (\r\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n      <path d=\"M9 2L16.5 15H1.5L9 2Z\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinejoin=\"round\" />\r\n      <path d=\"M9 7V10\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n      <circle cx=\"9\" cy=\"12.5\" r=\"0.75\" fill=\"currentColor\" />\r\n    </svg>\r\n  ),\r\n  error: (\r\n    <svg width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n      <circle cx=\"9\" cy=\"9\" r=\"7.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\r\n      <path d=\"M6.5 6.5L11.5 11.5M11.5 6.5L6.5 11.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n    </svg>\r\n  ),\r\n}\r\n\r\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(\r\n  {\r\n    intent = 'info',\r\n    variant = 'subtle',\r\n    title,\r\n    icon,\r\n    showIcon = true,\r\n    action,\r\n    isDismissible,\r\n    onDismiss,\r\n    className,\r\n    style,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      role=\"alert\"\r\n      className={cx(\r\n        'brycks-alert',\r\n        `brycks-alert--${intent}`,\r\n        `brycks-alert--${variant}`,\r\n        className\r\n      )}\r\n      style={style}\r\n      data-testid={testId}\r\n      {...props}\r\n    >\r\n      {showIcon && (\r\n        <span className=\"brycks-alert__icon\">\r\n          {icon ?? defaultIcons[intent]}\r\n        </span>\r\n      )}\r\n\r\n      <div className=\"brycks-alert__content\">\r\n        {title && <div className=\"brycks-alert__title\">{title}</div>}\r\n        {children && <div className=\"brycks-alert__description\">{children}</div>}\r\n      </div>\r\n\r\n      {(action || isDismissible) && (\r\n        <div className=\"brycks-alert__actions\">\r\n          {action}\r\n          {isDismissible && (\r\n            <button\r\n              type=\"button\"\r\n              className=\"brycks-alert__dismiss\"\r\n              onClick={onDismiss}\r\n              aria-label=\"Dismiss alert\"\r\n            >\r\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\r\n                <path d=\"M3 3L11 11M11 3L3 11\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" />\r\n              </svg>\r\n            </button>\r\n          )}\r\n        </div>\r\n      )}\r\n    </div>\r\n  )\r\n})\r\n\r\nAlert.displayName = 'Alert'\r\n"],"names":["defaultIcons","jsxs","jsx","Alert","forwardRef","intent","variant","title","icon","showIcon","action","isDismissible","onDismiss","className","style","testId","children","props","ref","cx"],"mappings":"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"}

package/dist/components/feedback/Modal/Modal.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("react"),A=require("react-dom"),P=require("../../../utils/styles.cjs"),E=require("../../../design-system/primitives/layout.cjs"),s=require("../../../design-system/tokens/spacing.cjs"),j=require("../../../design-system/tokens/typography.cjs"),F=require("../../../design-system/primitives/sizing.cjs"),G={sm:"400px",md:"500px",lg:"640px",xl:"800px",full:"calc(100vw - 48px)"},J=t.memo(function(){return r.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r.jsx("path",{d:"M4 4L12 12M12 4L4 12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})}),w=t.forwardRef(function({isOpen:n,onClose:o,size:c="md",title:l,description:u,closeOnOverlayClick:b=!0,closeOnEscape:v=!0,showCloseButton:k=!0,className:C,style:g,testId:R,children:q,...L},i){const y=t.useRef(null),f=t.useRef(null),d=t.useRef(!1);t.useEffect(()=>{n&&!d.current?(f.current=document.activeElement,d.current=!0):!n&&d.current&&(document.activeElement instanceof HTMLElement&&document.activeElement.blur(),f.current?.focus(),f.current=null,d.current=!1)},[n]);const x=t.useRef(o);t.useEffect(()=>{x.current=o},[o]),t.useEffect(()=>{if(!n)return;const e=y.current;e&&e.focus()},[n]),t.useEffect(()=>{if(!n)return;const e=y.current,p=a=>{if(a.key==="Escape"&&v){x.current();return}if(a.key==="Tab"&&e){const m=e.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),h=m[0],S=m[m.length-1];a.shiftKey&&document.activeElement===h?(a.preventDefault(),S?.focus()):!a.shiftKey&&document.activeElement===S&&(a.preventDefault(),h?.focus())}};return document.addEventListener("keydown",p),document.body.style.overflow="hidden",()=>{document.removeEventListener("keydown",p),document.body.style.overflow=""}},[n,v]);const T=t.useCallback(e=>{e.target===e.currentTarget&&b&&o()},[b,o]),z=t.useMemo(()=>({position:"fixed",inset:0,zIndex:"var(--brycks-z-modal)",display:"flex",alignItems:"center",justifyContent:"center",padding:s.spacing[6],backgroundColor:"var(--brycks-background-overlay)",backdropFilter:"blur(4px)",animation:"brycks-fade-in var(--brycks-duration-normal) var(--brycks-ease-out)"}),[]),I=t.useMemo(()=>({position:"relative",width:"100%",maxWidth:G[c],maxHeight:c==="full"?"calc(100vh - 48px)":"85vh",backgroundColor:"var(--brycks-background-elevated)",borderRadius:"var(--brycks-radius-xl)",boxShadow:"var(--brycks-shadow-2xl)",display:"flex",flexDirection:"column",overflow:"hidden",animation:"brycks-scale-in var(--brycks-duration-normal) var(--brycks-ease-spring)",outline:"none",...g}),[c,g]);if(!n)return null;const D={display:"flex",alignItems:"flex-start",justifyContent:"space-between",padding:`${s.spacing[5]}px ${s.spacing[6]}px`,borderBottom:"1px solid var(--brycks-border-muted)"},N={display:"flex",flexDirection:"column",gap:s.spacing[1]},B={fontSize:j.fontSizes.lg,fontWeight:600,color:"var(--brycks-foreground-default)",margin:0,lineHeight:1.3},W={fontSize:j.fontSizes.base,color:"var(--brycks-foreground-muted)",margin:0},H={display:"flex",alignItems:"center",justifyContent:"center",width:E.iconButtonSizes.sm,height:E.iconButtonSizes.sm,borderRadius:"var(--brycks-radius-md)",color:"var(--brycks-foreground-muted)",transition:"all var(--brycks-duration-fast) var(--brycks-ease-out)",marginLeft:F.componentGap.xl,flexShrink:0},K={flex:1,overflow:"auto",padding:s.spacing[6]},$=r.jsx("div",{className:"brycks-modal-overlay",style:z,onClick:T,children:r.jsxs("div",{ref:e=>{y.current=e,typeof i=="function"?i(e):i&&(i.current=e)},role:"dialog","aria-modal":"true","aria-labelledby":l?"brycks-modal-title":void 0,"aria-describedby":u?"brycks-modal-description":void 0,className:P.cx("brycks-modal",`brycks-modal--${c}`,C),style:I,tabIndex:-1,"data-testid":R,...L,children:[(l||k)&&r.jsxs("div",{className:"brycks-modal-header",style:D,children:[r.jsxs("div",{style:N,children:[l&&r.jsx("h2",{id:"brycks-modal-title",style:B,children:l}),u&&r.jsx("p",{id:"brycks-modal-description",style:W,children:u})]}),k&&r.jsx("button",{type:"button",className:"brycks-modal-close",style:H,onClick:o,"aria-label":"Close modal",onMouseEnter:e=>{e.currentTarget.style.backgroundColor="var(--brycks-background-muted)",e.currentTarget.style.color="var(--brycks-foreground-default)"},onMouseLeave:e=>{e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.color="var(--brycks-foreground-muted)"},children:r.jsx(J,{})})]}),r.jsx("div",{className:"brycks-modal-content",style:K,children:q})]})});return A.createPortal($,document.body)});w.displayName="Modal";exports.Modal=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("react"),A=require("react-dom"),P=require("../../../utils/styles.cjs"),E=require("../../../design-system/primitives/layout.cjs"),s=require("../../../design-system/tokens/spacing.cjs"),j=require("../../../design-system/tokens/typography.cjs"),F=require("../../../design-system/primitives/sizing.cjs"),G={sm:"400px",md:"500px",lg:"640px",xl:"800px","2xl":"1200px",full:"calc(100vw - 48px)"},J=t.memo(function(){return r.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:r.jsx("path",{d:"M4 4L12 12M12 4L4 12",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})}),w=t.forwardRef(function({isOpen:n,onClose:o,size:c="md",title:l,description:u,closeOnOverlayClick:b=!0,closeOnEscape:v=!0,showCloseButton:k=!0,className:C,style:g,testId:R,children:q,...L},i){const y=t.useRef(null),f=t.useRef(null),d=t.useRef(!1);t.useEffect(()=>{n&&!d.current?(f.current=document.activeElement,d.current=!0):!n&&d.current&&(document.activeElement instanceof HTMLElement&&document.activeElement.blur(),f.current?.focus(),f.current=null,d.current=!1)},[n]);const x=t.useRef(o);t.useEffect(()=>{x.current=o},[o]),t.useEffect(()=>{if(!n)return;const e=y.current;e&&e.focus()},[n]),t.useEffect(()=>{if(!n)return;const e=y.current,p=a=>{if(a.key==="Escape"&&v){x.current();return}if(a.key==="Tab"&&e){const m=e.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),h=m[0],S=m[m.length-1];a.shiftKey&&document.activeElement===h?(a.preventDefault(),S?.focus()):!a.shiftKey&&document.activeElement===S&&(a.preventDefault(),h?.focus())}};return document.addEventListener("keydown",p),document.body.style.overflow="hidden",()=>{document.removeEventListener("keydown",p),document.body.style.overflow=""}},[n,v]);const T=t.useCallback(e=>{e.target===e.currentTarget&&b&&o()},[b,o]),z=t.useMemo(()=>({position:"fixed",inset:0,zIndex:"var(--brycks-z-modal)",display:"flex",alignItems:"center",justifyContent:"center",padding:s.spacing[6],backgroundColor:"var(--brycks-background-overlay)",backdropFilter:"blur(4px)",animation:"brycks-fade-in var(--brycks-duration-normal) var(--brycks-ease-out)"}),[]),I=t.useMemo(()=>({position:"relative",width:"100%",maxWidth:G[c],maxHeight:c==="full"?"calc(100vh - 48px)":"85vh",backgroundColor:"var(--brycks-background-elevated)",borderRadius:"var(--brycks-radius-xl)",boxShadow:"var(--brycks-shadow-2xl)",display:"flex",flexDirection:"column",overflow:"hidden",animation:"brycks-scale-in var(--brycks-duration-normal) var(--brycks-ease-spring)",outline:"none",...g}),[c,g]);if(!n)return null;const D={display:"flex",alignItems:"flex-start",justifyContent:"space-between",padding:`${s.spacing[5]}px ${s.spacing[6]}px`,borderBottom:"1px solid var(--brycks-border-muted)"},N={display:"flex",flexDirection:"column",gap:s.spacing[1]},B={fontSize:j.fontSizes.lg,fontWeight:600,color:"var(--brycks-foreground-default)",margin:0,lineHeight:1.3},W={fontSize:j.fontSizes.base,color:"var(--brycks-foreground-muted)",margin:0},H={display:"flex",alignItems:"center",justifyContent:"center",width:E.iconButtonSizes.sm,height:E.iconButtonSizes.sm,borderRadius:"var(--brycks-radius-md)",color:"var(--brycks-foreground-muted)",transition:"all var(--brycks-duration-fast) var(--brycks-ease-out)",marginLeft:F.componentGap.xl,flexShrink:0},K={flex:1,overflow:"auto",padding:s.spacing[6]},$=r.jsx("div",{className:"brycks-modal-overlay",style:z,onClick:T,children:r.jsxs("div",{ref:e=>{y.current=e,typeof i=="function"?i(e):i&&(i.current=e)},role:"dialog","aria-modal":"true","aria-labelledby":l?"brycks-modal-title":void 0,"aria-describedby":u?"brycks-modal-description":void 0,className:P.cx("brycks-modal",`brycks-modal--${c}`,C),style:I,tabIndex:-1,"data-testid":R,...L,children:[(l||k)&&r.jsxs("div",{className:"brycks-modal-header",style:D,children:[r.jsxs("div",{style:N,children:[l&&r.jsx("h2",{id:"brycks-modal-title",style:B,children:l}),u&&r.jsx("p",{id:"brycks-modal-description",style:W,children:u})]}),k&&r.jsx("button",{type:"button",className:"brycks-modal-close",style:H,onClick:o,"aria-label":"Close modal",onMouseEnter:e=>{e.currentTarget.style.backgroundColor="var(--brycks-background-muted)",e.currentTarget.style.color="var(--brycks-foreground-default)"},onMouseLeave:e=>{e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.color="var(--brycks-foreground-muted)"},children:r.jsx(J,{})})]}),r.jsx("div",{className:"brycks-modal-content",style:K,children:q})]})});return A.createPortal($,document.body)});w.displayName="Modal";exports.Modal=w;
 //# sourceMappingURL=Modal.cjs.map

package/dist/components/feedback/Modal/Modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","sources":["../../../../src/components/feedback/Modal/Modal.tsx"],"sourcesContent":["/**\r\n * Modal Component\r\n *\r\n * Accessible modal dialog with smooth Apple-inspired animations.\r\n * Supports focus trapping and keyboard navigation.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useEffect,\r\n  useRef,\r\n  useCallback,\r\n  useMemo,\r\n  memo,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { createPortal } from 'react-dom'\r\nimport { cx } from '../../../utils/styles'\r\nimport { spacing, fontSizes } from '../../../design-system'\r\nimport { componentGap, iconButtonSizes } from '../../../design-system/primitives'\r\n\r\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'\r\n\r\nexport interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\r\n  /** Whether the modal is open */\r\n  isOpen: boolean\r\n  /** Callback when modal should close */\r\n  onClose: () => void\r\n  /** Modal size */\r\n  size?: ModalSize\r\n  /** Modal title */\r\n  title?: ReactNode\r\n  /** Modal description */\r\n  description?: ReactNode\r\n  /** Whether to close on overlay click */\r\n  closeOnOverlayClick?: boolean\r\n  /** Whether to close on escape key */\r\n  closeOnEscape?: boolean\r\n  /** Whether to show close button */\r\n  showCloseButton?: boolean\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Modal content */\r\n  children?: ReactNode\r\n}\r\n\r\nconst sizeWidths: Record<ModalSize, string> = {\r\n  sm: '400px',\r\n  md: '500px',\r\n  lg: '640px',\r\n  xl: '800px',\r\n  full: 'calc(100vw - 48px)',\r\n}\r\n\r\n/** Close icon - memoized to prevent re-renders */\r\nconst CloseIcon = memo(function CloseIcon() {\r\n  return (\r\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M4 4L12 12M12 4L4 12\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"1.5\"\r\n        strokeLinecap=\"round\"\r\n      />\r\n    </svg>\r\n  )\r\n})\r\n\r\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(\r\n  {\r\n    isOpen,\r\n    onClose,\r\n    size = 'md',\r\n    title,\r\n    description,\r\n    closeOnOverlayClick = true,\r\n    closeOnEscape = true,\r\n    showCloseButton = true,\r\n    className,\r\n    style,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const modalRef = useRef<HTMLDivElement>(null)\r\n  const previousActiveElement = useRef<HTMLElement | null>(null)\r\n  const wasOpen = useRef(false)\r\n\r\n  // Track previous open state to handle focus restoration before unmount\r\n  useEffect(() => {\r\n    // Modal just opened\r\n    if (isOpen && !wasOpen.current) {\r\n      previousActiveElement.current = document.activeElement as HTMLElement\r\n      wasOpen.current = true\r\n    }\r\n    // Modal is about to close - restore focus BEFORE unmount\r\n    else if (!isOpen && wasOpen.current) {\r\n      // Blur any focused element inside modal to prevent aria-hidden warning\r\n      if (document.activeElement instanceof HTMLElement) {\r\n        document.activeElement.blur()\r\n      }\r\n      // Restore focus to previous element\r\n      previousActiveElement.current?.focus()\r\n      previousActiveElement.current = null\r\n      wasOpen.current = false\r\n    }\r\n  }, [isOpen])\r\n\r\n  // Store onClose in a ref to avoid re-running effects when it changes\r\n  const onCloseRef = useRef(onClose)\r\n  useEffect(() => {\r\n    onCloseRef.current = onClose\r\n  }, [onClose])\r\n\r\n  // Focus modal when it opens (only once)\r\n  useEffect(() => {\r\n    if (!isOpen) return\r\n\r\n    const modal = modalRef.current\r\n    if (modal) {\r\n      modal.focus()\r\n    }\r\n  }, [isOpen])\r\n\r\n  // Keyboard handling and body scroll lock\r\n  useEffect(() => {\r\n    if (!isOpen) return\r\n\r\n    const modal = modalRef.current\r\n\r\n    const handleKeyDown = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape' && closeOnEscape) {\r\n        onCloseRef.current()\r\n        return\r\n      }\r\n\r\n      if (e.key === 'Tab' && modal) {\r\n        const focusableElements = modal.querySelectorAll<HTMLElement>(\r\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\r\n        )\r\n        const firstElement = focusableElements[0]\r\n        const lastElement = focusableElements[focusableElements.length - 1]\r\n\r\n        if (e.shiftKey && document.activeElement === firstElement) {\r\n          e.preventDefault()\r\n          lastElement?.focus()\r\n        } else if (!e.shiftKey && document.activeElement === lastElement) {\r\n          e.preventDefault()\r\n          firstElement?.focus()\r\n        }\r\n      }\r\n    }\r\n\r\n    document.addEventListener('keydown', handleKeyDown)\r\n    document.body.style.overflow = 'hidden'\r\n\r\n    return () => {\r\n      document.removeEventListener('keydown', handleKeyDown)\r\n      document.body.style.overflow = ''\r\n    }\r\n  }, [isOpen, closeOnEscape])\r\n\r\n  const handleOverlayClick = useCallback(\r\n    (e: React.MouseEvent) => {\r\n      if (e.target === e.currentTarget && closeOnOverlayClick) {\r\n        onClose()\r\n      }\r\n    },\r\n    [closeOnOverlayClick, onClose]\r\n  )\r\n\r\n  // Memoize styles to prevent object recreation on every render\r\n  const overlayStyle = useMemo<CSSProperties>(() => ({\r\n    position: 'fixed',\r\n    inset: 0,\r\n    zIndex: 'var(--brycks-z-modal)',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    padding: spacing[6],\r\n    backgroundColor: 'var(--brycks-background-overlay)',\r\n    backdropFilter: 'blur(4px)',\r\n    animation: 'brycks-fade-in var(--brycks-duration-normal) var(--brycks-ease-out)',\r\n  }), [])\r\n\r\n  const modalStyle = useMemo<CSSProperties>(() => ({\r\n    position: 'relative',\r\n    width: '100%',\r\n    maxWidth: sizeWidths[size],\r\n    maxHeight: size === 'full' ? 'calc(100vh - 48px)' : '85vh',\r\n    backgroundColor: 'var(--brycks-background-elevated)',\r\n    borderRadius: 'var(--brycks-radius-xl)',\r\n    boxShadow: 'var(--brycks-shadow-2xl)',\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    overflow: 'hidden',\r\n    animation: 'brycks-scale-in var(--brycks-duration-normal) var(--brycks-ease-spring)',\r\n    outline: 'none',\r\n    ...style,\r\n  }), [size, style])\r\n\r\n  if (!isOpen) return null\r\n\r\n  const headerStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'flex-start',\r\n    justifyContent: 'space-between',\r\n    padding: `${spacing[5]}px ${spacing[6]}px`,\r\n    borderBottom: '1px solid var(--brycks-border-muted)',\r\n  }\r\n\r\n  const titleContainerStyle: CSSProperties = {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    gap: spacing[1],\r\n  }\r\n\r\n  const titleStyle: CSSProperties = {\r\n    fontSize: fontSizes.lg,\r\n    fontWeight: 600,\r\n    color: 'var(--brycks-foreground-default)',\r\n    margin: 0,\r\n    lineHeight: 1.3,\r\n  }\r\n\r\n  const descriptionStyle: CSSProperties = {\r\n    fontSize: fontSizes.base,\r\n    color: 'var(--brycks-foreground-muted)',\r\n    margin: 0,\r\n  }\r\n\r\n  const closeButtonStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    width: iconButtonSizes.sm,\r\n    height: iconButtonSizes.sm,\r\n    borderRadius: 'var(--brycks-radius-md)',\r\n    color: 'var(--brycks-foreground-muted)',\r\n    transition: 'all var(--brycks-duration-fast) var(--brycks-ease-out)',\r\n    marginLeft: componentGap.xl,\r\n    flexShrink: 0,\r\n  }\r\n\r\n  const contentStyle: CSSProperties = {\r\n    flex: 1,\r\n    overflow: 'auto',\r\n    padding: spacing[6],\r\n  }\r\n\r\n  const modalContent = (\r\n    <div\r\n        className=\"brycks-modal-overlay\"\r\n        style={overlayStyle}\r\n        onClick={handleOverlayClick}\r\n      >\r\n        <div\r\n          ref={(node) => {\r\n            (modalRef as React.MutableRefObject<HTMLDivElement | null>).current = node\r\n            if (typeof ref === 'function') ref(node)\r\n            else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\r\n          }}\r\n          role=\"dialog\"\r\n          aria-modal=\"true\"\r\n          aria-labelledby={title ? 'brycks-modal-title' : undefined}\r\n          aria-describedby={description ? 'brycks-modal-description' : undefined}\r\n          className={cx('brycks-modal', `brycks-modal--${size}`, className)}\r\n          style={modalStyle}\r\n          tabIndex={-1}\r\n          data-testid={testId}\r\n          {...props}\r\n        >\r\n          {(title || showCloseButton) && (\r\n            <div className=\"brycks-modal-header\" style={headerStyle}>\r\n              <div style={titleContainerStyle}>\r\n                {title && (\r\n                  <h2 id=\"brycks-modal-title\" style={titleStyle}>\r\n                    {title}\r\n                  </h2>\r\n                )}\r\n                {description && (\r\n                  <p id=\"brycks-modal-description\" style={descriptionStyle}>\r\n                    {description}\r\n                  </p>\r\n                )}\r\n              </div>\r\n              {showCloseButton && (\r\n                <button\r\n                  type=\"button\"\r\n                  className=\"brycks-modal-close\"\r\n                  style={closeButtonStyle}\r\n                  onClick={onClose}\r\n                  aria-label=\"Close modal\"\r\n                  onMouseEnter={(e) => {\r\n                    e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\r\n                    e.currentTarget.style.color = 'var(--brycks-foreground-default)'\r\n                  }}\r\n                  onMouseLeave={(e) => {\r\n                    e.currentTarget.style.backgroundColor = 'transparent'\r\n                    e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\r\n                  }}\r\n                >\r\n                  <CloseIcon />\r\n                </button>\r\n              )}\r\n            </div>\r\n          )}\r\n\r\n          <div className=\"brycks-modal-content\" style={contentStyle}>\r\n            {children}\r\n          </div>\r\n        </div>\r\n      </div>\r\n  )\r\n\r\n  return createPortal(modalContent, document.body)\r\n})\r\n\r\nModal.displayName = 'Modal'\r\n"],"names":["sizeWidths","CloseIcon","memo","jsx","Modal","forwardRef","isOpen","onClose","size","title","description","closeOnOverlayClick","closeOnEscape","showCloseButton","className","style","testId","children","props","ref","modalRef","useRef","previousActiveElement","wasOpen","useEffect","onCloseRef","modal","handleKeyDown","e","focusableElements","firstElement","lastElement","handleOverlayClick","useCallback","overlayStyle","useMemo","spacing","modalStyle","headerStyle","titleContainerStyle","titleStyle","fontSizes","descriptionStyle","closeButtonStyle","iconButtonSizes","componentGap","contentStyle","modalContent","jsxs","node","cx","createPortal"],"mappings":"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"}
+{"version":3,"file":"Modal.cjs","sources":["../../../../src/components/feedback/Modal/Modal.tsx"],"sourcesContent":["/**\r\n * Modal Component\r\n *\r\n * Accessible modal dialog with smooth Apple-inspired animations.\r\n * Supports focus trapping and keyboard navigation.\r\n */\r\n\r\nimport {\r\n  forwardRef,\r\n  useEffect,\r\n  useRef,\r\n  useCallback,\r\n  useMemo,\r\n  memo,\r\n  type CSSProperties,\r\n  type ReactNode,\r\n  type HTMLAttributes,\r\n} from 'react'\r\nimport { createPortal } from 'react-dom'\r\nimport { cx } from '../../../utils/styles'\r\nimport { spacing, fontSizes } from '../../../design-system'\r\nimport { componentGap, iconButtonSizes } from '../../../design-system/primitives'\r\n\r\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'\r\n\r\nexport interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\r\n  /** Whether the modal is open */\r\n  isOpen: boolean\r\n  /** Callback when modal should close */\r\n  onClose: () => void\r\n  /** Modal size */\r\n  size?: ModalSize\r\n  /** Modal title */\r\n  title?: ReactNode\r\n  /** Modal description */\r\n  description?: ReactNode\r\n  /** Whether to close on overlay click */\r\n  closeOnOverlayClick?: boolean\r\n  /** Whether to close on escape key */\r\n  closeOnEscape?: boolean\r\n  /** Whether to show close button */\r\n  showCloseButton?: boolean\r\n  /** Custom class name */\r\n  className?: string\r\n  /** Test ID */\r\n  testId?: string\r\n  /** Modal content */\r\n  children?: ReactNode\r\n}\r\n\r\nconst sizeWidths: Record<ModalSize, string> = {\r\n  sm: '400px',\r\n  md: '500px',\r\n  lg: '640px',\r\n  xl: '800px',\r\n  '2xl': '1200px',\r\n  full: 'calc(100vw - 48px)',\r\n}\r\n\r\n/** Close icon - memoized to prevent re-renders */\r\nconst CloseIcon = memo(function CloseIcon() {\r\n  return (\r\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\r\n      <path\r\n        d=\"M4 4L12 12M12 4L4 12\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth=\"1.5\"\r\n        strokeLinecap=\"round\"\r\n      />\r\n    </svg>\r\n  )\r\n})\r\n\r\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(\r\n  {\r\n    isOpen,\r\n    onClose,\r\n    size = 'md',\r\n    title,\r\n    description,\r\n    closeOnOverlayClick = true,\r\n    closeOnEscape = true,\r\n    showCloseButton = true,\r\n    className,\r\n    style,\r\n    testId,\r\n    children,\r\n    ...props\r\n  },\r\n  ref\r\n) {\r\n  const modalRef = useRef<HTMLDivElement>(null)\r\n  const previousActiveElement = useRef<HTMLElement | null>(null)\r\n  const wasOpen = useRef(false)\r\n\r\n  // Track previous open state to handle focus restoration before unmount\r\n  useEffect(() => {\r\n    // Modal just opened\r\n    if (isOpen && !wasOpen.current) {\r\n      previousActiveElement.current = document.activeElement as HTMLElement\r\n      wasOpen.current = true\r\n    }\r\n    // Modal is about to close - restore focus BEFORE unmount\r\n    else if (!isOpen && wasOpen.current) {\r\n      // Blur any focused element inside modal to prevent aria-hidden warning\r\n      if (document.activeElement instanceof HTMLElement) {\r\n        document.activeElement.blur()\r\n      }\r\n      // Restore focus to previous element\r\n      previousActiveElement.current?.focus()\r\n      previousActiveElement.current = null\r\n      wasOpen.current = false\r\n    }\r\n  }, [isOpen])\r\n\r\n  // Store onClose in a ref to avoid re-running effects when it changes\r\n  const onCloseRef = useRef(onClose)\r\n  useEffect(() => {\r\n    onCloseRef.current = onClose\r\n  }, [onClose])\r\n\r\n  // Focus modal when it opens (only once)\r\n  useEffect(() => {\r\n    if (!isOpen) return\r\n\r\n    const modal = modalRef.current\r\n    if (modal) {\r\n      modal.focus()\r\n    }\r\n  }, [isOpen])\r\n\r\n  // Keyboard handling and body scroll lock\r\n  useEffect(() => {\r\n    if (!isOpen) return\r\n\r\n    const modal = modalRef.current\r\n\r\n    const handleKeyDown = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape' && closeOnEscape) {\r\n        onCloseRef.current()\r\n        return\r\n      }\r\n\r\n      if (e.key === 'Tab' && modal) {\r\n        const focusableElements = modal.querySelectorAll<HTMLElement>(\r\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\r\n        )\r\n        const firstElement = focusableElements[0]\r\n        const lastElement = focusableElements[focusableElements.length - 1]\r\n\r\n        if (e.shiftKey && document.activeElement === firstElement) {\r\n          e.preventDefault()\r\n          lastElement?.focus()\r\n        } else if (!e.shiftKey && document.activeElement === lastElement) {\r\n          e.preventDefault()\r\n          firstElement?.focus()\r\n        }\r\n      }\r\n    }\r\n\r\n    document.addEventListener('keydown', handleKeyDown)\r\n    document.body.style.overflow = 'hidden'\r\n\r\n    return () => {\r\n      document.removeEventListener('keydown', handleKeyDown)\r\n      document.body.style.overflow = ''\r\n    }\r\n  }, [isOpen, closeOnEscape])\r\n\r\n  const handleOverlayClick = useCallback(\r\n    (e: React.MouseEvent) => {\r\n      if (e.target === e.currentTarget && closeOnOverlayClick) {\r\n        onClose()\r\n      }\r\n    },\r\n    [closeOnOverlayClick, onClose]\r\n  )\r\n\r\n  // Memoize styles to prevent object recreation on every render\r\n  const overlayStyle = useMemo<CSSProperties>(() => ({\r\n    position: 'fixed',\r\n    inset: 0,\r\n    zIndex: 'var(--brycks-z-modal)',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    padding: spacing[6],\r\n    backgroundColor: 'var(--brycks-background-overlay)',\r\n    backdropFilter: 'blur(4px)',\r\n    animation: 'brycks-fade-in var(--brycks-duration-normal) var(--brycks-ease-out)',\r\n  }), [])\r\n\r\n  const modalStyle = useMemo<CSSProperties>(() => ({\r\n    position: 'relative',\r\n    width: '100%',\r\n    maxWidth: sizeWidths[size],\r\n    maxHeight: size === 'full' ? 'calc(100vh - 48px)' : '85vh',\r\n    backgroundColor: 'var(--brycks-background-elevated)',\r\n    borderRadius: 'var(--brycks-radius-xl)',\r\n    boxShadow: 'var(--brycks-shadow-2xl)',\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    overflow: 'hidden',\r\n    animation: 'brycks-scale-in var(--brycks-duration-normal) var(--brycks-ease-spring)',\r\n    outline: 'none',\r\n    ...style,\r\n  }), [size, style])\r\n\r\n  if (!isOpen) return null\r\n\r\n  const headerStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'flex-start',\r\n    justifyContent: 'space-between',\r\n    padding: `${spacing[5]}px ${spacing[6]}px`,\r\n    borderBottom: '1px solid var(--brycks-border-muted)',\r\n  }\r\n\r\n  const titleContainerStyle: CSSProperties = {\r\n    display: 'flex',\r\n    flexDirection: 'column',\r\n    gap: spacing[1],\r\n  }\r\n\r\n  const titleStyle: CSSProperties = {\r\n    fontSize: fontSizes.lg,\r\n    fontWeight: 600,\r\n    color: 'var(--brycks-foreground-default)',\r\n    margin: 0,\r\n    lineHeight: 1.3,\r\n  }\r\n\r\n  const descriptionStyle: CSSProperties = {\r\n    fontSize: fontSizes.base,\r\n    color: 'var(--brycks-foreground-muted)',\r\n    margin: 0,\r\n  }\r\n\r\n  const closeButtonStyle: CSSProperties = {\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    width: iconButtonSizes.sm,\r\n    height: iconButtonSizes.sm,\r\n    borderRadius: 'var(--brycks-radius-md)',\r\n    color: 'var(--brycks-foreground-muted)',\r\n    transition: 'all var(--brycks-duration-fast) var(--brycks-ease-out)',\r\n    marginLeft: componentGap.xl,\r\n    flexShrink: 0,\r\n  }\r\n\r\n  const contentStyle: CSSProperties = {\r\n    flex: 1,\r\n    overflow: 'auto',\r\n    padding: spacing[6],\r\n  }\r\n\r\n  const modalContent = (\r\n    <div\r\n        className=\"brycks-modal-overlay\"\r\n        style={overlayStyle}\r\n        onClick={handleOverlayClick}\r\n      >\r\n        <div\r\n          ref={(node) => {\r\n            (modalRef as React.MutableRefObject<HTMLDivElement | null>).current = node\r\n            if (typeof ref === 'function') ref(node)\r\n            else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\r\n          }}\r\n          role=\"dialog\"\r\n          aria-modal=\"true\"\r\n          aria-labelledby={title ? 'brycks-modal-title' : undefined}\r\n          aria-describedby={description ? 'brycks-modal-description' : undefined}\r\n          className={cx('brycks-modal', `brycks-modal--${size}`, className)}\r\n          style={modalStyle}\r\n          tabIndex={-1}\r\n          data-testid={testId}\r\n          {...props}\r\n        >\r\n          {(title || showCloseButton) && (\r\n            <div className=\"brycks-modal-header\" style={headerStyle}>\r\n              <div style={titleContainerStyle}>\r\n                {title && (\r\n                  <h2 id=\"brycks-modal-title\" style={titleStyle}>\r\n                    {title}\r\n                  </h2>\r\n                )}\r\n                {description && (\r\n                  <p id=\"brycks-modal-description\" style={descriptionStyle}>\r\n                    {description}\r\n                  </p>\r\n                )}\r\n              </div>\r\n              {showCloseButton && (\r\n                <button\r\n                  type=\"button\"\r\n                  className=\"brycks-modal-close\"\r\n                  style={closeButtonStyle}\r\n                  onClick={onClose}\r\n                  aria-label=\"Close modal\"\r\n                  onMouseEnter={(e) => {\r\n                    e.currentTarget.style.backgroundColor = 'var(--brycks-background-muted)'\r\n                    e.currentTarget.style.color = 'var(--brycks-foreground-default)'\r\n                  }}\r\n                  onMouseLeave={(e) => {\r\n                    e.currentTarget.style.backgroundColor = 'transparent'\r\n                    e.currentTarget.style.color = 'var(--brycks-foreground-muted)'\r\n                  }}\r\n                >\r\n                  <CloseIcon />\r\n                </button>\r\n              )}\r\n            </div>\r\n          )}\r\n\r\n          <div className=\"brycks-modal-content\" style={contentStyle}>\r\n            {children}\r\n          </div>\r\n        </div>\r\n      </div>\r\n  )\r\n\r\n  return createPortal(modalContent, document.body)\r\n})\r\n\r\nModal.displayName = 'Modal'\r\n"],"names":["sizeWidths","CloseIcon","memo","jsx","Modal","forwardRef","isOpen","onClose","size","title","description","closeOnOverlayClick","closeOnEscape","showCloseButton","className","style","testId","children","props","ref","modalRef","useRef","previousActiveElement","wasOpen","useEffect","onCloseRef","modal","handleKeyDown","e","focusableElements","firstElement","lastElement","handleOverlayClick","useCallback","overlayStyle","useMemo","spacing","modalStyle","headerStyle","titleContainerStyle","titleStyle","fontSizes","descriptionStyle","closeButtonStyle","iconButtonSizes","componentGap","contentStyle","modalContent","jsxs","node","cx","createPortal"],"mappings":"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"}

package/dist/components/feedback/Modal/Modal.js

@@ -11,6 +11,7 @@ const X = {
   md: "500px",
   lg: "640px",
   xl: "800px",
+  "2xl": "1200px",
   full: "calc(100vw - 48px)"
 }, Y = J(function() {
   return /* @__PURE__ */ r("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ r(
@@ -32,7 +33,7 @@ const X = {
   closeOnEscape: p = !0,
   showCloseButton: g = !0,
   className: T,
-  style: h,
+  style: x,
   testId: N,
   children: R,
   ...j
@@ -41,9 +42,9 @@ const X = {
   u(() => {
     t && !i.current ? (y.current = document.activeElement, i.current = !0) : !t && i.current && (document.activeElement instanceof HTMLElement && document.activeElement.blur(), y.current?.focus(), y.current = null, i.current = !1);
   }, [t]);
-  const x = d(o);
+  const h = d(o);
   u(() => {
-    x.current = o;
+    h.current = o;
   }, [o]), u(() => {
     if (!t) return;
     const e = f.current;
@@ -52,7 +53,7 @@ const X = {
     if (!t) return;
     const e = f.current, w = (n) => {
       if (n.key === "Escape" && p) {
-        x.current();
+        h.current();
         return;
       }
       if (n.key === "Tab" && e) {
@@ -95,8 +96,8 @@ const X = {
     overflow: "hidden",
     animation: "brycks-scale-in var(--brycks-duration-normal) var(--brycks-ease-spring)",
     outline: "none",
-    ...h
-  }), [l, h]);
+    ...x
+  }), [l, x]);
   if (!t) return null;
   const B = {
     display: "flex",