@salesmind-ai/design-system 0.3.4 → 0.3.5

package/dist/chunk-2ZNR2F2V.cjs

@@ -0,0 +1,194 @@
+'use strict';
+
+var chunkMQRB634A_cjs = require('./chunk-MQRB634A.cjs');
+var chunkEM7JHRYW_cjs = require('./chunk-EM7JHRYW.cjs');
+var chunkMDB2WCRQ_cjs = require('./chunk-MDB2WCRQ.cjs');
+var react = require('react');
+var clsx = require('clsx');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var HeroSection = react.forwardRef(
+  ({
+    variant = "left",
+    title,
+    subtitle,
+    eyebrow,
+    primaryCta,
+    secondaryCta,
+    media,
+    mediaBrowserFrame = false,
+    floatingElement,
+    floatingPosition = "bottom-left",
+    withGrid = false,
+    withGlow = false,
+    align,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const isSplit = variant === "split";
+    const isCenter = variant === "center";
+    const textAlignment = align || (isCenter ? "center" : "left");
+    const ContentBlock = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx__default.default("ds-hero__content", `ds-hero__content--${textAlignment}`), children: [
+      eyebrow && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-section-header__eyebrow", style: { marginBottom: "var(--space-2)" }, children: eyebrow }),
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "ds-hero__title", children: title }),
+      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-hero__subtitle", children: subtitle }),
+      (primaryCta || secondaryCta) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-hero__actions", children: [
+        primaryCta,
+        secondaryCta
+      ] }),
+      children
+    ] });
+    const MediaBlock = media && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-hero__media-wrapper", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx__default.default("ds-hero__media", mediaBrowserFrame && "ds-hero__media--browser"), children: media }),
+      floatingElement && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx__default.default("ds-hero__float", `ds-hero__float--${floatingPosition}`), children: floatingElement })
+    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      chunkEM7JHRYW_cjs.SectionShell,
+      {
+        ref,
+        className: clsx__default.default(
+          "ds-hero",
+          `ds-hero--${variant}`,
+          withGrid && "ds-hero--bg-grid",
+          withGlow && "ds-hero--bg-glow",
+          className
+        ),
+        padding: "lg",
+        ...props,
+        children: isSplit ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 500px), 1fr))",
+              gap: "var(--space-16)",
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(chunkMDB2WCRQ_cjs.Box, { children: ContentBlock }),
+              /* @__PURE__ */ jsxRuntime.jsx(chunkMDB2WCRQ_cjs.Box, { children: MediaBlock })
+            ]
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(chunkMQRB634A_cjs.Stack, { gap: 16, align: isCenter ? "center" : "start", children: [
+          ContentBlock,
+          MediaBlock && /* @__PURE__ */ jsxRuntime.jsx(
+            chunkMDB2WCRQ_cjs.Box,
+            {
+              style: {
+                width: "100%",
+                display: "flex",
+                justifyContent: isCenter ? "center" : "flex-start"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "100%", maxWidth: isCenter ? "1200px" : "100%" }, children: MediaBlock })
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+HeroSection.displayName = "HeroSection";
+var FeatureCard = ({ item }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-feature-card", children: [
+  item.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-feature-card__icon", children: item.icon }),
+  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "ds-feature-card__title", children: item.title }),
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-feature-card__description", children: item.description }),
+  item.cta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-feature-card__cta", children: item.cta })
+] });
+var FeatureRow = ({ item }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-feature-row", children: [
+  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-feature-row__content", children: [
+    item.step && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-feature-row__step", children: [
+      "STEP ",
+      item.step
+    ] }),
+    item.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-feature-card__icon", children: item.icon }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "ds-section-header__title", style: { fontSize: "var(--font-size-2xl)" }, children: item.title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-section-header__subtitle", style: { fontSize: "var(--font-size-lg)" }, children: item.description }),
+    item.cta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-hero__actions", children: item.cta })
+  ] }),
+  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-feature-row__media", children: item.media || /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingBottom: "56.25%", background: "var(--glass-base-active)" } }) })
+] });
+var FeatureSection = react.forwardRef(
+  ({
+    variant = "grid",
+    columns = 3,
+    features,
+    title,
+    subtitle,
+    eyebrow,
+    alignHeader = "center",
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(chunkEM7JHRYW_cjs.SectionShell, { ref, className: clsx__default.default("ds-feature-section", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunkEM7JHRYW_cjs.SectionHeader, { title, subtitle, eyebrow, align: alignHeader }),
+      variant === "grid" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx__default.default("ds-feature-grid", `ds-feature-grid--${columns}-col`), children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsx(FeatureCard, { item: feature }, index)) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-feature-zigzag", children: features.map((feature, index) => /* @__PURE__ */ jsxRuntime.jsx(FeatureRow, { item: feature }, index)) })
+    ] });
+  }
+);
+FeatureSection.displayName = "FeatureSection";
+var CTASection = react.forwardRef(
+  ({
+    variant = "center",
+    title,
+    description,
+    primaryCta,
+    secondaryCta,
+    actions,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const isBoxed = variant === "boxed";
+    const effectiveVariant = isBoxed ? "center" : variant;
+    const Content = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx__default.default("ds-cta-section", `ds-cta-section--${effectiveVariant}`), children: [
+      effectiveVariant === "split" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-cta-section--split", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-cta-content", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "ds-cta-title", children: title }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-cta-description", children: description })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-cta-actions", children: actions || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          primaryCta,
+          secondaryCta
+        ] }) })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-cta-content", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "ds-cta-title", children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "ds-cta-description", children: description }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-cta-actions", children: actions || /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          primaryCta,
+          secondaryCta
+        ] }) })
+      ] }),
+      children
+    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx(chunkEM7JHRYW_cjs.SectionShell, { ref, className: clsx__default.default(className), ...props, children: isBoxed ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-cta-card", children: Content }) : Content });
+  }
+);
+CTASection.displayName = "CTASection";
+var StatsSection = react.forwardRef(
+  ({ stats, title, subtitle, eyebrow, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(chunkEM7JHRYW_cjs.SectionShell, { ref, className: clsx__default.default("ds-stats-section", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunkEM7JHRYW_cjs.SectionHeader, { title, subtitle, eyebrow }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-stats-grid", children: stats.map((stat, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-stat-card", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ds-stat-value", children: [
+          stat.prefix,
+          stat.value,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ds-stat-suffix", children: stat.suffix })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-stat-label", children: stat.label })
+      ] }, idx)) })
+    ] });
+  }
+);
+StatsSection.displayName = "StatsSection";
+
+exports.CTASection = CTASection;
+exports.FeatureSection = FeatureSection;
+exports.HeroSection = HeroSection;
+exports.StatsSection = StatsSection;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-2ZNR2F2V.cjs.map

package/dist/chunk-2ZNR2F2V.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/HeroSection/HeroSection.tsx","../src/components/FeatureSection/FeatureSection.tsx","../src/components/CTASection/CTASection.tsx","../src/components/StatsSection/StatsSection.tsx"],"names":["forwardRef","clsx","jsx","jsxs"],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps } from '../SectionShell/SectionShell';\nimport { Stack, Box } from '../LayoutPrimitives';\nimport './HeroSection.css';\n\n/* ============================================================================\n   Types\n   ============================================================================ */\n\nexport interface HeroSectionProps extends Omit<SectionShellProps, 'title'> {\n  variant?: 'left' | 'center' | 'split';\n  title: React.ReactNode;\n  subtitle?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  primaryCta?: React.ReactNode;\n  secondaryCta?: React.ReactNode;\n\n  /** Main visual (Image, Video, or Component) */\n  media?: React.ReactNode;\n  /** Adds a browser-like header bar to the media container */\n  mediaBrowserFrame?: boolean;\n\n  /** Optional floating elements (e.g. SocialProof cards) over the media */\n  floatingElement?: React.ReactNode;\n  floatingPosition?: 'top-right' | 'bottom-left';\n\n  /** Background Visuals */\n  withGrid?: boolean;\n  withGlow?: boolean;\n\n  align?: 'left' | 'center'; // Text alignment overrides variant default\n}\n\n/* ============================================================================\n   Component\n   ============================================================================ */\n\nexport const HeroSection = forwardRef<HTMLDivElement, HeroSectionProps>(\n  (\n    {\n      variant = 'left',\n      title,\n      subtitle,\n      eyebrow,\n      primaryCta,\n      secondaryCta,\n      media,\n      mediaBrowserFrame = false,\n      floatingElement,\n      floatingPosition = 'bottom-left',\n      withGrid = false,\n      withGlow = false,\n      align,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    // Determine layout based on variant\n    const isSplit = variant === 'split';\n    const isCenter = variant === 'center';\n\n    // Default alignment\n    const textAlignment = align || (isCenter ? 'center' : 'left');\n\n    const ContentBlock = (\n      <div className={clsx('ds-hero__content', `ds-hero__content--${textAlignment}`)}>\n        {eyebrow && (\n          <span className=\"ds-section-header__eyebrow\" style={{ marginBottom: 'var(--space-2)' }}>\n            {eyebrow}\n          </span>\n        )}\n        <h1 className=\"ds-hero__title\">{title}</h1>\n        {subtitle && <p className=\"ds-hero__subtitle\">{subtitle}</p>}\n\n        {(primaryCta || secondaryCta) && (\n          <div className=\"ds-hero__actions\">\n            {primaryCta}\n            {secondaryCta}\n          </div>\n        )}\n        {children}\n      </div>\n    );\n\n    const MediaBlock = media && (\n      <div className=\"ds-hero__media-wrapper\">\n        <div className={clsx('ds-hero__media', mediaBrowserFrame && 'ds-hero__media--browser')}>\n          {media}\n        </div>\n        {floatingElement && (\n          <div className={clsx('ds-hero__float', `ds-hero__float--${floatingPosition}`)}>\n            {floatingElement}\n          </div>\n        )}\n      </div>\n    );\n\n    return (\n      <SectionShell\n        ref={ref}\n        className={clsx(\n          'ds-hero',\n          `ds-hero--${variant}`,\n          withGrid && 'ds-hero--bg-grid',\n          withGlow && 'ds-hero--bg-glow',\n          className,\n        )}\n        padding=\"lg\"\n        {...props}\n      >\n        {isSplit ? (\n          <div\n            style={{\n              display: 'grid',\n              gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 500px), 1fr))',\n              gap: 'var(--space-16)',\n              alignItems: 'center',\n            }}\n          >\n            <Box>{ContentBlock}</Box>\n            <Box>{MediaBlock}</Box>\n          </div>\n        ) : (\n          <Stack gap={16} align={isCenter ? 'center' : 'start'}>\n            {ContentBlock}\n            {MediaBlock && (\n              <Box\n                style={{\n                  width: '100%',\n                  display: 'flex',\n                  justifyContent: isCenter ? 'center' : 'flex-start',\n                }}\n              >\n                <div style={{ width: '100%', maxWidth: isCenter ? '1200px' : '100%' }}>\n                  {MediaBlock}\n                </div>\n              </Box>\n            )}\n          </Stack>\n        )}\n      </SectionShell>\n    );\n  },\n);\n\nHeroSection.displayName = 'HeroSection';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps, SectionHeader } from '../SectionShell/SectionShell';\nimport './FeatureSection.css';\n\n/* ============================================================================\n   Types\n   ============================================================================ */\n\nexport interface FeatureItem {\n  title: React.ReactNode;\n  description: React.ReactNode;\n  icon?: React.ReactNode;\n  media?: React.ReactNode; // For ZigZag\n  step?: string | number; // For ZigZag steps\n  cta?: React.ReactNode;\n}\n\nexport interface FeatureSectionProps extends Omit<SectionShellProps, 'title'> {\n  variant?: 'grid' | 'zigzag';\n  columns?: 2 | 3 | 4; // For grid variant\n  features: FeatureItem[];\n  title?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  alignHeader?: 'left' | 'center' | 'right';\n}\n\n/* ============================================================================\n   Components\n   ============================================================================ */\n\nconst FeatureCard = ({ item }: { item: FeatureItem }) => (\n  <div className=\"ds-feature-card\">\n    {item.icon && <div className=\"ds-feature-card__icon\">{item.icon}</div>}\n    <h3 className=\"ds-feature-card__title\">{item.title}</h3>\n    <div className=\"ds-feature-card__description\">{item.description}</div>\n    {item.cta && <div className=\"ds-feature-card__cta\">{item.cta}</div>}\n  </div>\n);\n\nconst FeatureRow = ({ item }: { item: FeatureItem }) => (\n  <div className=\"ds-feature-row\">\n    <div className=\"ds-feature-row__content\">\n      {item.step && <div className=\"ds-feature-row__step\">STEP {item.step}</div>}\n      {item.icon && <div className=\"ds-feature-card__icon\">{item.icon}</div>}\n      <h3 className=\"ds-section-header__title\" style={{ fontSize: 'var(--font-size-2xl)' }}>\n        {item.title}\n      </h3>\n      <div className=\"ds-section-header__subtitle\" style={{ fontSize: 'var(--font-size-lg)' }}>\n        {item.description}\n      </div>\n      {item.cta && <div className=\"ds-hero__actions\">{item.cta}</div>}\n    </div>\n    <div className=\"ds-feature-row__media\">\n      {item.media || (\n        <div style={{ paddingBottom: '56.25%', background: 'var(--glass-base-active)' }} />\n      )}\n    </div>\n  </div>\n);\n\nexport const FeatureSection = forwardRef<HTMLDivElement, FeatureSectionProps>(\n  (\n    {\n      variant = 'grid',\n      columns = 3,\n      features,\n      title,\n      subtitle,\n      eyebrow,\n      alignHeader = 'center',\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <SectionShell ref={ref} className={clsx('ds-feature-section', className)} {...props}>\n        <SectionHeader title={title} subtitle={subtitle} eyebrow={eyebrow} align={alignHeader} />\n\n        {variant === 'grid' ? (\n          <div className={clsx('ds-feature-grid', `ds-feature-grid--${columns}-col`)}>\n            {features.map((feature, index) => (\n              <FeatureCard key={index} item={feature} />\n            ))}\n          </div>\n        ) : (\n          <div className=\"ds-feature-zigzag\">\n            {features.map((feature, index) => (\n              <FeatureRow key={index} item={feature} />\n            ))}\n          </div>\n        )}\n      </SectionShell>\n    );\n  },\n);\nFeatureSection.displayName = 'FeatureSection';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps } from '../SectionShell/SectionShell';\nimport './CTASection.css';\n\nexport interface CTASectionProps extends Omit<SectionShellProps, 'title'> {\n  variant?: 'center' | 'split' | 'boxed';\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  primaryCta?: React.ReactNode;\n  secondaryCta?: React.ReactNode;\n  actions?: React.ReactNode; // Custom actions slot\n}\n\nexport const CTASection = forwardRef<HTMLDivElement, CTASectionProps>(\n  (\n    {\n      variant = 'center',\n      title,\n      description,\n      primaryCta,\n      secondaryCta,\n      actions,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    // \"Boxed\" is just centered content inside a card-like container within the section\n    const isBoxed = variant === 'boxed';\n    const effectiveVariant = isBoxed ? 'center' : variant;\n\n    const Content = (\n      <div className={clsx('ds-cta-section', `ds-cta-section--${effectiveVariant}`)}>\n        {effectiveVariant === 'split' ? (\n          <div className=\"ds-cta-section--split\">\n            <div className=\"ds-cta-content\">\n              <h2 className=\"ds-cta-title\">{title}</h2>\n              {description && <p className=\"ds-cta-description\">{description}</p>}\n            </div>\n            <div className=\"ds-cta-actions\">\n              {actions || (\n                <>\n                  {primaryCta}\n                  {secondaryCta}\n                </>\n              )}\n            </div>\n          </div>\n        ) : (\n          <div className=\"ds-cta-content\">\n            <h2 className=\"ds-cta-title\">{title}</h2>\n            {description && <p className=\"ds-cta-description\">{description}</p>}\n            <div className=\"ds-cta-actions\">\n              {actions || (\n                <>\n                  {primaryCta}\n                  {secondaryCta}\n                </>\n              )}\n            </div>\n          </div>\n        )}\n        {children}\n      </div>\n    );\n\n    return (\n      <SectionShell ref={ref} className={clsx(className)} {...props}>\n        {isBoxed ? <div className=\"ds-cta-card\">{Content}</div> : Content}\n      </SectionShell>\n    );\n  },\n);\nCTASection.displayName = 'CTASection';\n","import React, { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { SectionShell, SectionShellProps, SectionHeader } from '../SectionShell/SectionShell';\nimport './StatsSection.css';\n\nexport interface StatItem {\n  label: string;\n  value: string | number;\n  suffix?: string;\n  prefix?: string;\n}\n\nexport interface StatsSectionProps extends Omit<SectionShellProps, 'title'> {\n  stats: StatItem[];\n  title?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n}\n\nexport const StatsSection = forwardRef<HTMLDivElement, StatsSectionProps>(\n  ({ stats, title, subtitle, eyebrow, className, ...props }, ref) => {\n    return (\n      <SectionShell ref={ref} className={clsx('ds-stats-section', className)} {...props}>\n        <SectionHeader title={title} subtitle={subtitle} eyebrow={eyebrow} />\n\n        <div className=\"ds-stats-grid\">\n          {stats.map((stat, idx) => (\n            <div key={idx} className=\"ds-stat-card\">\n              <div className=\"ds-stat-value\">\n                {stat.prefix}\n                {stat.value}\n                <span className=\"ds-stat-suffix\">{stat.suffix}</span>\n              </div>\n              <div className=\"ds-stat-label\">{stat.label}</div>\n            </div>\n          ))}\n        </div>\n      </SectionShell>\n    );\n  },\n);\nStatsSection.displayName = 'StatsSection';\n"]}

package/dist/chunk-3NKRFUAR.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Input } from '@base-ui/react/input';
+import clsx from 'clsx';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/TextField/TextField.tsx
+var TextField = React.forwardRef(
+  ({ className, label, error, helperText, endAdornment, id, ...props }, ref) => {
+    const generatedId = React.useId();
+    const inputId = id || generatedId;
+    return /* @__PURE__ */ jsxs("div", { className: clsx("ds-textfield", className), children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "ds-textfield__label", children: label }),
+      /* @__PURE__ */ jsxs("div", { className: "ds-textfield__input-wrapper", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            id: inputId,
+            ref,
+            className: clsx(
+              "ds-textfield__input",
+              error && "ds-textfield__input--error",
+              endAdornment && "ds-textfield__input--adorned"
+            ),
+            ...props
+          }
+        ),
+        endAdornment && /* @__PURE__ */ jsx("div", { className: "ds-textfield__adornment", children: endAdornment })
+      ] }),
+      helperText && /* @__PURE__ */ jsx("span", { className: clsx("ds-textfield__helper", error && "ds-textfield__helper--error"), children: helperText })
+    ] });
+  }
+);
+TextField.displayName = "TextField";
+
+export { TextField };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-3NKRFUAR.js.map

package/dist/chunk-3NKRFUAR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TextField/TextField.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW;AAClB,SAAS,SAAS,iBAAiB;AACnC,OAAO,UAAU;AAkBP,cAIF,YAJE;AARH,IAAM,YAAY,MAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,OAAO,OAAO,YAAY,cAAc,IAAI,GAAG,MAAM,GAAG,QAAQ;AAC5E,UAAM,cAAc,MAAM,MAAM;AAChC,UAAM,UAAU,MAAM;AAEtB,WACE,qBAAC,SAAI,WAAW,KAAK,gBAAgB,SAAS,GAC3C;AAAA,eACC,oBAAC,WAAM,SAAS,SAAS,WAAU,uBAChC,iBACH;AAAA,MAEF,qBAAC,SAAI,WAAU,+BACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ;AAAA,YACA,WAAW;AAAA,cACT;AAAA,cACA,SAAS;AAAA,cACT,gBAAgB;AAAA,YAClB;AAAA,YACC,GAAG;AAAA;AAAA,QACN;AAAA,QACC,gBAAgB,oBAAC,SAAI,WAAU,2BAA2B,wBAAa;AAAA,SAC1E;AAAA,MACC,cACC,oBAAC,UAAK,WAAW,KAAK,wBAAwB,SAAS,6BAA6B,GACjF,sBACH;AAAA,OAEJ;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc","sourcesContent":["import React from 'react';\nimport { Input as BaseInput } from '@base-ui/react/input';\nimport clsx from 'clsx';\nimport './TextField.css';\n\nexport interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  label?: string;\n  error?: boolean;\n  helperText?: string;\n  endAdornment?: React.ReactNode;\n}\n\nexport const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(\n  ({ className, label, error, helperText, endAdornment, id, ...props }, ref) => {\n    const generatedId = React.useId();\n    const inputId = id || generatedId;\n\n    return (\n      <div className={clsx('ds-textfield', className)}>\n        {label && (\n          <label htmlFor={inputId} className=\"ds-textfield__label\">\n            {label}\n          </label>\n        )}\n        <div className=\"ds-textfield__input-wrapper\">\n          <BaseInput\n            id={inputId}\n            ref={ref}\n            className={clsx(\n              'ds-textfield__input',\n              error && 'ds-textfield__input--error',\n              endAdornment && 'ds-textfield__input--adorned',\n            )}\n            {...props}\n          />\n          {endAdornment && <div className=\"ds-textfield__adornment\">{endAdornment}</div>}\n        </div>\n        {helperText && (\n          <span className={clsx('ds-textfield__helper', error && 'ds-textfield__helper--error')}>\n            {helperText}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n\nTextField.displayName = 'TextField';\n"]}

package/dist/chunk-3TGSIILM.cjs

@@ -0,0 +1,201 @@
+'use strict';
+
+var React = require('react');
+var menu = require('@base-ui/react/menu');
+var clsx = require('clsx');
+var jsxRuntime = require('react/jsx-runtime');
+var select = require('@base-ui/react/select');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+var DropdownMenu = menu.Menu.Root;
+var DropdownMenuTrigger = React__default.default.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    menu.Menu.Trigger,
+    {
+      ref,
+      className: clsx__default.default("ds-dropdown-menu__trigger", className),
+      ...props
+    }
+  );
+});
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+var DropdownMenuContent = React__default.default.forwardRef(
+  ({ className, side = "bottom", align = "start", sideOffset = 4, alignOffset = 0, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      menu.Menu.Positioner,
+      {
+        side,
+        align,
+        sideOffset,
+        alignOffset,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          menu.Menu.Popup,
+          {
+            ref,
+            className: clsx__default.default("ds-dropdown-menu__content", className),
+            ...props
+          }
+        )
+      }
+    ) });
+  }
+);
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var DropdownMenuItem = React__default.default.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Item, { ref, className: clsx__default.default("ds-dropdown-menu__item", className), ...props });
+  }
+);
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuSeparator = React__default.default.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx__default.default("ds-dropdown-menu__separator", className), ...props });
+});
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+var DropdownMenuLabel = React__default.default.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx__default.default("ds-dropdown-menu__label", className), ...props });
+});
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+function Select({
+  value,
+  defaultValue,
+  onValueChange,
+  disabled,
+  required,
+  name,
+  items,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    select.Select.Root,
+    {
+      value,
+      defaultValue,
+      onValueChange: onValueChange ? (val) => onValueChange(val) : void 0,
+      disabled,
+      required,
+      name,
+      items,
+      children
+    }
+  );
+}
+Select.displayName = "Select";
+var SelectTrigger = React__default.default.forwardRef(
+  ({ className, placeholder = "Select...", size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ds-select__trigger-wrapper", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      select.Select.Trigger,
+      {
+        ref,
+        className: clsx__default.default("ds-select__trigger", `ds-select__trigger--${size}`, className),
+        "aria-label": props["aria-label"] || (typeof placeholder === "string" ? placeholder : "Select"),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(select.Select.Value, { className: "ds-select__value", placeholder }),
+          /* @__PURE__ */ jsxRuntime.jsx(select.Select.Icon, { className: "ds-select__icon", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {}) })
+        ]
+      }
+    ) });
+  }
+);
+SelectTrigger.displayName = "SelectTrigger";
+var SelectContent = React__default.default.forwardRef(
+  ({ className, side = "bottom", sideOffset = 4, align = "start", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(select.Select.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      select.Select.Positioner,
+      {
+        side,
+        sideOffset,
+        align,
+        alignItemWithTrigger: false,
+        children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.Popup, { ref, className: clsx__default.default("ds-select__content", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.List, { className: "ds-select__list", children }) })
+      }
+    ) });
+  }
+);
+SelectContent.displayName = "SelectContent";
+var SelectItem = React__default.default.forwardRef(
+  ({ className, value, children, disabled, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      select.Select.Item,
+      {
+        ref,
+        value,
+        disabled,
+        className: clsx__default.default("ds-select__item", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(select.Select.ItemIndicator, { className: "ds-select__item-indicator", children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(select.Select.ItemText, { children })
+        ]
+      }
+    );
+  }
+);
+SelectItem.displayName = "SelectItem";
+var SelectGroup = React__default.default.forwardRef(
+  ({ className, label, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(select.Select.Group, { ref, className: clsx__default.default("ds-select__group", className), ...props, children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx(select.Select.GroupLabel, { className: "ds-select__group-label", children: label }),
+      children
+    ] });
+  }
+);
+SelectGroup.displayName = "SelectGroup";
+var SelectSeparator = React__default.default.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: clsx__default.default("ds-select__separator", className), ...props });
+});
+SelectSeparator.displayName = "SelectSeparator";
+function ChevronDownIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+
+exports.DropdownMenu = DropdownMenu;
+exports.DropdownMenuContent = DropdownMenuContent;
+exports.DropdownMenuItem = DropdownMenuItem;
+exports.DropdownMenuLabel = DropdownMenuLabel;
+exports.DropdownMenuSeparator = DropdownMenuSeparator;
+exports.DropdownMenuTrigger = DropdownMenuTrigger;
+exports.Select = Select;
+exports.SelectContent = SelectContent;
+exports.SelectGroup = SelectGroup;
+exports.SelectItem = SelectItem;
+exports.SelectSeparator = SelectSeparator;
+exports.SelectTrigger = SelectTrigger;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-3TGSIILM.cjs.map

package/dist/chunk-3TGSIILM.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DropdownMenu/DropdownMenu.tsx","../src/components/Select/Select.tsx"],"names":["React","clsx","jsx"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Menu as BaseMenu } from '@base-ui/react/menu';\nimport clsx from 'clsx';\nimport './DropdownMenu.css';\n\n/* ============================================================================\n   DROPDOWN MENU ROOT\n   ============================================================================ */\n\nexport const DropdownMenu = BaseMenu.Root;\n\n/* ============================================================================\n   DROPDOWN MENU TRIGGER\n   ============================================================================ */\n\nexport const DropdownMenuTrigger = React.forwardRef<\n  HTMLButtonElement,\n  React.ButtonHTMLAttributes<HTMLButtonElement> & { className?: string }\n>(({ className, ...props }, ref) => {\n  return (\n    <BaseMenu.Trigger\n      ref={ref}\n      className={clsx('ds-dropdown-menu__trigger', className)}\n      {...props}\n    />\n  );\n});\n\nDropdownMenuTrigger.displayName = 'DropdownMenuTrigger';\n\n/* ============================================================================\n   DROPDOWN MENU CONTENT\n   ============================================================================ */\n\nexport interface DropdownMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  align?: 'start' | 'center' | 'end';\n  sideOffset?: number;\n  alignOffset?: number;\n}\n\nexport const DropdownMenuContent = React.forwardRef<HTMLDivElement, DropdownMenuContentProps>(\n  (\n    { className, side = 'bottom', align = 'start', sideOffset = 4, alignOffset = 0, ...props },\n    ref,\n  ) => {\n    return (\n      <BaseMenu.Portal>\n        <BaseMenu.Positioner\n          side={side}\n          align={align}\n          sideOffset={sideOffset}\n          alignOffset={alignOffset}\n        >\n          <BaseMenu.Popup\n            ref={ref}\n            className={clsx('ds-dropdown-menu__content', className)}\n            {...props}\n          />\n        </BaseMenu.Positioner>\n      </BaseMenu.Portal>\n    );\n  },\n);\n\nDropdownMenuContent.displayName = 'DropdownMenuContent';\n\n/* ============================================================================\n   DROPDOWN MENU ITEM\n   ============================================================================ */\n\nexport interface DropdownMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  disabled?: boolean;\n}\n\nexport const DropdownMenuItem = React.forwardRef<HTMLDivElement, DropdownMenuItemProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <BaseMenu.Item ref={ref} className={clsx('ds-dropdown-menu__item', className)} {...props} />\n    );\n  },\n);\n\nDropdownMenuItem.displayName = 'DropdownMenuItem';\n\n/* ============================================================================\n   DROPDOWN MENU SEPARATOR\n   ============================================================================ */\n\nexport const DropdownMenuSeparator = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  return <div ref={ref} className={clsx('ds-dropdown-menu__separator', className)} {...props} />;\n});\n\nDropdownMenuSeparator.displayName = 'DropdownMenuSeparator';\n\n/* ============================================================================\n   DROPDOWN MENU LABEL\n   ============================================================================ */\n\nexport const DropdownMenuLabel = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  return <div ref={ref} className={clsx('ds-dropdown-menu__label', className)} {...props} />;\n});\n\nDropdownMenuLabel.displayName = 'DropdownMenuLabel';\n","import React from 'react';\nimport { Select as BaseSelect } from '@base-ui/react/select';\nimport clsx from 'clsx';\nimport './Select.css';\n\n/* ============================================================================\n   SELECT ROOT\n   ============================================================================ */\n\nexport interface SelectProps {\n  /** Current selected value */\n  value?: string;\n  /** Default value for uncontrolled mode */\n  defaultValue?: string;\n  /** Callback when value changes */\n  onValueChange?: (value: string | null) => void;\n  /** Whether the select is disabled */\n  disabled?: boolean;\n  /** Whether the select is required */\n  required?: boolean;\n  /** Name for form submission */\n  name?: string;\n  /**\n   * Item label map for Value display resolution.\n   * When provided, Select.Value renders the label instead of the raw value.\n   * Accepts a record (e.g. `{ en: \"English\", fr: \"French\" }`) or an array\n   * of `{ value, label }` objects.\n   */\n  items?: Record<string, React.ReactNode> | ReadonlyArray<{ label: React.ReactNode; value: string }>;\n  /** Children (SelectTrigger, SelectContent, etc.) */\n  children: React.ReactNode;\n}\n\nexport function Select({\n  value,\n  defaultValue,\n  onValueChange,\n  disabled,\n  required,\n  name,\n  items,\n  children,\n}: SelectProps) {\n  return (\n    <BaseSelect.Root\n      value={value}\n      defaultValue={defaultValue}\n      onValueChange={onValueChange ? (val) => onValueChange(val) : undefined}\n      disabled={disabled}\n      required={required}\n      name={name}\n      items={items}\n    >\n      {children}\n    </BaseSelect.Root>\n  );\n}\n\nSelect.displayName = 'Select';\n\n/* ============================================================================\n   SELECT TRIGGER\n   ============================================================================ */\n\nexport interface SelectTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Placeholder text when no value selected */\n  placeholder?: string;\n  /** Size variant */\n  size?: 'sm' | 'md' | 'lg';\n}\n\nexport const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(\n  ({ className, placeholder = 'Select...', size = 'md', ...props }, ref) => {\n    return (\n      <div className=\"ds-select__trigger-wrapper\">\n        <BaseSelect.Trigger\n          ref={ref}\n          className={clsx('ds-select__trigger', `ds-select__trigger--${size}`, className)}\n          aria-label={props['aria-label'] || (typeof placeholder === 'string' ? placeholder : 'Select')}\n          {...props}\n        >\n          <BaseSelect.Value className=\"ds-select__value\" placeholder={placeholder} />\n          <BaseSelect.Icon className=\"ds-select__icon\" aria-hidden>\n            <ChevronDownIcon />\n          </BaseSelect.Icon>\n        </BaseSelect.Trigger>\n      </div>\n    );\n  },\n);\n\nSelectTrigger.displayName = 'SelectTrigger';\n\n/* ============================================================================\n   SELECT CONTENT\n   ============================================================================ */\n\nexport interface SelectContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Positioning side */\n  side?: 'top' | 'bottom';\n  /** Side offset in pixels */\n  sideOffset?: number;\n  /** Alignment */\n  align?: 'start' | 'center' | 'end';\n}\n\nexport const SelectContent = React.forwardRef<HTMLDivElement, SelectContentProps>(\n  ({ className, side = 'bottom', sideOffset = 4, align = 'start', children, ...props }, ref) => {\n    return (\n      <BaseSelect.Portal>\n        <BaseSelect.Positioner\n          side={side}\n          sideOffset={sideOffset}\n          align={align}\n          alignItemWithTrigger={false}\n        >\n          <BaseSelect.Popup ref={ref} className={clsx('ds-select__content', className)} {...props}>\n            <BaseSelect.List className=\"ds-select__list\">\n              {children}\n            </BaseSelect.List>\n          </BaseSelect.Popup>\n        </BaseSelect.Positioner>\n      </BaseSelect.Portal>\n    );\n  },\n);\n\nSelectContent.displayName = 'SelectContent';\n\n/* ============================================================================\n   SELECT ITEM\n   ============================================================================ */\n\nexport interface SelectItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  /** Value for this option */\n  value: string;\n  /** Display text */\n  children: React.ReactNode;\n  /** Whether the item is disabled */\n  disabled?: boolean;\n}\n\nexport const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(\n  ({ className, value, children, disabled, ...props }, ref) => {\n    return (\n      <BaseSelect.Item\n        ref={ref}\n        value={value}\n        disabled={disabled}\n        className={clsx('ds-select__item', className)}\n        {...props}\n      >\n        <BaseSelect.ItemIndicator className=\"ds-select__item-indicator\">\n          <CheckIcon />\n        </BaseSelect.ItemIndicator>\n        <BaseSelect.ItemText>{children}</BaseSelect.ItemText>\n      </BaseSelect.Item>\n    );\n  },\n);\n\nSelectItem.displayName = 'SelectItem';\n\n/* ============================================================================\n   SELECT GROUP\n   ============================================================================ */\n\nexport interface SelectGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Group label */\n  label?: string;\n}\n\nexport const SelectGroup = React.forwardRef<HTMLDivElement, SelectGroupProps>(\n  ({ className, label, children, ...props }, ref) => {\n    return (\n      <BaseSelect.Group ref={ref} className={clsx('ds-select__group', className)} {...props}>\n        {label && (\n          <BaseSelect.GroupLabel className=\"ds-select__group-label\">{label}</BaseSelect.GroupLabel>\n        )}\n        {children}\n      </BaseSelect.Group>\n    );\n  },\n);\n\nSelectGroup.displayName = 'SelectGroup';\n\n/* ============================================================================\n   SELECT SEPARATOR\n   ============================================================================ */\n\nexport const SelectSeparator = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n  return <div ref={ref} className={clsx('ds-select__separator', className)} {...props} />;\n});\n\nSelectSeparator.displayName = 'SelectSeparator';\n\n/* ============================================================================\n   ICONS\n   ============================================================================ */\n\nfunction ChevronDownIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"m6 9 6 6 6-6\" />\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"14\"\n      height=\"14\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <polyline points=\"20 6 9 17 4 12\" />\n    </svg>\n  );\n}\n"]}