@memori.ai/ui 1.0.0-alpha

package/src/icons/Share.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+const Share = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M752 664c-28.5 0-54.8 10-75.4 26.7L469.4 540.8a160.68 160.68 0 0 0 0-57.6l207.2-149.9C697.2 350 723.5 360 752 360c66.2 0 120-53.8 120-120s-53.8-120-120-120-120 53.8-120 120c0 11.6 1.6 22.7 4.7 33.3L439.9 415.8C410.7 377.1 364.3 352 312 352c-88.4 0-160 71.6-160 160s71.6 160 160 160c52.3 0 98.7-25.1 127.9-63.8l196.8 142.5c-3.1 10.6-4.7 21.8-4.7 33.3 0 66.2 53.8 120 120 120s120-53.8 120-120-53.8-120-120-120zm0-476c28.7 0 52 23.3 52 52s-23.3 52-52 52-52-23.3-52-52 23.3-52 52-52zM312 600c-48.5 0-88-39.5-88-88s39.5-88 88-88 88 39.5 88 88-39.5 88-88 88zm440 236c-28.7 0-52-23.3-52-52s23.3-52 52-52 52 23.3 52 52-23.3 52-52 52z" />
+  </svg>
+)
+
+export default Share

package/src/icons/Sound.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+const Sound = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M625.9 115c-5.9 0-11.9 1.6-17.4 5.3L254 352H90c-8.8 0-16 7.2-16 16v288c0 8.8 7.2 16 16 16h164l354.5 231.7c5.5 3.6 11.6 5.3 17.4 5.3 16.7 0 32.1-13.3 32.1-32.1V147.1c0-18.8-15.4-32.1-32.1-32.1zM586 803L293.4 611.7l-18-11.7H146V424h129.4l17.9-11.7L586 221v582zm348-327H806c-8.8 0-16 7.2-16 16v40c0 8.8 7.2 16 16 16h128c8.8 0 16-7.2 16-16v-40c0-8.8-7.2-16-16-16zm-41.9 261.8l-110.3-63.7a15.9 15.9 0 00-21.7 5.9l-19.9 34.5c-4.4 7.6-1.8 17.4 5.8 21.8L856.3 800a15.9 15.9 0 0021.7-5.9l19.9-34.5c4.4-7.6 1.7-17.4-5.8-21.8zM760 344a15.9 15.9 0 0021.7 5.9L892 286.2c7.6-4.4 10.2-14.2 5.8-21.8L878 230a15.9 15.9 0 00-21.7-5.9L746 287.8a15.99 15.99 0 00-5.8 21.8L760 344z"></path>
+  </svg>
+)
+
+export default Sound

package/src/icons/SoundDeactivated.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+const SoundDeactivated = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    viewBox="0 0 40 36"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    aria-label={title}
+  >
+    <path
+      d="M25.085.277c-.264 0-.531.071-.777.236L8.482 10.857H1.161a.716.716 0 00-.715.714V24.43c0 .392.322.714.715.714h7.321l15.826 10.344c.246.16.518.236.777.236.745 0 1.433-.593 1.433-1.433V1.71c0-.84-.688-1.433-1.433-1.433zM23.304 30.99l-13.063-8.54-.803-.522H3.66V14.07h5.777l.799-.522 13.067-8.54V30.99zM39.534 15.148L36.967 18l2.567 2.852a1.09 1.09 0 010 1.427l-1.283 1.426a.845.845 0 01-1.284 0L34.4 20.852l-2.567 2.852a.845.845 0 01-1.283 0l-1.284-1.426a1.09 1.09 0 010-1.426L31.833 18l-2.567-2.852a1.09 1.09 0 010-1.426l1.283-1.427a.845.845 0 011.284 0l2.567 2.853 2.567-2.853a.845.845 0 011.284 0l1.283 1.427a1.09 1.09 0 010 1.426z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+export default SoundDeactivated

package/src/icons/Telegram.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+const Telegram = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 496 512"
+    className={className}
+    aria-label={title}
+  >
+    <path
+      fill="currentColor"
+      d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm121.8 169.9l-40.7 191.8c-3 13.6-11.1 16.9-22.4 10.5l-62-45.7-29.9 28.8c-3.3 3.3-6.1 6.1-12.5 6.1l4.4-63.1 114.9-103.8c5-4.4-1.1-6.9-7.7-2.5l-142 89.4-61.2-19.1c-13.3-4.2-13.6-13.3 2.8-19.7l239.1-92.2c11.1-4 20.8 2.7 17.2 19.5z"
+    ></path>
+  </svg>
+)
+
+export default Telegram

package/src/icons/ThumbDown.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+const ThumbDown = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="2"
+    tabIndex={-1}
+    className={className}
+    aria-label={title}
+  >
+    <path d="M10 15v4a3 3 0 003 3l4-9V2H5.72a2 2 0 00-2 1.7l-1.38 9a2 2 0 002 2.3zm7-13h2.67A2.31 2.31 0 0122 4v7a2.31 2.31 0 01-2.33 2H17"></path>
+  </svg>
+)
+
+export default ThumbDown

package/src/icons/ThumbUp.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+const ThumbUp = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="2"
+    tabIndex={-1}
+    className={className}
+    aria-label={title}
+  >
+    <path d="M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3zM7 22H4a2 2 0 01-2-2v-7a2 2 0 012-2h3"></path>
+  </svg>
+)
+
+export default ThumbUp

package/src/icons/Translation.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+const Translation = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M140 188h584v164h76V144c0-17.7-14.3-32-32-32H96c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h544v-76H140V188z"></path>
+    <path d="M414.3 256h-60.6c-3.4 0-6.4 2.2-7.6 5.4L219 629.4c-.3.8-.4 1.7-.4 2.6 0 4.4 3.6 8 8 8h55.1c3.4 0 6.4-2.2 7.6-5.4L322 540h196.2L422 261.4c-1.3-3.2-4.3-5.4-7.7-5.4zm12.4 228h-85.5L384 360.2 426.7 484zM936 528H800v-93c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v93H592c-13.3 0-24 10.7-24 24v176c0 13.3 10.7 24 24 24h136v152c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V752h136c13.3 0 24-10.7 24-24V552c0-13.3-10.7-24-24-24zM728 680h-88v-80h88v80zm160 0h-88v-80h88v80z"></path>
+  </svg>
+)
+
+export default Translation

package/src/icons/Twitter.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+
+const Twitter = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M928 254.3c-30.6 13.2-63.9 22.7-98.2 26.4a170.1 170.1 0 0 0 75-94 336.64 336.64 0 0 1-108.2 41.2A170.1 170.1 0 0 0 672 174c-94.5 0-170.5 76.6-170.5 170.6 0 13.2 1.6 26.4 4.2 39.1-141.5-7.4-267.7-75-351.6-178.5a169.32 169.32 0 0 0-23.2 86.1c0 59.2 30.1 111.4 76 142.1a172 172 0 0 1-77.1-21.7v2.1c0 82.9 58.6 151.6 136.7 167.4a180.6 180.6 0 0 1-44.9 5.8c-11.1 0-21.6-1.1-32.2-2.6C211 652 273.9 701.1 348.8 702.7c-58.6 45.9-132 72.9-211.7 72.9-14.3 0-27.5-.5-41.2-2.1C171.5 822 261.2 850 357.8 850 671.4 850 843 590.2 843 364.7c0-7.4 0-14.8-.5-22.2 33.2-24.3 62.3-54.4 85.5-88.2z" />
+  </svg>
+)
+
+export default Twitter

package/src/icons/Upload.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+export const UploadIcon: React.FC<{ className?: string }> = ({ className }) => {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M17 8L12 3L7 8"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 3V15"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}

package/src/icons/User.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+const User = ({ className, title }: { className?: string; title?: string }) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M858.5 763.6a374 374 0 0 0-80.6-119.5 375.63 375.63 0 0 0-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 0 0-80.6 119.5A371.7 371.7 0 0 0 136 901.8a8 8 0 0 0 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 0 0 8-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z" />
+  </svg>
+)
+
+export default User

package/src/icons/Warning.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+const Warning = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    className={className}
+    aria-label={title}
+    color="currentColor"
+  >
+    <path
+      fill="currentColor"
+      d="M464 720a48 48 0 1096 0 48 48 0 10-96 0zm16-304v184c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V416c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8zm475.7 440l-416-720c-6.2-10.7-16.9-16-27.7-16s-21.6 5.3-27.7 16l-416 720C56 877.4 71.4 904 96 904h832c24.6 0 40-26.6 27.7-48zm-783.5-27.9L512 239.9l339.8 588.2H172.2z"
+    ></path>
+  </svg>
+)
+
+export default Warning

package/src/icons/WhatsApp.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+const WhatsApp = ({
+  className,
+  title,
+}: {
+  className?: string
+  title?: string
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 1024 1024"
+    className={className}
+    aria-label={title}
+  >
+    <path d="M713.5 599.9c-10.9-5.6-65.2-32.2-75.3-35.8-10.1-3.8-17.5-5.6-24.8 5.6-7.4 11.1-28.4 35.8-35 43.3-6.4 7.4-12.9 8.3-23.8 2.8-64.8-32.4-107.3-57.8-150-131.1-11.3-19.5 11.3-18.1 32.4-60.2 3.6-7.4 1.8-13.7-1-19.3-2.8-5.6-24.8-59.8-34-81.9-8.9-21.5-18.1-18.5-24.8-18.9-6.4-.4-13.7-.4-21.1-.4-7.4 0-19.3 2.8-29.4 13.7-10.1 11.1-38.6 37.8-38.6 92s39.5 106.7 44.9 114.1c5.6 7.4 77.7 118.6 188.4 166.5 70 30.2 97.4 32.8 132.4 27.6 21.3-3.2 65.2-26.6 74.3-52.5 9.1-25.8 9.1-47.9 6.4-52.5-2.7-4.9-10.1-7.7-21-13z"></path>
+    <path d="M925.2 338.4c-22.6-53.7-55-101.9-96.3-143.3-41.3-41.3-89.5-73.8-143.3-96.3C630.6 75.7 572.2 64 512 64h-2c-60.6.3-119.3 12.3-174.5 35.9-53.3 22.8-101.1 55.2-142 96.5-40.9 41.3-73 89.3-95.2 142.8-23 55.4-34.6 114.3-34.3 174.9.3 69.4 16.9 138.3 48 199.9v152c0 25.4 20.6 46 46 46h152.1c61.6 31.1 130.5 47.7 199.9 48h2.1c59.9 0 118-11.6 172.7-34.3 53.5-22.3 101.6-54.3 142.8-95.2 41.3-40.9 73.8-88.7 96.5-142 23.6-55.2 35.6-113.9 35.9-174.5.3-60.9-11.5-120-34.8-175.6zm-151.1 438C704 845.8 611 884 512 884h-1.7c-60.3-.3-120.2-15.3-173.1-43.5l-8.4-4.5H188V695.2l-4.5-8.4C155.3 633.9 140.3 574 140 513.7c-.4-99.7 37.7-193.3 107.6-263.8 69.8-70.5 163.1-109.5 262.8-109.9h1.7c50 0 98.5 9.7 144.2 28.9 44.6 18.7 84.6 45.6 119 80 34.3 34.3 61.3 74.4 80 119 19.4 46.2 29.1 95.2 28.9 145.8-.6 99.6-39.7 192.9-110.1 262.7z"></path>
+  </svg>
+)
+
+export default WhatsApp

package/src/icons/icons.stories.css

@@ -0,0 +1,5 @@
+.showcase-icon {
+    width: 3rem;
+    height: 3rem;
+    font-size: 3rem;
+}

package/src/icons/icons.stories.tsx

@@ -0,0 +1,110 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import './loading.css'
+import './icons.stories.css'
+
+interface Props {
+  iconName: string
+}
+
+interface IconProps {
+  className?: string
+  title?: string
+}
+
+// Import all icons at module level
+const iconContext = (require as any).context('./', false, /\.tsx$/)
+const iconModules: { [key: string]: React.ComponentType<any> } = {}
+
+iconContext.keys().forEach((key: string) => {
+  const iconName = key.replace('./', '').replace('.tsx', '')
+  if (!iconName.includes('stories')) {
+    iconModules[iconName] = iconContext(key).default
+  }
+})
+
+const IconShowcaseItem = ({ iconName, ...iconProps }: Props & IconProps) => {
+  const Icon = iconModules[iconName]
+  if (!Icon) return null
+  return (
+    <Icon
+      {...iconProps}
+      className="showcase-icon"
+    />
+  )
+}
+
+const IconsShowcase = (iconProps: IconProps) => {
+  const iconNames = Object.keys(iconModules)
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(7, 1fr)',
+        gridGap: '2rem',
+      }}
+    >
+      <h1>Icons</h1>
+      <h2>Internal svg icons</h2>
+      {iconNames.map(iconName => (
+        <div
+          key={iconName}
+          style={{
+            textAlign: 'center',
+          }}
+        >
+          <IconShowcaseItem
+            iconName={iconName}
+            {...iconProps}
+          />
+          <p>{iconName}</p>
+        </div>
+      ))}
+      <h2>External icons</h2>
+      <p>
+        We use{' '}
+        <a
+          href="https://lucide.dev/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Lucide
+        </a>{' '}
+        for additional icons.
+      </p>
+      <p>
+        Refer to{' '}
+        <a
+          href="https://lucide.dev/guide/packages/lucide-react"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Lucide React
+        </a>{' '}
+        guide for more information on how to use them.
+      </p>
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Definitions/Icons',
+  component: IconsShowcase,
+  argTypes: {},
+  parameters: {
+    controls: { expanded: true },
+  },
+  render: args => <IconsShowcase {...args} />,
+} satisfies Meta<typeof IconsShowcase>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    className: 'showcase-icon',
+    title: 'Icon',
+  },
+}

package/src/icons/loading.css

@@ -0,0 +1,14 @@
+.memori-loading-icon {
+    display: inline-block;
+    animation: memori-loading 1s infinite linear;
+}
+
+@keyframes memori-loading {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/src/index.ts

@@ -0,0 +1,15 @@
+import './styles.css'
+
+export { Alert } from './components/Alert'
+export { Button } from './components/Button'
+export { ButtonBase } from './components/ButtonBase'
+export { Card } from './components/Card'
+export { Checkbox } from './components/Checkbox'
+export { ConfirmDialog } from './components/ConfirmDialog'
+export { Dropdown } from './components/Dropdown'
+export { Expandable } from './components/Expandable'
+export { Modal } from './components/Modal'
+export { Select } from './components/Select'
+export { Slider } from './components/Slider'
+export { Spin } from './components/Spin'
+export { Tooltip } from './components/Tooltip'

package/src/styles/utils.css

@@ -0,0 +1,17 @@
+@media (width <= 768px) {
+    .mobile-hidden {
+        display: none;
+    }
+}
+
+.sr-only {
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border-width: 0;
+    margin: -1px;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+}

package/src/styles.css

@@ -0,0 +1,4 @@
+@import url('./theme/variables.css');
+@import url('./styles/utils.css');
+@import url('./components/Table/Table.css');
+@import url('./components/Details/Details.css');

package/src/theme/variables.css

@@ -0,0 +1,110 @@
+/**
+ * Design Tokens - CSS Variables
+ * 
+ * This file contains all design tokens mapped to CSS custom properties.
+ * These variables should be used throughout the component library instead
+ * of hardcoded values.
+ */
+
+:root {
+    /* ============================================
+     COLOR TOKENS
+     ============================================ */
+
+    /* Primary Colors */
+    --color-primary-100: #f2eafd;
+    --color-primary-200: #d9c3f3;
+    --color-primary-300: #bf9de9;
+    --color-primary-400: #a677df;
+    --color-primary-500: #8246af; /* Base Brand Color */
+    --color-primary-600: #68388c;
+    --color-primary-700: #4e2a69;
+    --color-primary-800: #341c46;
+    --color-primary-900: #1a0e23;
+
+    /* Secondary Colors */
+    --color-secondary-100: #e0f5f9;
+    --color-secondary-200: #c1ebf4;
+    --color-secondary-300: #a3e2ee;
+    --color-secondary-400: #84d8e9;
+    --color-secondary-500: #66cee0; /* Base Secondary Color */
+    --color-secondary-600: #52a5b3;
+    --color-secondary-700: #3d7c86;
+    --color-secondary-800: #29525a;
+    --color-secondary-900: #14292d;
+
+    /* Semantic Colors - Success */
+    --color-semantic-success-base: #52c41a;
+    --color-semantic-success-light: #d9f7be; /* Backgrounds */
+    --color-semantic-success-dark: #389e0d; /* Text/Icons */
+
+    /* Semantic Colors - Error */
+    --color-semantic-error-base: #d9363e;
+    --color-semantic-error-light: #fff1f0; /* Backgrounds */
+    --color-semantic-error-dark: #a8071a; /* Text/Icons */
+
+    /* Semantic Colors - Warning */
+    --color-semantic-warning-base: #faad14;
+    --color-semantic-warning-light: #fffbe6; /* Backgrounds */
+    --color-semantic-warning-dark: #d48806; /* Text/Icons */
+
+    /* Neutral Colors */
+    --color-neutral-white: #fff;
+    --color-neutral-100: #fafafa; /* Page Background */
+    --color-neutral-200: #f5f5f5; /* Component Background */
+    --color-neutral-300: #f0f0f0; /* Hover States */
+    --color-neutral-400: #d9d9d9; /* Borders */
+    --color-neutral-500: #bfbfbf; /* Disabled Text */
+    --color-neutral-600: #8c8c8c; /* Secondary Text */
+    --color-neutral-700: #595959; /* Primary Text */
+    --color-neutral-800: #262626; /* Headings */
+    --color-neutral-900: #141414;
+
+    /* ============================================
+     TYPOGRAPHY TOKENS
+     ============================================ */
+
+    /* Font Family */
+    --typography-font-family-base: 'Lexend Deca Variable', 'Lexend Deca', sans-serif;
+
+    /* Font Sizes */
+    --typography-font-size-xs: 12px;
+    --typography-font-size-sm: 14px;
+    --typography-font-size-base: 16px;
+    --typography-font-size-lg: 20px;
+    --typography-font-size-xl: 24px;
+    --typography-font-size-2xl: 32px;
+    --typography-font-size-3xl: 48px;
+
+    /* Line Heights */
+    --typography-line-height-tight: 1.2;
+    --typography-line-height-normal: 1.5;
+    --typography-line-height-relaxed: 1.75;
+
+    /* Font Weights */
+    --typography-font-weight-regular: 400;
+    --typography-font-weight-medium: 500;
+    --typography-font-weight-semibold: 600;
+    --typography-font-weight-bold: 700;
+
+    /* ============================================
+     SPACING TOKENS
+     ============================================ */
+
+    --spacing-xs: 4px;
+    --spacing-sm: 8px;
+    --spacing-md: 16px;
+    --spacing-lg: 24px;
+    --spacing-xl: 32px;
+    --spacing-2xl: 48px;
+    --spacing-3xl: 64px;
+
+    /* ============================================
+     BORDER RADIUS TOKENS
+     ============================================ */
+
+    --border-radius-sm: 4px; /* Inputs, Checkboxes */
+    --border-radius-md: 8px; /* Cards, Buttons */
+    --border-radius-lg: 16px; /* Modals, Containers */
+    --border-radius-full: 999px; /* Pills, Avatars */
+}

package/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}