@neoptocom/neopto-ui 0.4.0 → 0.5.0

package/src/stories/Typo.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Typo, { type TypoVariant, type TypoWeight } from "../components/Typo";
+
+const meta: Meta<typeof Typo> = {
+  title: "Components/Typo",
+  component: Typo,
+  args: {
+    children: "The quick brown fox jumps over the lazy dog",
+    variant: "body-md" as TypoVariant,
+    bold: "normal" as TypoWeight,
+    muted: false
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: [
+        "display-lg","display-md","display-sm",
+        "headline-lg","headline-md","headline-sm",
+        "title-lg","title-md","title-sm",
+        "label-lg","label-md","label-sm",
+        "body-lg","body-md","body-sm",
+        "button"
+      ]
+    },
+    bold: {
+      control: "radio",
+      options: ["normal","medium","semibold","bold"]
+    },
+    muted: { control: "boolean" },
+    as: { control: false }
+  }
+};
+export default meta;
+type Story = StoryObj<typeof Typo>;
+
+export const Playground: Story = {};
+
+export const Matrix: Story = {
+  render: () => {
+    const variants: TypoVariant[] = [
+      "display-lg","display-md","display-sm",
+      "headline-lg","headline-md","headline-sm",
+      "title-lg","title-md","title-sm",
+      "label-lg","label-md","label-sm",
+      "body-lg","body-md","body-sm",
+      "button"
+    ];
+    const weights: TypoWeight[] = ["normal","medium","semibold","bold"];
+    return (
+      <div className="grid grid-cols-1 gap-4">
+        {variants.map(v => (
+          <div key={v} className="flex flex-col gap-1">
+            <div className="text-sm">{v}</div>
+            <div className="flex flex-wrap gap-6">
+              {weights.map(w => (
+                <Typo key={w} variant={v} bold={w}>
+                  The quick brown fox — {w}
+                </Typo>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+};

package/src/styles/library.css

@@ -0,0 +1,35 @@
+/* Build-only CSS for publishing the lib (no Preflight/reset) */
+@import "tailwindcss/utilities";
+@import "./tokens.css";
+
+/* Scan only your library sources to keep the CSS tiny */
+@source "../components/**/*.{ts,tsx}";
+
+
+/* Material Symbols Font */
+@font-face {
+  font-family: 'Material Symbols Rounded';
+  font-style: normal;
+  font-weight: 100 700;
+  src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v272/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzaqkNCeE.woff2) format('woff2');
+  font-display: swap;
+}
+
+.material-symbols-rounded {
+  font-family: 'Material Symbols Rounded';
+  font-style: normal;
+  font-weight: 300;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  vertical-align: middle;
+  white-space: nowrap;
+  -webkit-font-smoothing: antialiased;
+  color: inherit;
+}
+
+.btn { @apply inline-flex items-center justify-center gap-2 rounded-[--radius-lg] px-4 py-2 text-sm font-medium transition; }
+.btn-outline { @apply border border-[--color-brand] text-[--color-brand] bg-[--surface] hover:bg-[--color-brand]/10; }
+.btn-primary { @apply bg-[--color-brand] text-white hover:opacity-90 active:opacity-80; }

package/src/styles/tailwind.css

@@ -0,0 +1,36 @@
+/* Tailwind v4+ core */
+@import "tailwindcss";
+@import "./tokens.css";
+
+/* Ensure Tailwind scans your source & story files */
+@source "../**/*.{ts,tsx,mdx}";
+
+
+/* Material Symbols Font */
+@font-face {
+  font-family: 'Material Symbols Rounded';
+  font-style: normal;
+  font-weight: 100 700;
+  src: url(https://fonts.gstatic.com/s/materialsymbolsrounded/v272/sykg-zNym6YjUruM-QrEh7-nyTnjDwKNJ_190FjzaqkNCeE.woff2) format('woff2');
+  font-display: swap;
+}
+
+.material-symbols-rounded {
+  font-family: 'Material Symbols Rounded';
+  font-style: normal;
+  font-weight: 300;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  vertical-align: middle;
+  white-space: nowrap;
+  -webkit-font-smoothing: antialiased;
+  color: inherit;
+}
+
+/* Optional shared utility classes used by some components */
+.btn { @apply inline-flex items-center justify-center gap-2 rounded-[--radius-lg] px-4 py-2 text-sm font-medium transition; }
+.btn-primary { @apply bg-[--color-brand] text-white hover:opacity-90 active:opacity-80; }
+.btn-outline { @apply border border-[--color-brand] text-[--color-brand] bg-[--surface] hover:bg-[--color-brand]/10; }

package/src/styles/tokens.css

@@ -0,0 +1,72 @@
+/* Design Tokens - Manually maintained */
+
+@theme {
+  --font-display: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  --font-body: 'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  --font-sans: var(--font-body, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif);
+  --color-brand: #22A9CB;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1.875rem;
+  --bg: #F3F4F6;
+  --surface: #FFFFFF;
+  --fg: #242832;
+  --muted: #E5E7EB;
+  --muted-fg: #6B7280;
+  --border: #E5E7EB;
+  --success: #13B59F;
+  --warning: #D79C2C;
+  --destructive: #E03737;
+  --info: #0E91B2;
+}
+
+:root {
+  --font-display: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  --font-body: 'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  --font-sans: var(--font-body, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif);
+  --color-brand: #22A9CB;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1.875rem;
+  --bg: #F3F4F6;
+  --surface: #FFFFFF;
+  --fg: #242832;
+  --muted: #E5E7EB;
+  --muted-fg: #6B7280;
+  --border: #E5E7EB;
+  --success: #13B59F;
+  --warning: #D79C2C;
+  --destructive: #E03737;
+  --info: #0E91B2;
+  
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
+  
+  /* Motion */
+  --motion-fast: 150ms;
+  --motion-base: 200ms;
+  --easing-standard: cubic-bezier(0.2, 0.0, 0, 1);
+  
+  /* Component-specific */
+  --chat-button-gradient: linear-gradient(to bottom, #FFF, #D4D4D4);
+}
+
+.dark {
+  color-scheme: dark;
+  --bg: #242832;
+  --surface: #2E303B;
+  --fg: #E4E7EC;
+  --muted: #3F424F;
+  --muted-fg: #9D9EA2;
+  --border: #5C5E68;
+  --success: #00C8AC;
+  --warning: #CEB25E;
+  --destructive: #CE645E;
+  --info: #5ABDCC;
+  --chat-button-gradient: linear-gradient(to bottom, #1A3645, #040404);
+}