@hyddenlabs/hydn-ui 0.3.0-alpha.99 → 0.3.1

package/dist/theme/size-tokens.js

@@ -0,0 +1,636 @@
+const visualSizes = {
+  xs: {
+    classes: "w-3.5 h-3.5 sm:w-3 sm:h-3",
+    // 20px mobile, 16px desktop
+    pixels: { mobile: 20, desktop: 16 }
+  },
+  sm: {
+    classes: "w-5 h-5 sm:w-4 sm:h-4",
+    // 24px mobile, 20px desktop
+    pixels: { mobile: 24, desktop: 20 }
+  },
+  md: {
+    classes: "w-6 h-6 sm:w-5 sm:h-5",
+    // 28px mobile, 24px desktop
+    pixels: { mobile: 28, desktop: 24 }
+  },
+  lg: {
+    classes: "w-7 h-7 sm:w-6 sm:h-6",
+    // 32px mobile, 28px desktop
+    pixels: { mobile: 32, desktop: 28 }
+  },
+  xl: {
+    classes: "w-8 h-8 sm:w-7 sm:h-7",
+    // 36px mobile, 32px desktop
+    pixels: { mobile: 36, desktop: 32 }
+  },
+  "2xl": {
+    classes: "w-9 h-9 sm:w-8 sm:h-8",
+    // 40px mobile, 36px desktop
+    pixels: { mobile: 40, desktop: 36 }
+  },
+  "3xl": {
+    classes: "w-12 h-12 sm:w-10 sm:h-10",
+    // 52px mobile, 44px desktop
+    pixels: { mobile: 52, desktop: 44 }
+  }
+};
+const spinnerBorderWidths = {
+  xs: "border",
+  sm: "border-2",
+  md: "border-2",
+  lg: "border-2",
+  xl: "border-[3px]",
+  "2xl": "border-[3px]",
+  "3xl": "border-4"
+};
+const spinnerSizes = Object.keys(visualSizes).reduce(
+  (acc, size) => {
+    acc[size] = {
+      ...visualSizes[size],
+      border: spinnerBorderWidths[size]
+    };
+    return acc;
+  },
+  {}
+);
+const avatarSizes = {
+  xs: {
+    classes: "w-8 h-8 sm:w-6 sm:h-6",
+    text: "text-sm sm:text-xs"
+  },
+  sm: {
+    classes: "w-10 h-10 sm:w-8 sm:h-8",
+    text: "text-base sm:text-sm"
+  },
+  md: {
+    classes: "w-12 h-12 sm:w-10 sm:h-10",
+    text: "text-lg sm:text-base"
+  },
+  lg: {
+    classes: "w-14 h-14 sm:w-12 sm:h-12",
+    text: "text-xl sm:text-lg"
+  },
+  xl: {
+    classes: "w-20 h-20 sm:w-16 sm:h-16",
+    text: "text-2xl sm:text-xl"
+  },
+  "2xl": {
+    classes: "w-24 h-24 sm:w-20 sm:h-20",
+    text: "text-3xl sm:text-2xl"
+  },
+  "3xl": {
+    classes: "w-28 h-28 sm:w-24 sm:h-24",
+    text: "text-4xl sm:text-3xl"
+  }
+};
+const logoSizes = {
+  xs: { classes: "h-5 w-5 sm:h-4 sm:w-4" },
+  sm: { classes: "h-7 w-7 sm:h-6 sm:w-6" },
+  md: { classes: "h-9 w-9 sm:h-8 sm:w-8" },
+  lg: { classes: "h-12 w-12 sm:h-10 sm:w-10" },
+  xl: { classes: "h-14 w-14 sm:h-12 sm:w-12" },
+  "2xl": { classes: "h-20 w-20 sm:h-16 sm:w-16" },
+  "3xl": { classes: "h-24 w-24 sm:h-20 sm:w-20" }
+};
+const interactiveSizes = {
+  xs: {
+    height: "h-8 sm:h-6 min-h-8 sm:min-h-6",
+    padding: "px-3 sm:px-2",
+    text: "text-sm sm:text-xs",
+    icon: visualSizes.xs
+  },
+  sm: {
+    height: "h-10 sm:h-8 min-h-10 sm:min-h-8",
+    padding: "px-4 sm:px-3",
+    text: "text-base sm:text-sm",
+    icon: visualSizes.sm
+  },
+  md: {
+    height: "h-12 sm:h-10 min-h-12 sm:min-h-10",
+    padding: "px-5 sm:px-4",
+    text: "text-base sm:text-sm",
+    icon: visualSizes.md
+  },
+  lg: {
+    height: "h-14 sm:h-12 min-h-14 sm:min-h-12",
+    padding: "px-7 sm:px-6",
+    text: "text-lg sm:text-base",
+    icon: visualSizes.lg
+  },
+  xl: {
+    height: "h-16 sm:h-14 min-h-16 sm:min-h-14",
+    padding: "px-9 sm:px-8",
+    text: "text-xl sm:text-lg",
+    icon: visualSizes.xl
+  }
+};
+const inputWidthSizes = {
+  xs: "w-14 sm:w-16",
+  // ~4 chars - ZIP codes, years
+  sm: "w-20 sm:w-24",
+  // ~6-8 chars - short codes, area codes
+  md: "w-40 sm:w-48",
+  // ~12-16 chars - medium text (default)
+  lg: "w-56 sm:w-64",
+  // ~20-24 chars - names, emails
+  xl: "w-72 sm:w-80",
+  // ~28-32 chars - long text
+  "2xl": "w-80 sm:w-96",
+  // ~36-40 chars - very long text
+  "1/4": "w-1/4",
+  // 25% of container
+  "1/2": "w-1/2",
+  // 50% of container
+  "3/4": "w-3/4",
+  // 75% of container
+  full: "w-full",
+  // 100% of container
+  fit: "w-fit",
+  // intrinsic width based on content (shrink-to-fit)
+  auto: "w-auto"
+  // default width behavior (layout-dependent)
+};
+const badgeSizes = {
+  sm: {
+    classes: "px-2.5 sm:px-2 py-1 sm:py-0.5 text-sm sm:text-xs",
+    icon: visualSizes.xs
+  },
+  md: {
+    classes: "px-3 sm:px-2.5 py-1 sm:py-0.5 text-sm sm:text-xs font-semibold",
+    icon: visualSizes.sm
+  },
+  lg: {
+    classes: "px-4 sm:px-3 py-1.5 sm:py-1 text-base sm:text-sm font-semibold",
+    icon: visualSizes.md
+  }
+};
+const chipSizes = {
+  xs: {
+    classes: "px-2 sm:px-1.5 py-1 sm:py-0.5 text-sm sm:text-xs gap-1 sm:gap-0.5",
+    icon: visualSizes.xs
+  },
+  sm: {
+    classes: "px-2.5 sm:px-2 py-1.5 sm:py-1 text-sm sm:text-xs gap-1.5 sm:gap-1",
+    icon: visualSizes.sm
+  },
+  md: {
+    classes: "px-3.5 sm:px-3 py-2 sm:py-1.5 text-base sm:text-sm gap-2 sm:gap-1.5",
+    icon: visualSizes.md
+  },
+  lg: {
+    classes: "px-5 sm:px-4 py-2.5 sm:py-2 text-lg sm:text-base gap-2.5 sm:gap-2",
+    icon: visualSizes.lg
+  },
+  xl: {
+    classes: "px-6 sm:px-5 py-3 sm:py-2.5 text-xl sm:text-lg gap-3 sm:gap-2.5",
+    icon: visualSizes.xl
+  },
+  "2xl": {
+    classes: "px-7 sm:px-6 py-3.5 sm:py-3 text-2xl sm:text-xl gap-3.5 sm:gap-3",
+    icon: visualSizes["2xl"]
+  },
+  "3xl": {
+    classes: "px-8 sm:px-7 py-4 sm:py-3.5 text-3xl sm:text-2xl gap-4 sm:gap-3.5",
+    icon: visualSizes["3xl"]
+  }
+};
+const codeSizes = {
+  sm: "text-xs px-1 py-0.5",
+  md: "text-sm px-1.5 py-0.5",
+  lg: "text-base px-2 py-1"
+};
+const statusLabelSizes = {
+  sm: {
+    container: "px-2 py-0.5 text-xs gap-1.5",
+    dot: "w-1.5 h-1.5"
+  },
+  md: {
+    container: "px-2.5 py-0.5 text-sm gap-2",
+    dot: "w-2 h-2"
+  },
+  lg: {
+    container: "px-3 py-1 text-base gap-2",
+    dot: "w-2.5 h-2.5"
+  }
+};
+const textSizes = {
+  xs: "text-sm sm:text-xs",
+  sm: "text-base sm:text-sm",
+  base: "text-base",
+  lg: "text-lg",
+  xl: "text-xl sm:text-lg",
+  "2xl": "text-2xl",
+  "3xl": "text-3xl",
+  "4xl": "text-4xl",
+  "5xl": "text-5xl"
+};
+const headingSizes = {
+  sm: "text-base font-semibold",
+  md: "text-lg font-bold",
+  lg: "text-xl font-bold",
+  xl: "text-2xl font-bold",
+  "2xl": "text-3xl font-bold sm:text-2xl",
+  "3xl": "text-4xl font-bold sm:text-3xl",
+  "4xl": "text-5xl font-bold sm:text-4xl"
+};
+const cardSizes = {
+  xs: "w-full sm:max-w-36",
+  sm: "w-full sm:max-w-64",
+  md: "w-full sm:max-w-96",
+  lg: "w-full sm:max-w-[28rem]",
+  xl: "w-full sm:max-w-[32rem]",
+  "2xl": "w-full sm:max-w-[36rem]",
+  full: "w-full"
+};
+const gapSizes = {
+  none: "gap-0",
+  xs: "gap-2 sm:gap-1",
+  sm: "gap-3 sm:gap-2",
+  md: "gap-5 sm:gap-4",
+  lg: "gap-7 sm:gap-6",
+  xl: "gap-10 sm:gap-8",
+  "2xl": "gap-14 sm:gap-12",
+  "3xl": "gap-20 sm:gap-16"
+};
+const containerWidth = {
+  sm: "max-w-screen-sm",
+  md: "max-w-screen-md",
+  lg: "max-w-screen-lg",
+  xl: "max-w-screen-xl",
+  "2xl": "max-w-screen-2xl",
+  "3xl": "max-w-[1920px]",
+  full: "max-w-full",
+  screen: "max-w-[100vw]",
+  none: ""
+};
+const containerHeight = {
+  xs: "h-[10rem]",
+  // 160px
+  sm: "h-[15rem]",
+  // 240px
+  md: "h-[20rem]",
+  // 320px
+  lg: "h-[25rem]",
+  // 400px
+  xl: "h-[30rem]",
+  // 480px
+  "2xl": "h-[35rem]",
+  // 560px
+  "3xl": "h-[40rem]",
+  // 640px
+  full: "h-full",
+  screen: "h-screen",
+  none: ""
+};
+const containerMinWidths = {
+  xs: "min-w-[20rem]",
+  // 320px
+  sm: "min-w-[24rem]",
+  // 384px
+  md: "min-w-[28rem]",
+  // 448px
+  lg: "min-w-[32rem]",
+  // 512px
+  xl: "min-w-[36rem]",
+  // 576px
+  "2xl": "min-w-[42rem]",
+  // 672px
+  "3xl": "min-w-[48rem]",
+  // 768px
+  full: "min-w-full",
+  screen: "min-w-screen",
+  none: ""
+};
+const containerMaxWidths = {
+  xs: "max-w-[20rem]",
+  // 320px
+  sm: "max-w-[24rem]",
+  // 384px
+  md: "max-w-[28rem]",
+  // 448px
+  lg: "max-w-[32rem]",
+  // 512px
+  xl: "max-w-[36rem]",
+  // 576px
+  "2xl": "max-w-[42rem]",
+  // 672px
+  "3xl": "max-w-[48rem]",
+  // 768px
+  full: "max-w-full",
+  screen: "max-w-screen",
+  none: ""
+};
+const containerMinHeights = {
+  xs: "min-h-[10rem]",
+  // 160px
+  sm: "min-h-[15rem]",
+  // 240px
+  md: "min-h-[20rem]",
+  // 320px
+  lg: "min-h-[25rem]",
+  // 400px
+  xl: "min-h-[30rem]",
+  // 480px
+  "2xl": "min-h-[35rem]",
+  // 560px
+  "3xl": "min-h-[40rem]",
+  // 640px
+  full: "min-h-full",
+  screen: "min-h-screen",
+  none: ""
+};
+const containerMaxHeights = {
+  xs: "max-h-[10rem]",
+  // 160px
+  sm: "max-h-[15rem]",
+  // 240px
+  md: "max-h-[20rem]",
+  // 320px
+  lg: "max-h-[25rem]",
+  // 400px
+  xl: "max-h-[30rem]",
+  // 480px
+  "2xl": "max-h-[35rem]",
+  // 560px
+  "3xl": "max-h-[40rem]",
+  // 640px
+  full: "max-h-full",
+  screen: "max-h-screen",
+  none: ""
+};
+const stackWidths = {
+  sm: "w-screen-sm",
+  md: "w-screen-md",
+  lg: "w-screen-lg",
+  xl: "w-screen-xl",
+  "2xl": "w-screen-2xl",
+  "3xl": "w-[1920px]",
+  "1/4": "w-1/4",
+  "1/2": "w-1/2",
+  "3/4": "w-3/4",
+  full: "w-full",
+  screen: "w-[100vw]",
+  auto: "w-auto",
+  none: ""
+};
+const stackHeights = {
+  xs: "h-[10rem]",
+  // 160px
+  sm: "h-[15rem]",
+  // 240px
+  md: "h-[20rem]",
+  // 320px
+  lg: "h-[25rem]",
+  // 400px
+  xl: "h-[30rem]",
+  // 480px
+  "2xl": "h-[35rem]",
+  // 560px
+  "3xl": "h-[40rem]",
+  // 640px
+  "1/4": "h-1/4",
+  "1/2": "h-1/2",
+  "3/4": "h-3/4",
+  full: "h-full",
+  screen: "h-screen",
+  auto: "h-auto",
+  none: ""
+};
+const stackMinWidths = {
+  xs: "min-w-[20rem]",
+  // 320px
+  sm: "min-w-[24rem]",
+  // 384px
+  md: "min-w-[28rem]",
+  // 448px
+  lg: "min-w-[32rem]",
+  // 512px
+  xl: "min-w-[36rem]",
+  // 576px
+  "2xl": "min-w-[42rem]",
+  // 672px
+  "3xl": "min-w-[48rem]",
+  // 768px
+  "1/4": "min-w-1/4",
+  "1/2": "min-w-1/2",
+  "3/4": "min-w-3/4",
+  full: "min-w-full",
+  screen: "min-w-screen",
+  none: ""
+};
+const stackMaxWidths = {
+  xs: "max-w-[20rem]",
+  // 320px
+  sm: "max-w-[24rem]",
+  // 384px
+  md: "max-w-[28rem]",
+  // 448px
+  lg: "max-w-[32rem]",
+  // 512px
+  xl: "max-w-[36rem]",
+  // 576px
+  "2xl": "max-w-[42rem]",
+  // 672px
+  "3xl": "max-w-[48rem]",
+  // 768px
+  "1/4": "max-w-1/4",
+  "1/2": "max-w-1/2",
+  "3/4": "max-w-3/4",
+  full: "max-w-full",
+  screen: "max-w-screen",
+  none: ""
+};
+const stackMinHeights = {
+  xs: "min-h-[10rem]",
+  // 160px
+  sm: "min-h-[15rem]",
+  // 240px
+  md: "min-h-[20rem]",
+  // 320px
+  lg: "min-h-[25rem]",
+  // 400px
+  xl: "min-h-[30rem]",
+  // 480px
+  "2xl": "min-h-[35rem]",
+  // 560px
+  "3xl": "min-h-[40rem]",
+  // 640px
+  "1/4": "min-h-1/4",
+  "1/2": "min-h-1/2",
+  "3/4": "min-h-3/4",
+  full: "min-h-full",
+  screen: "min-h-screen",
+  none: ""
+};
+const stackMaxHeights = {
+  xs: "max-h-[10rem]",
+  // 160px
+  sm: "max-h-[15rem]",
+  // 240px
+  md: "max-h-[20rem]",
+  // 320px
+  lg: "max-h-[25rem]",
+  // 400px
+  xl: "max-h-[30rem]",
+  // 480px
+  "2xl": "max-h-[35rem]",
+  // 560px
+  "3xl": "max-h-[40rem]",
+  // 640px
+  "1/4": "max-h-1/4",
+  "1/2": "max-h-1/2",
+  "3/4": "max-h-3/4",
+  full: "max-h-full",
+  screen: "max-h-screen",
+  none: ""
+};
+const sectionPadding = {
+  none: "py-0",
+  xs: "py-6 sm:py-4",
+  sm: "py-10 sm:py-8",
+  md: "py-16 sm:py-12",
+  lg: "py-20 sm:py-16",
+  xl: "py-28 sm:py-24",
+  "2xl": "py-36 sm:py-32"
+};
+const cardPadding = {
+  none: "p-0",
+  xs: "p-3 sm:p-2",
+  sm: "p-5 sm:p-4",
+  md: "p-7 sm:p-6",
+  lg: "p-9 sm:p-8",
+  xl: "p-12 sm:p-10",
+  "2xl": "p-14 sm:p-12"
+};
+const cardMargin = {
+  none: "m-0",
+  xs: "m-3 sm:m-2",
+  sm: "m-5 sm:m-4",
+  md: "m-7 sm:m-6",
+  lg: "m-9 sm:m-8",
+  xl: "m-12 sm:m-10",
+  "2xl": "m-14 sm:m-12"
+};
+const marginX = {
+  none: "",
+  auto: "mx-auto",
+  xs: "mx-3 sm:mx-2",
+  sm: "mx-5 sm:mx-4",
+  md: "mx-7 sm:mx-6",
+  lg: "mx-9 sm:mx-8",
+  xl: "mx-12 sm:mx-10",
+  "2xl": "mx-14 sm:mx-12"
+};
+const marginY = {
+  none: "",
+  auto: "my-auto",
+  xs: "my-3 sm:my-2",
+  sm: "my-5 sm:my-4",
+  md: "my-7 sm:my-6",
+  lg: "my-9 sm:my-8",
+  xl: "my-12 sm:my-10",
+  "2xl": "my-14 sm:my-12"
+};
+const overlaySizes = {
+  xs: "w-full sm:w-64",
+  sm: "w-full sm:w-80",
+  md: "w-full sm:w-96",
+  lg: "w-full sm:w-[28rem]",
+  xl: "w-full sm:w-[32rem]",
+  "2xl": "w-full sm:w-[40rem]",
+  "3xl": "w-full sm:w-[48rem]",
+  full: "w-full max-w-2xl"
+};
+const borderRadius = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-2xl",
+  "3xl": "rounded-3xl",
+  full: "rounded-full"
+};
+const validationBorderClasses = {
+  neutral: "border-input focus:border-ring",
+  error: "border-error focus:border-error",
+  success: "border-success focus:border-success",
+  warning: "border-warning focus:border-warning"
+};
+const validationRingClasses = {
+  neutral: "focus:ring-ring/20",
+  error: "focus:ring-error/20",
+  success: "focus:ring-success/20",
+  warning: "focus:ring-warning/20"
+};
+const validationTextClasses = {
+  neutral: "text-neutral-foreground",
+  error: "text-error",
+  success: "text-success",
+  warning: "text-warning"
+};
+const inputBaseClasses = "flex rounded-lg border bg-background shadow-sm transition-all duration-200 placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50";
+function getInputClasses(size, validationState) {
+  const sizeConfig = interactiveSizes[size];
+  return `${inputBaseClasses} ${sizeConfig.height} px-4 sm:px-3 overflow-visible ${sizeConfig.text} ${validationBorderClasses[validationState]} ${validationRingClasses[validationState]}`;
+}
+const formSpacing = {
+  none: "gap-0",
+  xs: "gap-1",
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6",
+  xl: "gap-8"
+};
+function getIconPixels(size, variant = "desktop") {
+  if (typeof size === "number") return size;
+  return visualSizes?.[size]?.pixels?.[variant] ?? 0;
+}
+function getVisualClasses(size) {
+  return visualSizes[size].classes;
+}
+export {
+  avatarSizes,
+  badgeSizes,
+  borderRadius,
+  cardMargin,
+  cardPadding,
+  cardSizes,
+  chipSizes,
+  codeSizes,
+  containerHeight,
+  containerMaxHeights,
+  containerMaxWidths,
+  containerMinHeights,
+  containerMinWidths,
+  containerWidth,
+  formSpacing,
+  gapSizes,
+  getIconPixels,
+  getInputClasses,
+  getVisualClasses,
+  headingSizes,
+  inputBaseClasses,
+  inputWidthSizes,
+  interactiveSizes,
+  logoSizes,
+  marginX,
+  marginY,
+  overlaySizes,
+  sectionPadding,
+  spinnerSizes,
+  stackHeights,
+  stackMaxHeights,
+  stackMaxWidths,
+  stackMinHeights,
+  stackMinWidths,
+  stackWidths,
+  statusLabelSizes,
+  textSizes,
+  validationBorderClasses,
+  validationRingClasses,
+  validationTextClasses,
+  visualSizes
+};
+//# sourceMappingURL=size-tokens.js.map