@altimateai/ui-components 0.0.29 → 0.0.31-beta.1

package/dist/storybook/DebouncedInput.stories.tsx

@@ -0,0 +1,179 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { DebouncedInput, DebouncedInputProps } from "./DebouncedInput";
+import { useState } from "react";
+import { IconSearch, IconUser, IconMail } from "@tabler/icons-react";
+
+export default {
+  title: "Shadcn/Components/DebouncedInput",
+  component: DebouncedInput,
+  argTypes: {
+    disabled: {
+      control: "boolean",
+    },
+    type: {
+      control: "select",
+      options: ["text", "password", "email", "number"],
+    },
+    iconPosition: {
+      control: "select",
+      options: ["left", "right"],
+    },
+    debounceMs: {
+      control: "number",
+    },
+  },
+} as Meta<typeof DebouncedInput>;
+
+const Template: StoryFn<DebouncedInputProps> = (args: DebouncedInputProps) => {
+  const [debouncedValue, setDebouncedValue] = useState("");
+
+  return (
+    <div className="al-p-4 al-max-w-md al-space-y-4">
+      <DebouncedInput
+        {...args}
+        onChange={newValue => {
+          setDebouncedValue(newValue);
+          args.onChange?.(newValue);
+        }}
+      />
+      <div className="al-space-y-2 al-text-sm">
+        <div>
+          <strong>Debounced Value:</strong>{" "}
+          <code className="al-bg-gray-100 al-px-1 al-rounded">{debouncedValue || "empty"}</code>
+        </div>
+        <div>
+          <strong>Debounce Delay:</strong>{" "}
+          <code className="al-bg-gray-100 al-px-1 al-rounded">{args.debounceMs || 0}ms</code>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  placeholder: "Type something...",
+  debounceMs: 0,
+};
+
+export const WithDebounce300ms = Template.bind({});
+WithDebounce300ms.args = {
+  placeholder: "Search with 300ms debounce...",
+  debounceMs: 300,
+};
+
+export const WithDebounce500ms = Template.bind({});
+WithDebounce500ms.args = {
+  placeholder: "Search with 500ms debounce...",
+  debounceMs: 500,
+};
+
+export const WithDebounce1000ms = Template.bind({});
+WithDebounce1000ms.args = {
+  placeholder: "Search with 1000ms debounce...",
+  debounceMs: 1000,
+};
+
+export const SearchWithIcon = Template.bind({});
+SearchWithIcon.args = {
+  placeholder: "Search users...",
+  icon: IconSearch,
+  iconPosition: "left",
+  debounceMs: 300,
+};
+
+export const EmailWithDebounce = Template.bind({});
+EmailWithDebounce.args = {
+  type: "email",
+  placeholder: "Enter email...",
+  icon: IconMail,
+  iconPosition: "left",
+  debounceMs: 500,
+};
+
+export const UserSearchWithIcon = Template.bind({});
+UserSearchWithIcon.args = {
+  placeholder: "Search for users...",
+  icon: IconUser,
+  iconPosition: "left",
+  debounceMs: 400,
+};
+
+// Interactive example showing real-time vs debounced updates
+const InteractiveTemplate: StoryFn<DebouncedInputProps> = (args: DebouncedInputProps) => {
+  const [realTimeValue, setRealTimeValue] = useState("");
+  const [debouncedValue, setDebouncedValue] = useState("");
+  const [updateCount, setUpdateCount] = useState(0);
+  const [debouncedUpdateCount, setDebouncedUpdateCount] = useState(0);
+
+  return (
+    <div className="al-p-4 al-max-w-lg al-space-y-6">
+      <div className="al-space-y-4">
+        <div>
+          <label className="al-block al-text-sm al-font-medium al-mb-2">
+            Real-time Input (no debounce)
+          </label>
+          <DebouncedInput
+            placeholder="Type here for real-time updates..."
+            debounceMs={0}
+            onChange={value => {
+              setRealTimeValue(value);
+              setUpdateCount(prev => prev + 1);
+            }}
+          />
+        </div>
+
+        <div>
+          <label className="al-block al-text-sm al-font-medium al-mb-2">
+            Debounced Input ({args.debounceMs}ms delay)
+          </label>
+          <DebouncedInput
+            {...args}
+            onChange={value => {
+              setDebouncedValue(value);
+              setDebouncedUpdateCount(prev => prev + 1);
+            }}
+          />
+        </div>
+      </div>
+
+      <div className="al-grid al-grid-cols-2 al-gap-4 al-text-sm">
+        <div className="al-space-y-2">
+          <h4 className="al-font-semibold">Real-time Updates</h4>
+          <div>
+            Value:{" "}
+            <code className="al-bg-gray-100 al-px-1 al-rounded">{realTimeValue || "empty"}</code>
+          </div>
+          <div>
+            Updates: <code className="al-bg-blue-100 al-px-1 al-rounded">{updateCount}</code>
+          </div>
+        </div>
+
+        <div className="al-space-y-2">
+          <h4 className="al-font-semibold">Debounced Updates</h4>
+          <div>
+            Value:{" "}
+            <code className="al-bg-gray-100 al-px-1 al-rounded">{debouncedValue || "empty"}</code>
+          </div>
+          <div>
+            Updates:{" "}
+            <code className="al-bg-green-100 al-px-1 al-rounded">{debouncedUpdateCount}</code>
+          </div>
+        </div>
+      </div>
+
+      <div className="al-text-xs al-text-gray-600">
+        Type quickly to see the difference between real-time and debounced updates. The debounced
+        input will only trigger onChange after you stop typing for {args.debounceMs}ms.
+      </div>
+    </div>
+  );
+};
+
+export const InteractiveComparison = InteractiveTemplate.bind({});
+InteractiveComparison.args = {
+  placeholder: "Type here for debounced updates...",
+  debounceMs: 500,
+  icon: IconSearch,
+  iconPosition: "left",
+};

package/dist/storybook/Input.stories.tsx

@@ -1,8 +1,20 @@
 import { Meta, StoryFn } from "@storybook/react";
 import { Input } from "../shadcn";
 import { InputHTMLAttributes } from "react";
+import {
+  IconUser,
+  IconMail,
+  IconSearch,
+  IconLock,
+  IconPhone,
+  IconMapPin,
+  IconCreditCard,
+} from "@tabler/icons-react";
 
-type InputProps = InputHTMLAttributes<HTMLInputElement>;
+type InputProps = InputHTMLAttributes<HTMLInputElement> & {
+  icon?: React.ComponentType<{ size?: string | number; className?: string }>;
+  iconPosition?: "left" | "right";
+};
 
 export default {
   title: "Shadcn/Components/Input",
@@ -15,10 +27,18 @@ export default {
       control: "select",
       options: ["text", "password", "email", "number"],
     },
+    iconPosition: {
+      control: "select",
+      options: ["left", "right"],
+    },
   },
 } as Meta<typeof Input>;
 
-const Template: StoryFn<InputProps> = (args: InputProps) => <Input {...args} />;
+const Template: StoryFn<InputProps> = (args: InputProps) => (
+  <div className="al-p-4 al-max-w-md">
+    <Input {...args} />
+  </div>
+);
 
 export const Default = Template.bind({});
 Default.args = {
@@ -51,3 +71,70 @@ WithError.args = {
   className: "border-red-500",
   "aria-invalid": true,
 };
+
+export const WithIconLeft = Template.bind({});
+WithIconLeft.args = {
+  placeholder: "Search...",
+  icon: IconSearch,
+  iconPosition: "left",
+};
+
+export const WithIconRight = Template.bind({});
+WithIconRight.args = {
+  placeholder: "Search...",
+  icon: IconSearch,
+  iconPosition: "right",
+};
+
+export const EmailWithIcon = Template.bind({});
+EmailWithIcon.args = {
+  type: "email",
+  placeholder: "Enter your email",
+  icon: IconMail,
+  iconPosition: "left",
+};
+
+export const PasswordWithIcon = Template.bind({});
+PasswordWithIcon.args = {
+  type: "password",
+  placeholder: "Enter password",
+  icon: IconLock,
+  iconPosition: "left",
+};
+
+export const UserInput = Template.bind({});
+UserInput.args = {
+  placeholder: "Enter username",
+  icon: IconUser,
+  iconPosition: "left",
+};
+
+export const PhoneInput = Template.bind({});
+PhoneInput.args = {
+  type: "tel",
+  placeholder: "Enter phone number",
+  icon: IconPhone,
+  iconPosition: "left",
+};
+
+export const AddressInput = Template.bind({});
+AddressInput.args = {
+  placeholder: "Enter address",
+  icon: IconMapPin,
+  iconPosition: "left",
+};
+
+export const CreditCardInput = Template.bind({});
+CreditCardInput.args = {
+  placeholder: "1234 5678 9012 3456",
+  icon: IconCreditCard,
+  iconPosition: "left",
+};
+
+export const DisabledWithIcon = Template.bind({});
+DisabledWithIcon.args = {
+  placeholder: "Disabled with icon",
+  icon: IconUser,
+  iconPosition: "left",
+  disabled: true,
+};

package/dist/storybook/Tabs.stories.tsx

@@ -0,0 +1,147 @@
+import { Meta, StoryFn } from "@storybook/react";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "./Tabs";
+
+export default {
+  title: "Shadcn/Components/Tabs",
+  component: Tabs,
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["default", "underlined"],
+    },
+  },
+} as Meta;
+
+export const Default: StoryFn = (args) => (
+  <Tabs defaultValue="tab1" {...args}>
+    <TabsList>
+      <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+      <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+      <TabsTrigger value="tab3">Tab 3</TabsTrigger>
+    </TabsList>
+    <TabsContent value="tab1">Content for Tab 1</TabsContent>
+    <TabsContent value="tab2">Content for Tab 2</TabsContent>
+    <TabsContent value="tab3">Content for Tab 3</TabsContent>
+  </Tabs>
+);
+Default.args = {
+  variant: "default",
+};
+
+export const Underlined: StoryFn = (args) => (
+  <Tabs defaultValue="overview" variant="underlined" {...args}>
+    <TabsList>
+      <TabsTrigger value="overview">Overview</TabsTrigger>
+      <TabsTrigger value="analytics">Analytics</TabsTrigger>
+      <TabsTrigger value="reports">Reports</TabsTrigger>
+    </TabsList>
+    <TabsContent value="overview">
+      <div className="al-p-4">
+        <h3 className="al-text-lg al-font-semibold al-mb-2">Overview</h3>
+        <p className="al-text-gray-600">Overview content goes here with detailed information.</p>
+      </div>
+    </TabsContent>
+    <TabsContent value="analytics">
+      <div className="al-p-4">
+        <h3 className="al-text-lg al-font-semibold al-mb-2">Analytics</h3>
+        <p className="al-text-gray-600">Analytics content with charts and data.</p>
+      </div>
+    </TabsContent>
+    <TabsContent value="reports">
+      <div className="al-p-4">
+        <h3 className="al-text-lg al-font-semibold al-mb-2">Reports</h3>
+        <p className="al-text-gray-600">Reports content with downloadable files.</p>
+      </div>
+    </TabsContent>
+  </Tabs>
+);
+
+export const WithRichContent: StoryFn = (args) => (
+  <Tabs defaultValue="profile" variant="underlined" {...args}>
+    <TabsList>
+      <TabsTrigger value="profile">Profile</TabsTrigger>
+      <TabsTrigger value="settings">Settings</TabsTrigger>
+      <TabsTrigger value="security">Security</TabsTrigger>
+    </TabsList>
+    <TabsContent value="profile">
+      <div className="al-p-4">
+        <h3 className="al-text-lg al-font-semibold al-mb-2">User Profile</h3>
+        <p className="al-text-gray-600 al-mb-4">Manage your profile information</p>
+        <div className="al-space-y-2">
+          <div className="al-flex al-items-center al-gap-2">
+            <span className="al-font-medium">Name:</span>
+            <span>John Doe</span>
+          </div>
+          <div className="al-flex al-items-center al-gap-2">
+            <span className="al-font-medium">Email:</span>
+            <span>john.doe@example.com</span>
+          </div>
+        </div>
+      </div>
+    </TabsContent>
+    <TabsContent value="settings">
+      <div className="al-p-4">
+        <h3 className="al-text-lg al-font-semibold al-mb-2">Settings</h3>
+        <div className="al-space-y-4">
+          <div className="al-flex al-items-center al-justify-between">
+            <span>Notifications</span>
+            <span className="al-text-sm al-text-gray-500">Enabled</span>
+          </div>
+          <div className="al-flex al-items-center al-justify-between">
+            <span>Dark Mode</span>
+            <span className="al-text-sm al-text-gray-500">Disabled</span>
+          </div>
+        </div>
+      </div>
+    </TabsContent>
+    <TabsContent value="security">
+      <div className="al-p-4">
+        <h3 className="al-text-lg al-font-semibold al-mb-2">Security</h3>
+        <p className="al-text-gray-600">Manage your security settings</p>
+      </div>
+    </TabsContent>
+  </Tabs>
+);
+
+export const ManyTabs: StoryFn = (args) => (
+  <Tabs defaultValue="home" variant="underlined" {...args}>
+    <TabsList>
+      <TabsTrigger value="home">Home</TabsTrigger>
+      <TabsTrigger value="about">About</TabsTrigger>
+      <TabsTrigger value="services">Services</TabsTrigger>
+      <TabsTrigger value="portfolio">Portfolio</TabsTrigger>
+      <TabsTrigger value="contact">Contact</TabsTrigger>
+    </TabsList>
+    <TabsContent value="home">Home content</TabsContent>
+    <TabsContent value="about">About content</TabsContent>
+    <TabsContent value="services">Services content</TabsContent>
+    <TabsContent value="portfolio">Portfolio content</TabsContent>
+    <TabsContent value="contact">Contact content</TabsContent>
+  </Tabs>
+);
+
+export const LongLabels: StoryFn = (args) => (
+  <Tabs defaultValue="dashboard" variant="underlined" {...args}>
+    <TabsList>
+      <TabsTrigger value="dashboard">Dashboard Overview</TabsTrigger>
+      <TabsTrigger value="analytics">Analytics & Reports</TabsTrigger>
+      <TabsTrigger value="users">User Management</TabsTrigger>
+    </TabsList>
+    <TabsContent value="dashboard">Dashboard overview content</TabsContent>
+    <TabsContent value="analytics">Analytics and reports content</TabsContent>
+    <TabsContent value="users">User management content</TabsContent>
+  </Tabs>
+);
+
+export const MinimalContent: StoryFn = (args) => (
+  <Tabs defaultValue="a" variant="underlined" {...args}>
+    <TabsList>
+      <TabsTrigger value="a">Tab A</TabsTrigger>
+      <TabsTrigger value="b">Tab B</TabsTrigger>
+      <TabsTrigger value="c">Tab C</TabsTrigger>
+    </TabsList>
+    <TabsContent value="a">A</TabsContent>
+    <TabsContent value="b">B</TabsContent>
+    <TabsContent value="c">C</TabsContent>
+  </Tabs>
+);

package/dist/timeline-definition-8e5a9bc6.js

@@ -1,4 +1,4 @@
-import { k as kt, p as vt, l as wt, m as rt, n as I, s as St, o as Et, q as Tt, r as et } from "./CoachForm.js";
+import { q as kt, r as vt, v as wt, w as rt, x as I, y as St, z as Et, B as Tt, D as et } from "./CoachForm.js";
 import { s as q } from "./redux-toolkit.modern.js";
 import { i as It } from "./is_dark.js";
 var X = function() {
@@ -76,7 +76,7 @@ var X = function() {
       }
     },
     parse: function(r) {
-      var a = this, h = [0], u = [], y = [null], c = [], M = this.table, x = "", N = 0, S = 0, L = 2, V = 1, H = c.slice.call(arguments, 1), m = Object.create(this.lexer), C = { yy: {} };
+      var a = this, h = [0], u = [], y = [null], c = [], M = this.table, x = "", N = 0, S = 0, L = 2, z = 1, H = c.slice.call(arguments, 1), m = Object.create(this.lexer), C = { yy: {} };
       for (var O in this.yy)
         Object.prototype.hasOwnProperty.call(this.yy, O) && (C.yy[O] = this.yy[O]);
       m.setInput(r, C.yy), C.yy.lexer = m, C.yy.parser = this, typeof m.yylloc > "u" && (m.yylloc = {});
@@ -86,17 +86,17 @@ var X = function() {
       typeof C.yy.parseError == "function" ? this.parseError = C.yy.parseError : this.parseError = Object.getPrototypeOf(this).parseError;
       function bt() {
         var P;
-        return P = u.pop() || m.lex() || V, typeof P != "number" && (P instanceof Array && (u = P, P = u.pop()), P = a.symbols_[P] || P), P;
+        return P = u.pop() || m.lex() || z, typeof P != "number" && (P instanceof Array && (u = P, P = u.pop()), P = a.symbols_[P] || P), P;
       }
-      for (var T, z, $, K, W = {}, j, A, tt, G; ; ) {
-        if (z = h[h.length - 1], this.defaultActions[z] ? $ = this.defaultActions[z] : ((T === null || typeof T > "u") && (T = bt()), $ = M[z] && M[z][T]), typeof $ > "u" || !$.length || !$[0]) {
+      for (var T, V, $, K, W = {}, j, A, tt, G; ; ) {
+        if (V = h[h.length - 1], this.defaultActions[V] ? $ = this.defaultActions[V] : ((T === null || typeof T > "u") && (T = bt()), $ = M[V] && M[V][T]), typeof $ > "u" || !$.length || !$[0]) {
           var Q = "";
           G = [];
-          for (j in M[z])
+          for (j in M[V])
             this.terminals_[j] && j > L && G.push("'" + this.terminals_[j] + "'");
           m.showPosition ? Q = "Parse error on line " + (N + 1) + `:
 ` + m.showPosition() + `
-Expecting ` + G.join(", ") + ", got '" + (this.terminals_[T] || T) + "'" : Q = "Parse error on line " + (N + 1) + ": Unexpected " + (T == V ? "end of input" : "'" + (this.terminals_[T] || T) + "'"), this.parseError(Q, {
+Expecting ` + G.join(", ") + ", got '" + (this.terminals_[T] || T) + "'" : Q = "Parse error on line " + (N + 1) + ": Unexpected " + (T == z ? "end of input" : "'" + (this.terminals_[T] || T) + "'"), this.parseError(Q, {
             text: m.match,
             token: this.terminals_[T] || T,
             line: m.yylineno,
@@ -105,7 +105,7 @@ Expecting ` + G.join(", ") + ", got '" + (this.terminals_[T] || T) + "'" : Q = "
           });
         }
         if ($[0] instanceof Array && $.length > 1)
-          throw new Error("Parse Error: multiple actions possible at state: " + z + ", token: " + T);
+          throw new Error("Parse Error: multiple actions possible at state: " + V + ", token: " + T);
         switch ($[0]) {
           case 1:
             h.push(T), y.push(m.yytext), c.push(m.yylloc), h.push($[1]), T = null, S = m.yyleng, x = m.yytext, N = m.yylineno, J = m.yylloc;
@@ -489,7 +489,7 @@ const Y = [], U = [], B = [], ct = () => kt, ot = (n, t, e) => {
   );
 };
 let it = -1;
-const Vt = function(n, t, e) {
+const zt = function(n, t, e) {
   const s = t.x + e.width / 2, i = n.append("g");
   it++;
   const o = 300 + 5 * 30;
@@ -510,7 +510,7 @@ const Vt = function(n, t, e) {
     e,
     t.colour
   );
-}, zt = function(n, t) {
+}, Vt = function(n, t) {
   Z(n, {
     x: t.startx,
     y: t.starty,
@@ -596,8 +596,8 @@ const Ft = function(n, t, e, s) {
   drawSection: Ct,
   drawText: ft,
   drawLabel: Ht,
-  drawTask: Vt,
-  drawBackgroundRect: zt,
+  drawTask: zt,
+  drawBackgroundRect: Vt,
   getTextObj: Rt,
   getNoteRect: D,
   initGraphics: Wt,
@@ -644,8 +644,8 @@ const Ft = function(n, t, e, s) {
       width: 150,
       padding: 20,
       maxHeight: w
-    }, V = R.getVirtualNodeHeight(d, L, i);
-    I.debug("taskHeight before draw", V), w = Math.max(w, V + 20), y = Math.max(y, S.events.length);
+    }, z = R.getVirtualNodeHeight(d, L, i);
+    I.debug("taskHeight before draw", z), w = Math.max(w, z + 20), y = Math.max(y, S.events.length);
     let H = 0;
     for (let m = 0; m < S.events.length; m++) {
       const O = {
@@ -670,8 +670,8 @@ const Ft = function(n, t, e, s) {
       maxHeight: b
     };
     I.debug("sectionNode", S);
-    const L = d.append("g"), V = R.drawNode(L, S, h, i);
-    I.debug("sectionNode output", V), L.attr("transform", `translate(${r}, ${k})`), a += b + 50;
+    const L = d.append("g"), z = R.drawNode(L, S, h, i);
+    I.debug("sectionNode output", z), L.attr("transform", `translate(${r}, ${k})`), a += b + 50;
     const H = f.filter((m) => m.section === N);
     H.length > 0 && st(
       d,