@ponti-studios/ui 0.1.2 → 0.4.0

package/src/tokens/generated/foundations.css

@@ -0,0 +1,148 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --spacing: 0.25rem;
+  --spacing-scale-0: 0rem;
+  --spacing-scale-1: 0.25rem;
+  --spacing-scale-2: 0.5rem;
+  --spacing-scale-3: 0.75rem;
+  --spacing-scale-4: 1rem;
+  --spacing-scale-5: 1.25rem;
+  --spacing-scale-6: 1.5rem;
+  --spacing-scale-7: 1.75rem;
+  --spacing-scale-8: 2rem;
+  --spacing-scale-9: 2.25rem;
+  --spacing-scale-10: 2.5rem;
+  --spacing-scale-11: 2.75rem;
+  --spacing-scale-12: 3rem;
+  --spacing-scale-14: 3.5rem;
+  --spacing-scale-16: 4rem;
+  --spacing-scale-20: 5rem;
+  --spacing-scale-24: 6rem;
+  --spacing-scale-28: 7rem;
+  --spacing-scale-32: 8rem;
+  --spacing-scale-36: 9rem;
+  --spacing-scale-40: 10rem;
+  --spacing-scale-44: 11rem;
+  --spacing-scale-48: 12rem;
+  --spacing-scale-52: 13rem;
+  --spacing-scale-56: 14rem;
+  --spacing-scale-60: 15rem;
+  --spacing-scale-64: 16rem;
+  --spacing-scale-72: 18rem;
+  --spacing-scale-80: 20rem;
+  --spacing-scale-96: 24rem;
+  --spacing-scale-px: 1px;
+  --spacing-scale-0-5: 0.125rem;
+  --spacing-scale-1-5: 0.375rem;
+  --spacing-scale-2-5: 0.625rem;
+  --spacing-scale-3-5: 0.875rem;
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-serif: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
+  --text-5xl: 3rem;
+  --text-6xl: 3.75rem;
+  --text-7xl: 4.5rem;
+  --text-8xl: 6rem;
+  --text-9xl: 8rem;
+  --text-line-height-xs: 1.3333333333;
+  --text-line-height-sm: 1.4285714286;
+  --text-line-height-base: 1.5;
+  --text-line-height-lg: 1.5555555556;
+  --text-line-height-xl: 1.4;
+  --text-line-height-2xl: 1.3333333333;
+  --text-line-height-3xl: 1.2;
+  --text-line-height-4xl: 1.1111111111;
+  --text-line-height-5xl: 1;
+  --text-line-height-6xl: 1;
+  --text-line-height-7xl: 1;
+  --text-line-height-8xl: 1;
+  --text-line-height-9xl: 1;
+  --font-weight-thin: 100;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-weight-black: 900;
+  --tracking-tighter: -0.05em;
+  --tracking-tight: -0.025em;
+  --tracking-normal: 0em;
+  --tracking-wide: 0.025em;
+  --tracking-wider: 0.05em;
+  --tracking-widest: 0.1em;
+  --leading-tight: 1.25;
+  --leading-snug: 1.375;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.625;
+  --leading-loose: 2;
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+  --radius-4xl: 2rem;
+  --radius-full: 9999px;
+  --shadow-2xs: 0px 1px 0px 0px rgb(0 0 0 / 0.05);
+  --shadow-xs: 0px 1px 2px 0px rgb(0 0 0 / 0.05);
+  --shadow-sm: 0px 1px 3px 0px rgb(0 0 0 / 0.1), 0px 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-md: 0px 4px 6px -1px rgb(0 0 0 / 0.1), 0px 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0px 10px 15px -3px rgb(0 0 0 / 0.1), 0px 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0px 20px 25px -5px rgb(0 0 0 / 0.1), 0px 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0px 25px 50px -12px rgb(0 0 0 / 0.25);
+  --shadow-none: 0px 0px 0px 0px transparent;
+  --breakpoint-sm: 40rem;
+  --breakpoint-md: 48rem;
+  --breakpoint-lg: 64rem;
+  --breakpoint-xl: 80rem;
+  --breakpoint-2xl: 96rem;
+  --container-3xs: 16rem;
+  --container-2xs: 18rem;
+  --container-xs: 20rem;
+  --container-sm: 24rem;
+  --container-md: 28rem;
+  --container-lg: 32rem;
+  --container-xl: 36rem;
+  --container-2xl: 42rem;
+  --container-3xl: 48rem;
+  --container-4xl: 56rem;
+  --container-5xl: 64rem;
+  --container-6xl: 72rem;
+  --container-7xl: 80rem;
+  --z-index-0: 0;
+  --z-index-10: 10;
+  --z-index-20: 20;
+  --z-index-30: 30;
+  --z-index-40: 40;
+  --z-index-50: 50;
+  --z-index-auto: auto;
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --duration-75: 75ms;
+  --duration-100: 100ms;
+  --duration-150: 150ms;
+  --duration-200: 200ms;
+  --duration-300: 300ms;
+  --duration-500: 500ms;
+  --duration-700: 700ms;
+  --duration-1000: 1000ms;
+  --animate-spin: spin 1s linear infinite;
+  --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animate-bounce: bounce 1s infinite;
+}

package/src/tokens/generated/foundations.generated.ts

@@ -0,0 +1,451 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  spacing: "0.25rem",
+  "spacing-scale": {
+    0: "0rem",
+    1: "0.25rem",
+    2: "0.5rem",
+    3: "0.75rem",
+    4: "1rem",
+    5: "1.25rem",
+    6: "1.5rem",
+    7: "1.75rem",
+    8: "2rem",
+    9: "2.25rem",
+    10: "2.5rem",
+    11: "2.75rem",
+    12: "3rem",
+    14: "3.5rem",
+    16: "4rem",
+    20: "5rem",
+    24: "6rem",
+    28: "7rem",
+    32: "8rem",
+    36: "9rem",
+    40: "10rem",
+    44: "11rem",
+    48: "12rem",
+    52: "13rem",
+    56: "14rem",
+    60: "15rem",
+    64: "16rem",
+    72: "18rem",
+    80: "20rem",
+    96: "24rem",
+    px: "1px",
+    "0-5": "0.125rem",
+    "1-5": "0.375rem",
+    "2-5": "0.625rem",
+    "3-5": "0.875rem",
+  },
+  font: {
+    sans: [
+      "system-ui",
+      "-apple-system",
+      "BlinkMacSystemFont",
+      "Segoe UI",
+      "Roboto",
+      "Helvetica Neue",
+      "Noto Sans",
+      "Arial",
+      "sans-serif",
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      "Noto Color Emoji",
+    ],
+    serif: [
+      "system-ui",
+      "-apple-system",
+      "BlinkMacSystemFont",
+      "Segoe UI",
+      "Roboto",
+      "Helvetica Neue",
+      "Noto Sans",
+      "Arial",
+      "sans-serif",
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      "Noto Color Emoji",
+    ],
+    mono: [
+      "ui-monospace",
+      "SFMono-Regular",
+      "Menlo",
+      "Monaco",
+      "Consolas",
+      "Liberation Mono",
+      "Courier New",
+      "monospace",
+    ],
+  },
+  text: {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    base: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "1.875rem",
+    "4xl": "2.25rem",
+    "5xl": "3rem",
+    "6xl": "3.75rem",
+    "7xl": "4.5rem",
+    "8xl": "6rem",
+    "9xl": "8rem",
+  },
+  "text-line-height": {
+    xs: 1.3333333333,
+    sm: 1.4285714286,
+    base: 1.5,
+    lg: 1.5555555556,
+    xl: 1.4,
+    "2xl": 1.3333333333,
+    "3xl": 1.2,
+    "4xl": 1.1111111111,
+    "5xl": 1,
+    "6xl": 1,
+    "7xl": 1,
+    "8xl": 1,
+    "9xl": 1,
+  },
+  "font-weight": {
+    thin: 100,
+    extralight: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+    black: 900,
+  },
+  tracking: {
+    tighter: "-0.05em",
+    tight: "-0.025em",
+    normal: "0em",
+    wide: "0.025em",
+    wider: "0.05em",
+    widest: "0.1em",
+  },
+  leading: {
+    tight: 1.25,
+    snug: 1.375,
+    normal: 1.5,
+    relaxed: 1.625,
+    loose: 2,
+  },
+  radius: {
+    xs: "0.125rem",
+    sm: "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    "2xl": "1rem",
+    "3xl": "1.5rem",
+    "4xl": "2rem",
+    full: "9999px",
+  },
+  shadow: {
+    "2xs": [
+      {
+        color: "rgb(0 0 0 / 0.05)",
+        offsetX: {
+          value: 0,
+          unit: "px",
+        },
+        offsetY: {
+          value: 1,
+          unit: "px",
+        },
+        blur: {
+          value: 0,
+          unit: "px",
+        },
+        spread: {
+          value: 0,
+          unit: "px",
+        },
+      },
+    ],
+    xs: [
+      {
+        color: "rgb(0 0 0 / 0.05)",
+        offsetX: {
+          value: 0,
+          unit: "px",
+        },
+        offsetY: {
+          value: 1,
+          unit: "px",
+        },
+        blur: {
+          value: 2,
+          unit: "px",
+        },
+        spread: {
+          value: 0,
+          unit: "px",
+        },
+      },
+    ],
+    sm: [
+      {
+        color: "rgb(0 0 0 / 0.1)",
+        offsetX: {
+          value: 0,
+          unit: "px",
+        },
+        offsetY: {
+          value: 1,
+          unit: "px",
+        },
+        blur: {
+          value: 3,
+          unit: "px",
+        },
+        spread: {
+          value: 0,
+          unit: "px",
+        },
+      },
+      {
+        color: "rgb(0 0 0 / 0.1)",
+        offsetX: {
+          value: 0,
+          unit: "px",
+        },
+        offsetY: {
+          value: 1,
+          unit: "px",
+        },
+        blur: {
+          value: 2,
+          unit: "px",
+        },
+        spread: {
+          value: -1,
+          unit: "px",
+        },
+      },
+    ],
+    md: [
+      {
+        color: "rgb(0 0 0 / 0.1)",
+        offsetX: {
+          value: 0,
+          unit: "px",
+        },
+        offsetY: {
+          value: 4,
+          unit: "px",
+        },
+        blur: {
+          value: 6,
+          unit: "px",
+        },
+        spread: {
+          value: -1,
+          unit: "px",
+        },
+      },
+      {
+        color: "rgb(0 0 0 / 0.1)",
+        offsetX: {
+          value: 0,
+          unit: "px",
+        },
+        offsetY: {
+          value: 2,
+          unit: "px",
+        },
+        blur: {
+          value: 4,
+          unit: "px",
+        },
+        spread: {
+          value: -2,
+          unit: "px",
+        },
+      },
+    ],
+    lg: [
+      {
+        color: "rgb(0 0 0 / 0.1)",
+        offsetX: {
+          value: 0,
+          unit: "px",
+        },
+        offsetY: {
+          value: 10,
+          unit: "px",
+        },
+        blur: {
+          value: 15,
+          unit: "px",
+        },
+        spread: {
+          value: -3,
+          unit: "px",
+        },
+      },
+      {
+        color: "rgb(0 0 0 / 0.1)",
+        offsetX: {
+          value: 0,
+          unit: "px",
+        },
+        offsetY: {
+          value: 4,
+          unit: "px",
+        },
+        blur: {
+          value: 6,
+          unit: "px",
+        },
+        spread: {
+          value: -4,
+          unit: "px",
+        },
+      },
+    ],
+    xl: [
+      {
+        color: "rgb(0 0 0 / 0.1)",
+        offsetX: {
+          value: 0,
+          unit: "px",
+        },
+        offsetY: {
+          value: 20,
+          unit: "px",
+        },
+        blur: {
+          value: 25,
+          unit: "px",
+        },
+        spread: {
+          value: -5,
+          unit: "px",
+        },
+      },
+      {
+        color: "rgb(0 0 0 / 0.1)",
+        offsetX: {
+          value: 0,
+          unit: "px",
+        },
+        offsetY: {
+          value: 8,
+          unit: "px",
+        },
+        blur: {
+          value: 10,
+          unit: "px",
+        },
+        spread: {
+          value: -6,
+          unit: "px",
+        },
+      },
+    ],
+    "2xl": [
+      {
+        color: "rgb(0 0 0 / 0.25)",
+        offsetX: {
+          value: 0,
+          unit: "px",
+        },
+        offsetY: {
+          value: 25,
+          unit: "px",
+        },
+        blur: {
+          value: 50,
+          unit: "px",
+        },
+        spread: {
+          value: -12,
+          unit: "px",
+        },
+      },
+    ],
+    none: [
+      {
+        color: "transparent",
+        offsetX: {
+          value: 0,
+          unit: "px",
+        },
+        offsetY: {
+          value: 0,
+          unit: "px",
+        },
+        blur: {
+          value: 0,
+          unit: "px",
+        },
+        spread: {
+          value: 0,
+          unit: "px",
+        },
+      },
+    ],
+  },
+  breakpoint: {
+    sm: "40rem",
+    md: "48rem",
+    lg: "64rem",
+    xl: "80rem",
+    "2xl": "96rem",
+  },
+  container: {
+    "3xs": "16rem",
+    "2xs": "18rem",
+    xs: "20rem",
+    sm: "24rem",
+    md: "28rem",
+    lg: "32rem",
+    xl: "36rem",
+    "2xl": "42rem",
+    "3xl": "48rem",
+    "4xl": "56rem",
+    "5xl": "64rem",
+    "6xl": "72rem",
+    "7xl": "80rem",
+  },
+  "z-index": {
+    0: 0,
+    10: 10,
+    20: 20,
+    30: 30,
+    40: 40,
+    50: 50,
+    auto: "auto",
+  },
+  ease: {
+    in: [0.4, 0, 1, 1],
+    out: [0, 0, 0.2, 1],
+    "in-out": [0.4, 0, 0.2, 1],
+  },
+  duration: {
+    75: "75ms",
+    100: "100ms",
+    150: "150ms",
+    200: "200ms",
+    300: "300ms",
+    500: "500ms",
+    700: "700ms",
+    1000: "1000ms",
+  },
+  animate: {
+    spin: "spin 1s linear infinite",
+    ping: "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite",
+    pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+    bounce: "bounce 1s infinite",
+  },
+};

package/src/tokens/generated/light.colors.generated.ts

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  background: "#fcfcfd",
+  card: "#f9f9fb",
+  popover: "#f0f0f3",
+  muted: "#f9f9fb",
+  "text-primary": "#1c2024",
+  "text-secondary": "#60646c",
+  tertiary: "#80838d",
+  primary: "#3e63dd",
+  destructive: "#e5484d",
+  success: "#30a46c",
+  warning: "#ffc53d",
+  "primary-foreground": "#ffffff",
+  "destructive-foreground": "#ffffff",
+  "border-default": "#cdced6",
+  "focus-ring": "#3e63dd",
+  "chart-1": "#3e63dd",
+  "chart-2": "#6e56cf",
+  "chart-3": "#12a594",
+  "chart-4": "#f76b15",
+  "chart-5": "#8b8d98",
+  "chart-positive": "#30a46c",
+  "chart-negative": "#e5484d",
+  "chart-neutral": "#b9bbc6",
+};

package/src/tokens/generated/light.css

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --background: #fcfcfd;
+  --card: #f9f9fb;
+  --popover: #f0f0f3;
+  --muted: #f9f9fb;
+  --text-primary: #1c2024;
+  --text-secondary: #60646c;
+  --tertiary: #80838d;
+  --primary: #3e63dd;
+  --destructive: #e5484d;
+  --success: #30a46c;
+  --warning: #ffc53d;
+  --primary-foreground: #ffffff;
+  --destructive-foreground: #ffffff;
+  --border-default: #cdced6;
+  --focus-ring: #3e63dd;
+  --chart-1: #3e63dd;
+  --chart-2: #6e56cf;
+  --chart-3: #12a594;
+  --chart-4: #f76b15;
+  --chart-5: #8b8d98;
+  --chart-positive: #30a46c;
+  --chart-negative: #e5484d;
+  --chart-neutral: #b9bbc6;
+}