@fragments-sdk/ui 0.9.0 → 0.9.2

package/dist/components/Icon/Icon.module.scss.cjs

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const icon = "_icon_1rseu_1";
+const primary = "_primary_1rseu_9";
+const secondary = "_secondary_1rseu_13";
+const tertiary = "_tertiary_1rseu_17";
+const accent = "_accent_1rseu_21";
+const success = "_success_1rseu_25";
+const warning = "_warning_1rseu_29";
+const error = "_error_1rseu_33";
+const styles = {
+  icon,
+  primary,
+  secondary,
+  tertiary,
+  accent,
+  success,
+  warning,
+  error
+};
+exports.accent = accent;
+exports.default = styles;
+exports.error = error;
+exports.icon = icon;
+exports.primary = primary;
+exports.secondary = secondary;
+exports.success = success;
+exports.tertiary = tertiary;
+exports.warning = warning;
+//# sourceMappingURL=Icon.module.scss.cjs.map

package/dist/components/Icon/Icon.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Icon/Icon.module.scss.js

@@ -0,0 +1,30 @@
+const icon = "_icon_1rseu_1";
+const primary = "_primary_1rseu_9";
+const secondary = "_secondary_1rseu_13";
+const tertiary = "_tertiary_1rseu_17";
+const accent = "_accent_1rseu_21";
+const success = "_success_1rseu_25";
+const warning = "_warning_1rseu_29";
+const error = "_error_1rseu_33";
+const styles = {
+  icon,
+  primary,
+  secondary,
+  tertiary,
+  accent,
+  success,
+  warning,
+  error
+};
+export {
+  accent,
+  styles as default,
+  error,
+  icon,
+  primary,
+  secondary,
+  success,
+  tertiary,
+  warning
+};
+//# sourceMappingURL=Icon.module.scss.js.map

package/dist/components/Icon/Icon.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/dist/components/Icon/index.cjs

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Icon_module = require("./Icon.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const sizeMap = {
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32
+};
+const IconRoot = React__namespace.forwardRef(
+  function Icon2({
+    icon: IconComponent,
+    size = "md",
+    weight = "regular",
+    variant,
+    color,
+    className,
+    style,
+    ...htmlProps
+  }, ref) {
+    const colorVariant = variant || color;
+    const classes = [
+      Icon_module.default.icon,
+      colorVariant && colorVariant !== "default" && Icon_module.default[colorVariant],
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, ...htmlProps, className: classes, style, children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: sizeMap[size], weight }) });
+  }
+);
+const Icon = Object.assign(IconRoot, {
+  Root: IconRoot
+});
+exports.Icon = Icon;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Icon/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Icon/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { IconProps as PhosphorIconProps } from '@phosphor-icons/react';\nimport styles from './Icon.module.scss';\n\nexport interface IconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {\n  /** The Phosphor icon component to render */\n  icon: React.ComponentType<PhosphorIconProps>;\n  /** Size of the icon */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Weight/style of the icon */\n  weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone';\n  /** Semantic color variant */\n  variant?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'accent' | 'success' | 'warning' | 'error';\n  /** @deprecated Use variant instead */\n  color?: 'primary' | 'secondary' | 'tertiary' | 'accent' | 'success' | 'warning' | 'error';\n}\n\nconst sizeMap: Record<NonNullable<IconProps['size']>, number> = {\n  xs: 12,\n  sm: 16,\n  md: 20,\n  lg: 24,\n  xl: 32,\n};\n\nconst IconRoot = React.forwardRef<HTMLSpanElement, IconProps>(\n  function Icon(\n    {\n      icon: IconComponent,\n      size = 'md',\n      weight = 'regular',\n      variant,\n      color,\n      className,\n      style,\n      ...htmlProps\n    },\n    ref\n  ) {\n    // Support deprecated color prop (variant takes precedence)\n    const colorVariant = variant || color;\n\n    const classes = [\n      styles.icon,\n      colorVariant && colorVariant !== 'default' && styles[colorVariant],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <span ref={ref} {...htmlProps} className={classes} style={style}>\n        <IconComponent size={sizeMap[size]} weight={weight} />\n      </span>\n    );\n  }\n);\n\nexport const Icon = Object.assign(IconRoot, {\n  Root: IconRoot,\n});\n"],"names":["React","Icon","styles","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,UAA0D;AAAA,EAC9D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,WAAWA,iBAAM;AAAA,EACrB,SAASC,MACP;AAAA,IACE,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,KACA;AAEA,UAAM,eAAe,WAAW;AAEhC,UAAM,UAAU;AAAA,MACdC,YAAAA,QAAO;AAAA,MACP,gBAAgB,iBAAiB,aAAaA,YAAAA,QAAO,YAAY;AAAA,MACjE;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACEC,2BAAAA,IAAC,QAAA,EAAK,KAAW,GAAG,WAAW,WAAW,SAAS,OACjD,UAAAA,+BAAC,iBAAc,MAAM,QAAQ,IAAI,GAAG,QAAgB,GACtD;AAAA,EAEJ;AACF;AAEO,MAAM,OAAO,OAAO,OAAO,UAAU;AAAA,EAC1C,MAAM;AACR,CAAC;;"}

package/dist/components/Icon/index.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { IconProps as PhosphorIconProps } from '@phosphor-icons/react';
+export interface IconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {
+    /** The Phosphor icon component to render */
+    icon: React.ComponentType<PhosphorIconProps>;
+    /** Size of the icon */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Weight/style of the icon */
+    weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone';
+    /** Semantic color variant */
+    variant?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'accent' | 'success' | 'warning' | 'error';
+    /** @deprecated Use variant instead */
+    color?: 'primary' | 'secondary' | 'tertiary' | 'accent' | 'success' | 'warning' | 'error';
+}
+export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>> & {
+    Root: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,IAAI,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAG5E,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;IACrF,4CAA4C;IAC5C,IAAI,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC7C,uBAAuB;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACpE,6BAA6B;IAC7B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACxG,sCAAsC;IACtC,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;CAC3F;AA2CD,eAAO,MAAM,IAAI;;CAEf,CAAC"}

package/dist/components/Icon/index.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./Icon.module.scss.js";
+const sizeMap = {
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32
+};
+const IconRoot = React.forwardRef(
+  function Icon2({
+    icon: IconComponent,
+    size = "md",
+    weight = "regular",
+    variant,
+    color,
+    className,
+    style,
+    ...htmlProps
+  }, ref) {
+    const colorVariant = variant || color;
+    const classes = [
+      styles.icon,
+      colorVariant && colorVariant !== "default" && styles[colorVariant],
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("span", { ref, ...htmlProps, className: classes, style, children: /* @__PURE__ */ jsx(IconComponent, { size: sizeMap[size], weight }) });
+  }
+);
+const Icon = Object.assign(IconRoot, {
+  Root: IconRoot
+});
+export {
+  Icon
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Icon/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { IconProps as PhosphorIconProps } from '@phosphor-icons/react';\nimport styles from './Icon.module.scss';\n\nexport interface IconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {\n  /** The Phosphor icon component to render */\n  icon: React.ComponentType<PhosphorIconProps>;\n  /** Size of the icon */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  /** Weight/style of the icon */\n  weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone';\n  /** Semantic color variant */\n  variant?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'accent' | 'success' | 'warning' | 'error';\n  /** @deprecated Use variant instead */\n  color?: 'primary' | 'secondary' | 'tertiary' | 'accent' | 'success' | 'warning' | 'error';\n}\n\nconst sizeMap: Record<NonNullable<IconProps['size']>, number> = {\n  xs: 12,\n  sm: 16,\n  md: 20,\n  lg: 24,\n  xl: 32,\n};\n\nconst IconRoot = React.forwardRef<HTMLSpanElement, IconProps>(\n  function Icon(\n    {\n      icon: IconComponent,\n      size = 'md',\n      weight = 'regular',\n      variant,\n      color,\n      className,\n      style,\n      ...htmlProps\n    },\n    ref\n  ) {\n    // Support deprecated color prop (variant takes precedence)\n    const colorVariant = variant || color;\n\n    const classes = [\n      styles.icon,\n      colorVariant && colorVariant !== 'default' && styles[colorVariant],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <span ref={ref} {...htmlProps} className={classes} style={style}>\n        <IconComponent size={sizeMap[size]} weight={weight} />\n      </span>\n    );\n  }\n);\n\nexport const Icon = Object.assign(IconRoot, {\n  Root: IconRoot,\n});\n"],"names":["Icon"],"mappings":";;;AAmBA,MAAM,UAA0D;AAAA,EAC9D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,WAAW,MAAM;AAAA,EACrB,SAASA,MACP;AAAA,IACE,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,KACA;AAEA,UAAM,eAAe,WAAW;AAEhC,UAAM,UAAU;AAAA,MACd,OAAO;AAAA,MACP,gBAAgB,iBAAiB,aAAa,OAAO,YAAY;AAAA,MACjE;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE,oBAAC,QAAA,EAAK,KAAW,GAAG,WAAW,WAAW,SAAS,OACjD,UAAA,oBAAC,iBAAc,MAAM,QAAQ,IAAI,GAAG,QAAgB,GACtD;AAAA,EAEJ;AACF;AAEO,MAAM,OAAO,OAAO,OAAO,UAAU;AAAA,EAC1C,MAAM;AACR,CAAC;"}

package/dist/components/Image/Image.module.scss.cjs

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const imageContainer = "_imageContainer_jaiqu_1";
+const image = "_image_jaiqu_1";
+const fitCover = "_fit-cover_jaiqu_15";
+const fitContain = "_fit-contain_jaiqu_19";
+const fitFill = "_fit-fill_jaiqu_23";
+const fitNone = "_fit-none_jaiqu_27";
+const aspect11 = "_aspect-1-1_jaiqu_31";
+const aspect43 = "_aspect-4-3_jaiqu_35";
+const aspect169 = "_aspect-16-9_jaiqu_39";
+const aspect219 = "_aspect-21-9_jaiqu_43";
+const roundedSm = "_rounded-sm_jaiqu_47";
+const roundedMd = "_rounded-md_jaiqu_51";
+const roundedLg = "_rounded-lg_jaiqu_55";
+const roundedFull = "_rounded-full_jaiqu_59";
+const fallback = "_fallback_jaiqu_63";
+const styles = {
+  imageContainer,
+  image,
+  fitCover,
+  fitContain,
+  fitFill,
+  fitNone,
+  aspect11,
+  aspect43,
+  aspect169,
+  aspect219,
+  roundedSm,
+  roundedMd,
+  roundedLg,
+  roundedFull,
+  fallback
+};
+exports.aspect11 = aspect11;
+exports.aspect169 = aspect169;
+exports.aspect219 = aspect219;
+exports.aspect43 = aspect43;
+exports.default = styles;
+exports.fallback = fallback;
+exports.fitContain = fitContain;
+exports.fitCover = fitCover;
+exports.fitFill = fitFill;
+exports.fitNone = fitNone;
+exports.image = image;
+exports.imageContainer = imageContainer;
+exports.roundedFull = roundedFull;
+exports.roundedLg = roundedLg;
+exports.roundedMd = roundedMd;
+exports.roundedSm = roundedSm;
+//# sourceMappingURL=Image.module.scss.cjs.map

package/dist/components/Image/Image.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Image/Image.module.scss.js

@@ -0,0 +1,51 @@
+const imageContainer = "_imageContainer_jaiqu_1";
+const image = "_image_jaiqu_1";
+const fitCover = "_fit-cover_jaiqu_15";
+const fitContain = "_fit-contain_jaiqu_19";
+const fitFill = "_fit-fill_jaiqu_23";
+const fitNone = "_fit-none_jaiqu_27";
+const aspect11 = "_aspect-1-1_jaiqu_31";
+const aspect43 = "_aspect-4-3_jaiqu_35";
+const aspect169 = "_aspect-16-9_jaiqu_39";
+const aspect219 = "_aspect-21-9_jaiqu_43";
+const roundedSm = "_rounded-sm_jaiqu_47";
+const roundedMd = "_rounded-md_jaiqu_51";
+const roundedLg = "_rounded-lg_jaiqu_55";
+const roundedFull = "_rounded-full_jaiqu_59";
+const fallback = "_fallback_jaiqu_63";
+const styles = {
+  imageContainer,
+  image,
+  fitCover,
+  fitContain,
+  fitFill,
+  fitNone,
+  aspect11,
+  aspect43,
+  aspect169,
+  aspect219,
+  roundedSm,
+  roundedMd,
+  roundedLg,
+  roundedFull,
+  fallback
+};
+export {
+  aspect11,
+  aspect169,
+  aspect219,
+  aspect43,
+  styles as default,
+  fallback,
+  fitContain,
+  fitCover,
+  fitFill,
+  fitNone,
+  image,
+  imageContainer,
+  roundedFull,
+  roundedLg,
+  roundedMd,
+  roundedSm
+};
+//# sourceMappingURL=Image.module.scss.js.map

package/dist/components/Image/Image.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Image/index.cjs

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const Image_module = require("./Image.module.scss.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const ImageRoot = React__namespace.forwardRef(
+  function Image2({
+    src,
+    alt,
+    aspectRatio = "auto",
+    objectFit = "cover",
+    width,
+    height,
+    rounded = "none",
+    fallback,
+    className,
+    style
+  }, ref) {
+    const imgRef = React__namespace.useRef(null);
+    const [status, setStatus] = React__namespace.useState("loading");
+    React__namespace.useEffect(() => {
+      const img = imgRef.current;
+      if (img && img.complete) {
+        setStatus(img.naturalWidth > 0 ? "loaded" : "error");
+      }
+    }, [src]);
+    const handleLoad = () => setStatus("loaded");
+    const handleError = () => setStatus("error");
+    const classes = [
+      Image_module.default.imageContainer,
+      aspectRatio !== "auto" && Image_module.default[`aspect-${aspectRatio.replace(":", "-")}`],
+      rounded !== "none" && Image_module.default[`rounded-${rounded}`],
+      className
+    ].filter(Boolean).join(" ");
+    const imgClasses = [
+      Image_module.default.image,
+      Image_module.default[`fit-${objectFit}`]
+    ].filter(Boolean).join(" ");
+    const containerStyle = {
+      ...style,
+      ...width !== void 0 && { width: typeof width === "number" ? `${width}px` : width },
+      ...height !== void 0 && { height: typeof height === "number" ? `${height}px` : height }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: classes, style: containerStyle, children: status === "error" && fallback ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: Image_module.default.fallback, children: fallback }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      status === "loading" && fallback && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Image_module.default.fallback, children: fallback }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          ref: imgRef,
+          src,
+          alt,
+          className: imgClasses,
+          onLoad: handleLoad,
+          onError: handleError,
+          style: { opacity: status === "loaded" ? 1 : 0 }
+        }
+      )
+    ] }) });
+  }
+);
+const Image = Object.assign(ImageRoot, {
+  Root: ImageRoot
+});
+exports.Image = Image;
+//# sourceMappingURL=index.cjs.map

package/dist/components/Image/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Image/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './Image.module.scss';\n\nexport interface ImageProps {\n  /** Image source URL */\n  src: string;\n  /** Alt text for accessibility */\n  alt: string;\n  /** Aspect ratio of the image container */\n  aspectRatio?: '1:1' | '4:3' | '16:9' | '21:9' | 'auto';\n  /** How the image should fit within its container */\n  objectFit?: 'cover' | 'contain' | 'fill' | 'none';\n  /** Width of the image */\n  width?: string | number;\n  /** Height of the image */\n  height?: string | number;\n  /** Border radius */\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n  /** Fallback content to show while loading or on error */\n  fallback?: React.ReactNode;\n  /** Additional class name */\n  className?: string;\n  /** Inline styles */\n  style?: React.CSSProperties;\n}\n\nconst ImageRoot = React.forwardRef<HTMLDivElement, ImageProps>(\n  function Image(\n    {\n      src,\n      alt,\n      aspectRatio = 'auto',\n      objectFit = 'cover',\n      width,\n      height,\n      rounded = 'none',\n      fallback,\n      className,\n      style,\n    },\n    ref\n  ) {\n    const imgRef = React.useRef<HTMLImageElement>(null);\n    const [status, setStatus] = React.useState<'loading' | 'loaded' | 'error'>('loading');\n\n    // Handle images that are already cached/loaded before hydration\n    React.useEffect(() => {\n      const img = imgRef.current;\n      if (img && img.complete) {\n        setStatus(img.naturalWidth > 0 ? 'loaded' : 'error');\n      }\n    }, [src]);\n\n    const handleLoad = () => setStatus('loaded');\n    const handleError = () => setStatus('error');\n\n    const classes = [\n      styles.imageContainer,\n      aspectRatio !== 'auto' && styles[`aspect-${aspectRatio.replace(':', '-')}`],\n      rounded !== 'none' && styles[`rounded-${rounded}`],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const imgClasses = [\n      styles.image,\n      styles[`fit-${objectFit}`],\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const containerStyle: React.CSSProperties = {\n      ...style,\n      ...(width !== undefined && { width: typeof width === 'number' ? `${width}px` : width }),\n      ...(height !== undefined && { height: typeof height === 'number' ? `${height}px` : height }),\n    };\n\n    return (\n      <div ref={ref} className={classes} style={containerStyle}>\n        {status === 'error' && fallback ? (\n          <div className={styles.fallback}>{fallback}</div>\n        ) : (\n          <>\n            {status === 'loading' && fallback && (\n              <div className={styles.fallback}>{fallback}</div>\n            )}\n            <img\n              ref={imgRef}\n              src={src}\n              alt={alt}\n              className={imgClasses}\n              onLoad={handleLoad}\n              onError={handleError}\n              style={{ opacity: status === 'loaded' ? 1 : 0 }}\n            />\n          </>\n        )}\n      </div>\n    );\n  }\n);\n\nexport const Image = Object.assign(ImageRoot, {\n  Root: ImageRoot,\n});\n"],"names":["React","Image","styles","jsxs","Fragment","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAM,YAAYA,iBAAM;AAAA,EACtB,SAASC,OACP;AAAA,IACE;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEF,KACA;AACA,UAAM,SAASD,iBAAM,OAAyB,IAAI;AAClD,UAAM,CAAC,QAAQ,SAAS,IAAIA,iBAAM,SAAyC,SAAS;AAGpFA,qBAAM,UAAU,MAAM;AACpB,YAAM,MAAM,OAAO;AACnB,UAAI,OAAO,IAAI,UAAU;AACvB,kBAAU,IAAI,eAAe,IAAI,WAAW,OAAO;AAAA,MACrD;AAAA,IACF,GAAG,CAAC,GAAG,CAAC;AAER,UAAM,aAAa,MAAM,UAAU,QAAQ;AAC3C,UAAM,cAAc,MAAM,UAAU,OAAO;AAE3C,UAAM,UAAU;AAAA,MACdE,aAAAA,QAAO;AAAA,MACP,gBAAgB,UAAUA,aAAAA,QAAO,UAAU,YAAY,QAAQ,KAAK,GAAG,CAAC,EAAE;AAAA,MAC1E,YAAY,UAAUA,aAAAA,QAAO,WAAW,OAAO,EAAE;AAAA,MACjD;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,UAAM,aAAa;AAAA,MACjBA,aAAAA,QAAO;AAAA,MACPA,qBAAO,OAAO,SAAS,EAAE;AAAA,IAAA,EAExB,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,UAAM,iBAAsC;AAAA,MAC1C,GAAG;AAAA,MACH,GAAI,UAAU,UAAa,EAAE,OAAO,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO,MAAA;AAAA,MAC/E,GAAI,WAAW,UAAa,EAAE,QAAQ,OAAO,WAAW,WAAW,GAAG,MAAM,OAAO,OAAA;AAAA,IAAO;AAG5F,0CACG,OAAA,EAAI,KAAU,WAAW,SAAS,OAAO,gBACvC,UAAA,WAAW,WAAW,0CACpB,OAAA,EAAI,WAAWA,aAAAA,QAAO,UAAW,UAAA,SAAA,CAAS,IAE3CC,2BAAAA,KAAAC,WAAAA,UAAA,EACG,UAAA;AAAA,MAAA,WAAW,aAAa,YACvBC,2BAAAA,IAAC,SAAI,WAAWH,qBAAO,UAAW,UAAA,SAAA,CAAS;AAAA,MAE7CG,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA,WAAW;AAAA,UACX,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,OAAO,EAAE,SAAS,WAAW,WAAW,IAAI,EAAA;AAAA,QAAE;AAAA,MAAA;AAAA,IAChD,EAAA,CACF,EAAA,CAEJ;AAAA,EAEJ;AACF;AAEO,MAAM,QAAQ,OAAO,OAAO,WAAW;AAAA,EAC5C,MAAM;AACR,CAAC;;"}

package/dist/components/Image/index.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+export interface ImageProps {
+    /** Image source URL */
+    src: string;
+    /** Alt text for accessibility */
+    alt: string;
+    /** Aspect ratio of the image container */
+    aspectRatio?: '1:1' | '4:3' | '16:9' | '21:9' | 'auto';
+    /** How the image should fit within its container */
+    objectFit?: 'cover' | 'contain' | 'fill' | 'none';
+    /** Width of the image */
+    width?: string | number;
+    /** Height of the image */
+    height?: string | number;
+    /** Border radius */
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    /** Fallback content to show while loading or on error */
+    fallback?: React.ReactNode;
+    /** Additional class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+}
+export declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLDivElement>> & {
+    Root: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLDivElement>>;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Image/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Image/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,UAAU;IACzB,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,iCAAiC;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,0CAA0C;IAC1C,WAAW,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACvD,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IAClD,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC/C,yDAAyD;IACzD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AA+ED,eAAO,MAAM,KAAK;;CAEhB,CAAC"}

package/dist/components/Image/index.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./Image.module.scss.js";
+const ImageRoot = React.forwardRef(
+  function Image2({
+    src,
+    alt,
+    aspectRatio = "auto",
+    objectFit = "cover",
+    width,
+    height,
+    rounded = "none",
+    fallback,
+    className,
+    style
+  }, ref) {
+    const imgRef = React.useRef(null);
+    const [status, setStatus] = React.useState("loading");
+    React.useEffect(() => {
+      const img = imgRef.current;
+      if (img && img.complete) {
+        setStatus(img.naturalWidth > 0 ? "loaded" : "error");
+      }
+    }, [src]);
+    const handleLoad = () => setStatus("loaded");
+    const handleError = () => setStatus("error");
+    const classes = [
+      styles.imageContainer,
+      aspectRatio !== "auto" && styles[`aspect-${aspectRatio.replace(":", "-")}`],
+      rounded !== "none" && styles[`rounded-${rounded}`],
+      className
+    ].filter(Boolean).join(" ");
+    const imgClasses = [
+      styles.image,
+      styles[`fit-${objectFit}`]
+    ].filter(Boolean).join(" ");
+    const containerStyle = {
+      ...style,
+      ...width !== void 0 && { width: typeof width === "number" ? `${width}px` : width },
+      ...height !== void 0 && { height: typeof height === "number" ? `${height}px` : height }
+    };
+    return /* @__PURE__ */ jsx("div", { ref, className: classes, style: containerStyle, children: status === "error" && fallback ? /* @__PURE__ */ jsx("div", { className: styles.fallback, children: fallback }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      status === "loading" && fallback && /* @__PURE__ */ jsx("div", { className: styles.fallback, children: fallback }),
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          ref: imgRef,
+          src,
+          alt,
+          className: imgClasses,
+          onLoad: handleLoad,
+          onError: handleError,
+          style: { opacity: status === "loaded" ? 1 : 0 }
+        }
+      )
+    ] }) });
+  }
+);
+const Image = Object.assign(ImageRoot, {
+  Root: ImageRoot
+});
+export {
+  Image
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/Image/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './Image.module.scss';\n\nexport interface ImageProps {\n  /** Image source URL */\n  src: string;\n  /** Alt text for accessibility */\n  alt: string;\n  /** Aspect ratio of the image container */\n  aspectRatio?: '1:1' | '4:3' | '16:9' | '21:9' | 'auto';\n  /** How the image should fit within its container */\n  objectFit?: 'cover' | 'contain' | 'fill' | 'none';\n  /** Width of the image */\n  width?: string | number;\n  /** Height of the image */\n  height?: string | number;\n  /** Border radius */\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n  /** Fallback content to show while loading or on error */\n  fallback?: React.ReactNode;\n  /** Additional class name */\n  className?: string;\n  /** Inline styles */\n  style?: React.CSSProperties;\n}\n\nconst ImageRoot = React.forwardRef<HTMLDivElement, ImageProps>(\n  function Image(\n    {\n      src,\n      alt,\n      aspectRatio = 'auto',\n      objectFit = 'cover',\n      width,\n      height,\n      rounded = 'none',\n      fallback,\n      className,\n      style,\n    },\n    ref\n  ) {\n    const imgRef = React.useRef<HTMLImageElement>(null);\n    const [status, setStatus] = React.useState<'loading' | 'loaded' | 'error'>('loading');\n\n    // Handle images that are already cached/loaded before hydration\n    React.useEffect(() => {\n      const img = imgRef.current;\n      if (img && img.complete) {\n        setStatus(img.naturalWidth > 0 ? 'loaded' : 'error');\n      }\n    }, [src]);\n\n    const handleLoad = () => setStatus('loaded');\n    const handleError = () => setStatus('error');\n\n    const classes = [\n      styles.imageContainer,\n      aspectRatio !== 'auto' && styles[`aspect-${aspectRatio.replace(':', '-')}`],\n      rounded !== 'none' && styles[`rounded-${rounded}`],\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const imgClasses = [\n      styles.image,\n      styles[`fit-${objectFit}`],\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const containerStyle: React.CSSProperties = {\n      ...style,\n      ...(width !== undefined && { width: typeof width === 'number' ? `${width}px` : width }),\n      ...(height !== undefined && { height: typeof height === 'number' ? `${height}px` : height }),\n    };\n\n    return (\n      <div ref={ref} className={classes} style={containerStyle}>\n        {status === 'error' && fallback ? (\n          <div className={styles.fallback}>{fallback}</div>\n        ) : (\n          <>\n            {status === 'loading' && fallback && (\n              <div className={styles.fallback}>{fallback}</div>\n            )}\n            <img\n              ref={imgRef}\n              src={src}\n              alt={alt}\n              className={imgClasses}\n              onLoad={handleLoad}\n              onError={handleError}\n              style={{ opacity: status === 'loaded' ? 1 : 0 }}\n            />\n          </>\n        )}\n      </div>\n    );\n  }\n);\n\nexport const Image = Object.assign(ImageRoot, {\n  Root: ImageRoot,\n});\n"],"names":["Image"],"mappings":";;;AA4BA,MAAM,YAAY,MAAM;AAAA,EACtB,SAASA,OACP;AAAA,IACE;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAEF,KACA;AACA,UAAM,SAAS,MAAM,OAAyB,IAAI;AAClD,UAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAyC,SAAS;AAGpF,UAAM,UAAU,MAAM;AACpB,YAAM,MAAM,OAAO;AACnB,UAAI,OAAO,IAAI,UAAU;AACvB,kBAAU,IAAI,eAAe,IAAI,WAAW,OAAO;AAAA,MACrD;AAAA,IACF,GAAG,CAAC,GAAG,CAAC;AAER,UAAM,aAAa,MAAM,UAAU,QAAQ;AAC3C,UAAM,cAAc,MAAM,UAAU,OAAO;AAE3C,UAAM,UAAU;AAAA,MACd,OAAO;AAAA,MACP,gBAAgB,UAAU,OAAO,UAAU,YAAY,QAAQ,KAAK,GAAG,CAAC,EAAE;AAAA,MAC1E,YAAY,UAAU,OAAO,WAAW,OAAO,EAAE;AAAA,MACjD;AAAA,IAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,UAAM,aAAa;AAAA,MACjB,OAAO;AAAA,MACP,OAAO,OAAO,SAAS,EAAE;AAAA,IAAA,EAExB,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,UAAM,iBAAsC;AAAA,MAC1C,GAAG;AAAA,MACH,GAAI,UAAU,UAAa,EAAE,OAAO,OAAO,UAAU,WAAW,GAAG,KAAK,OAAO,MAAA;AAAA,MAC/E,GAAI,WAAW,UAAa,EAAE,QAAQ,OAAO,WAAW,WAAW,GAAG,MAAM,OAAO,OAAA;AAAA,IAAO;AAG5F,+BACG,OAAA,EAAI,KAAU,WAAW,SAAS,OAAO,gBACvC,UAAA,WAAW,WAAW,+BACpB,OAAA,EAAI,WAAW,OAAO,UAAW,UAAA,SAAA,CAAS,IAE3C,qBAAA,UAAA,EACG,UAAA;AAAA,MAAA,WAAW,aAAa,YACvB,oBAAC,SAAI,WAAW,OAAO,UAAW,UAAA,SAAA,CAAS;AAAA,MAE7C;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA,WAAW;AAAA,UACX,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,OAAO,EAAE,SAAS,WAAW,WAAW,IAAI,EAAA;AAAA,QAAE;AAAA,MAAA;AAAA,IAChD,EAAA,CACF,EAAA,CAEJ;AAAA,EAEJ;AACF;AAEO,MAAM,QAAQ,OAAO,OAAO,WAAW;AAAA,EAC5C,MAAM;AACR,CAAC;"}

package/dist/components/Input/Input.module.scss.cjs

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const wrapper = "_wrapper_11ujh_1";
+const label = "_label_11ujh_6";
+const input = "_input_11ujh_14";
+const sm = "_sm_11ujh_54";
+const md = "_md_11ujh_60";
+const lg = "_lg_11ujh_66";
+const labelSm = "_labelSm_11ujh_72";
+const error = "_error_11ujh_76";
+const helper = "_helper_11ujh_84";
+const helperError = "_helperError_11ujh_91";
+const inputContainer = "_inputContainer_11ujh_95";
+const hasShortcut = "_hasShortcut_11ujh_101";
+const shortcut = "_shortcut_11ujh_105";
+const styles = {
+  wrapper,
+  label,
+  input,
+  sm,
+  md,
+  lg,
+  labelSm,
+  error,
+  helper,
+  helperError,
+  inputContainer,
+  hasShortcut,
+  shortcut
+};
+exports.default = styles;
+exports.error = error;
+exports.hasShortcut = hasShortcut;
+exports.helper = helper;
+exports.helperError = helperError;
+exports.input = input;
+exports.inputContainer = inputContainer;
+exports.label = label;
+exports.labelSm = labelSm;
+exports.lg = lg;
+exports.md = md;
+exports.shortcut = shortcut;
+exports.sm = sm;
+exports.wrapper = wrapper;
+//# sourceMappingURL=Input.module.scss.cjs.map

package/dist/components/Input/Input.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Input/Input.module.scss.js

@@ -0,0 +1,45 @@
+const wrapper = "_wrapper_11ujh_1";
+const label = "_label_11ujh_6";
+const input = "_input_11ujh_14";
+const sm = "_sm_11ujh_54";
+const md = "_md_11ujh_60";
+const lg = "_lg_11ujh_66";
+const labelSm = "_labelSm_11ujh_72";
+const error = "_error_11ujh_76";
+const helper = "_helper_11ujh_84";
+const helperError = "_helperError_11ujh_91";
+const inputContainer = "_inputContainer_11ujh_95";
+const hasShortcut = "_hasShortcut_11ujh_101";
+const shortcut = "_shortcut_11ujh_105";
+const styles = {
+  wrapper,
+  label,
+  input,
+  sm,
+  md,
+  lg,
+  labelSm,
+  error,
+  helper,
+  helperError,
+  inputContainer,
+  hasShortcut,
+  shortcut
+};
+export {
+  styles as default,
+  error,
+  hasShortcut,
+  helper,
+  helperError,
+  input,
+  inputContainer,
+  label,
+  labelSm,
+  lg,
+  md,
+  shortcut,
+  sm,
+  wrapper
+};
+//# sourceMappingURL=Input.module.scss.js.map

package/dist/components/Input/Input.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}