@aurora-ds/components 1.1.2 → 1.1.4

package/dist/esm/index.js

@@ -7,13 +7,12 @@ import { createPortal } from 'react-dom';
 function _extends$8() { return _extends$8 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$8.apply(null, arguments); }
 const AlertErrorIcon = props => /*#__PURE__*/React.createElement("svg", _extends$8({
   xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
   strokeLinejoin: "round",
-  strokeWidth: 2
+  strokeWidth: 2,
+  viewBox: "0 0 24 24"
 }, props), /*#__PURE__*/React.createElement("circle", {
   cx: 12,
   cy: 12,
@@ -25,13 +24,12 @@ const AlertErrorIcon = props => /*#__PURE__*/React.createElement("svg", _extends
 function _extends$7() { return _extends$7 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$7.apply(null, arguments); }
 const AlertInfoIcon = props => /*#__PURE__*/React.createElement("svg", _extends$7({
   xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
   strokeLinejoin: "round",
-  strokeWidth: 2
+  strokeWidth: 2,
+  viewBox: "0 0 24 24"
 }, props), /*#__PURE__*/React.createElement("circle", {
   cx: 12,
   cy: 12,
@@ -43,13 +41,12 @@ const AlertInfoIcon = props => /*#__PURE__*/React.createElement("svg", _extends$
 function _extends$6() { return _extends$6 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$6.apply(null, arguments); }
 const AlertSuccessIcon = props => /*#__PURE__*/React.createElement("svg", _extends$6({
   xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
   strokeLinejoin: "round",
-  strokeWidth: 2
+  strokeWidth: 2,
+  viewBox: "0 0 24 24"
 }, props), /*#__PURE__*/React.createElement("circle", {
   cx: 12,
   cy: 12,
@@ -61,13 +58,12 @@ const AlertSuccessIcon = props => /*#__PURE__*/React.createElement("svg", _exten
 function _extends$5() { return _extends$5 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$5.apply(null, arguments); }
 const AlertWarningIcon = props => /*#__PURE__*/React.createElement("svg", _extends$5({
   xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
   strokeLinejoin: "round",
-  strokeWidth: 2
+  strokeWidth: 2,
+  viewBox: "0 0 24 24"
 }, props), /*#__PURE__*/React.createElement("path", {
   d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4M12 17h.01"
 }));
@@ -75,14 +71,13 @@ const AlertWarningIcon = props => /*#__PURE__*/React.createElement("svg", _exten
 function _extends$4() { return _extends$4 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$4.apply(null, arguments); }
 const ChevronDownIcon = props => /*#__PURE__*/React.createElement("svg", _extends$4({
   xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
   strokeLinejoin: "round",
   strokeWidth: 2,
-  className: "prefix__lucide prefix__lucide-chevron-down-icon prefix__lucide-chevron-down"
+  className: "lucide lucide-chevron-down-icon lucide-chevron-down",
+  viewBox: "0 0 24 24"
 }, props), /*#__PURE__*/React.createElement("path", {
   d: "m6 9 6 6 6-6"
 }));
@@ -104,14 +99,13 @@ const CloseIcon = props => /*#__PURE__*/React.createElement("svg", _extends$3({
 function _extends$2() { return _extends$2 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$2.apply(null, arguments); }
 const EyeIcon = props => /*#__PURE__*/React.createElement("svg", _extends$2({
   xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
   strokeLinejoin: "round",
   strokeWidth: 2,
-  className: "prefix__lucide prefix__lucide-eye-icon prefix__lucide-eye"
+  className: "lucide lucide-eye-icon lucide-eye",
+  viewBox: "0 0 24 24"
 }, props), /*#__PURE__*/React.createElement("path", {
   d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"
 }), /*#__PURE__*/React.createElement("circle", {
@@ -123,14 +117,13 @@ const EyeIcon = props => /*#__PURE__*/React.createElement("svg", _extends$2({
 function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
 const EyeSlashIcon = props => /*#__PURE__*/React.createElement("svg", _extends$1({
   xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
   fill: "none",
   stroke: "currentColor",
   strokeLinecap: "round",
   strokeLinejoin: "round",
   strokeWidth: 2,
-  className: "prefix__lucide prefix__lucide-eye-off-icon prefix__lucide-eye-off"
+  className: "lucide lucide-eye-off-icon lucide-eye-off",
+  viewBox: "0 0 24 24"
 }, props), /*#__PURE__*/React.createElement("path", {
   d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.8 10.8 0 0 1-1.444 2.49M14.084 14.158a3 3 0 0 1-4.242-4.242"
 }), /*#__PURE__*/React.createElement("path", {
@@ -2289,8 +2282,8 @@ const CardBody = ({ children, py = 'md', px = 'md', }) => {
 };
 CardBody.displayName = 'Card.Body';
 
-const CardBase = ({ ref, variant = 'outlined', className, children, ...rest }) => {
-    return (jsx(Box, { ref: ref, className: cx(CARD_VARIANTS({ variant }), className), ...rest, children: children }));
+const CardBase = ({ ref, variant = 'outlined', padding = 'none', className, children, ...rest }) => {
+    return (jsx(Box, { ref: ref, padding: padding, className: cx(CARD_VARIANTS({ variant }), className), ...rest, children: children }));
 };
 CardBase.displayName = 'Card';
 const Card = CardBase;
@@ -2353,14 +2346,23 @@ const VARIANT_ICONS = {
     warning: AlertWarningIcon,
     info: AlertInfoIcon,
 };
+/** Returns true if value is a React component type (function/class), false if it is a rendered node. */
+const isSvgComponent = (value) => typeof value === 'function';
 /**
  * Alert title row: renders the variant icon alongside the title text.
  * Must be used inside an `<Alert>` component.
  */
-const AlertTitle = ({ children }) => {
+const AlertTitle = ({ children, icon }) => {
     const { variant, accentColor } = useAlertContext();
-    const IconComponent = VARIANT_ICONS[variant];
-    return (jsxs(Stack, { flexDirection: 'row', alignItems: 'center', gap: 'sm', children: [IconComponent && (jsx(Stack, { flexShrink: 0, alignItems: 'center', color: accentColor, width: '1.25rem', height: '1.25rem', "aria-hidden": true, children: jsx(IconComponent, { width: 20, height: 20 }) })), jsx(Text, { fontWeight: 'semibold', fontSize: 'sm', color: accentColor, children: children })] }));
+    // Resolve which icon to render:
+    // - custom icon prop always takes precedence over the built-in variant icon
+    // - for "default" variant there is no built-in icon; custom icon adds one
+    const builtInIcon = VARIANT_ICONS[variant];
+    // Must be capitalised for JSX to treat it as a component (not an HTML tag)
+    const ResolvedIcon = icon && isSvgComponent(icon) ? icon : (icon === undefined ? (builtInIcon ?? null) : null);
+    const customNode = icon && !isSvgComponent(icon) ? icon : null;
+    const hasIcon = ResolvedIcon !== null || customNode !== null;
+    return (jsxs(Stack, { flexDirection: 'row', alignItems: 'center', gap: 'sm', children: [hasIcon && (jsx(Stack, { flexShrink: 0, alignItems: 'center', color: accentColor, width: '1.25rem', height: '1.25rem', "aria-hidden": true, children: ResolvedIcon ? (jsx(ResolvedIcon, { width: 20, height: 20 })) : (customNode) })), jsx(Text, { fontWeight: 'semibold', fontSize: 'sm', color: accentColor, children: children })] }));
 };
 AlertTitle.displayName = 'Alert.Title';
 
@@ -2394,9 +2396,9 @@ const VARIANT_ARIA_LIVE = {
  *   <Alert.Body>Your changes have been saved successfully.</Alert.Body>
  * </Alert>
  */
-const AlertBase = ({ variant = 'default', children, width = '100%' }) => {
+const AlertBase = ({ variant = 'default', children, width = '100%', outline = false, shadow = 'none', }) => {
     const { backgroundColor, borderColor, accentColor } = VARIANT_TOKENS[variant];
-    return (jsx(AlertContext.Provider, { value: { variant, accentColor }, children: jsx(Stack, { role: 'alert', "aria-live": VARIANT_ARIA_LIVE[variant], flexDirection: 'column', gap: 'xs', padding: 'md', borderRadius: 'lg', backgroundColor: backgroundColor, borderColor: borderColor, borderWidth: '1px', borderStyle: 'solid', width: width, children: children }) }));
+    return (jsx(AlertContext.Provider, { value: { variant, accentColor }, children: jsx(Stack, { role: 'alert', "aria-live": VARIANT_ARIA_LIVE[variant], flexDirection: 'column', gap: 'xs', padding: 'md', borderRadius: 'lg', backgroundColor: backgroundColor, borderColor: outline ? borderColor : undefined, borderWidth: outline ? '1px' : undefined, borderStyle: outline ? 'solid' : undefined, boxShadow: shadow, width: width, children: children }) }));
 };
 AlertBase.displayName = 'Alert';
 const Alert = AlertBase;