@altimateai/ui-components 0.0.21 → 0.0.23-beta.1

package/dist/storybook/Select.stories.tsx

@@ -307,3 +307,157 @@ const ComboboxColumnsExample = () => {
     />
   );
 };
+
+export const ComboboxAdvancedExample: StoryFn = () => {
+  const options = [
+    { value: "react", label: "React" },
+    { value: "vue", label: "Vue" },
+    { value: "angular", label: "Angular" },
+    { value: "svelte", label: "Svelte" },
+    { value: "nextjs", label: "Next.js" },
+    { value: "remix", label: "Remix" },
+    { value: "gatsby", label: "Gatsby" },
+    { value: "ember", label: "Ember.js" },
+  ];
+
+  const [singleValue, setSingleValue] = useState("");
+  const [multiValue, setMultiValue] = useState<string[]>(["react", "vue"]);
+  const [clearableValue, setClearableValue] = useState("angular");
+  const [multiClearableValue, setMultiClearableValue] = useState<string[]>(["nextjs", "remix"]);
+  const [multiApplyValue, setMultiApplyValue] = useState<string[]>(["gatsby", "ember"]);
+
+  return (
+    <div className="al-flex al-flex-col al-gap-8 al-justify-start al-items-start">
+      <div className="al-flex al-flex-col al-gap-4">
+        <h3 className="al-text-lg al-font-medium">Search Placeholders</h3>
+        <p className="al-text-sm al-text-muted-foreground">Different search placeholder examples</p>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Default Search Placeholder</label>
+          <Combobox
+            options={options}
+            value={singleValue}
+            onChange={value => setSingleValue(value as string)}
+            placeholder="Select framework..."
+            buttonProps={{ className: "al-w-[250px]" }}
+          />
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Custom Search Placeholder</label>
+          <Combobox
+            options={options}
+            value={singleValue}
+            onChange={value => setSingleValue(value as string)}
+            placeholder="Select framework..."
+            searchPlaceholder="Type to find frameworks..."
+            buttonProps={{ className: "al-w-[250px]" }}
+          />
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Empty Search Placeholder</label>
+          <Combobox
+            options={options}
+            value={singleValue}
+            onChange={value => setSingleValue(value as string)}
+            placeholder="Select framework..."
+            searchPlaceholder=""
+            buttonProps={{ className: "al-w-[250px]" }}
+          />
+        </div>
+      </div>
+
+      <div className="al-flex al-flex-col al-gap-4">
+        <h3 className="al-text-lg al-font-medium">Clear Button Examples</h3>
+        <p className="al-text-sm al-text-muted-foreground">
+          Demonstrating showClearButton prop with different configurations
+        </p>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">
+            Single Select - No Clear Button (Default)
+          </label>
+          <Combobox
+            options={options}
+            value={clearableValue}
+            onChange={value => setClearableValue(value as string)}
+            placeholder="Select framework..."
+            searchPlaceholder="Search frameworks..."
+            showClearButton={false}
+            buttonProps={{ className: "al-w-[250px]" }}
+          />
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Single Select - With Clear Button</label>
+          <Combobox
+            options={options}
+            value={clearableValue}
+            onChange={value => setClearableValue(value as string)}
+            placeholder="Select framework..."
+            searchPlaceholder="Search frameworks..."
+            showClearButton={true}
+            buttonProps={{ className: "al-w-[250px]" }}
+          />
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Multi Select - No Clear Button</label>
+          <Combobox
+            options={options}
+            value={multiValue}
+            onChange={value => setMultiValue(value as string[])}
+            placeholder="Select frameworks..."
+            searchPlaceholder="Find your frameworks..."
+            multiSelect={true}
+            showClearButton={false}
+            buttonProps={{ className: "al-w-[250px]" }}
+          />
+          <div className="al-text-sm">
+            Selected: {multiValue.length > 0 ? multiValue.join(", ") : "None"}
+          </div>
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">Multi Select - With Clear Button</label>
+          <Combobox
+            options={options}
+            value={multiClearableValue}
+            onChange={value => setMultiClearableValue(value as string[])}
+            placeholder="Select frameworks..."
+            searchPlaceholder="Find your frameworks..."
+            multiSelect={true}
+            showClearButton={true}
+            buttonProps={{ className: "al-w-[250px]" }}
+          />
+          <div className="al-text-sm">
+            Selected: {multiClearableValue.length > 0 ? multiClearableValue.join(", ") : "None"}
+          </div>
+        </div>
+
+        <div className="al-flex al-flex-col al-gap-2">
+          <label className="al-text-sm al-font-medium">
+            Multi Select - With Apply Button & Clear Button
+          </label>
+          <Combobox
+            options={options}
+            value={multiApplyValue}
+            onChange={value => setMultiApplyValue(value as string[])}
+            placeholder="Select frameworks..."
+            searchPlaceholder="Filter options..."
+            multiSelect={true}
+            showApplyButton={true}
+            showClearButton={true}
+            buttonProps={{ className: "al-w-[250px]" }}
+          />
+          <div className="al-text-sm">
+            Selected: {multiApplyValue.length > 0 ? multiApplyValue.join(", ") : "None"}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Example that matches the UI in the screenshot

package/dist/storybook/Typography.stories.tsx

@@ -39,8 +39,8 @@ export const Typography: Story = {
           Heading 1 <br />
           Bold
         </Component>
-        <Component variant="caption" className="al-text-gray-500">
-          48px / Line height: 60px
+        <Component variant="caption" className="text-gray-500">
+          32px / Line height: 32px
         </Component>
       </div>
 
@@ -62,8 +62,8 @@ export const Typography: Story = {
           Heading 2 <br />
           Bold
         </Component>
-        <Component variant="caption" className="al-text-gray-500">
-          36px / Line height: 44px
+        <Component variant="caption" className="text-gray-500">
+          24px / Line height: 32px
         </Component>
       </div>
 
@@ -85,8 +85,8 @@ export const Typography: Story = {
           Heading 3 <br />
           Bold
         </Component>
-        <Component variant="caption" className="al-text-gray-500">
-          30px / Line height: 38px
+        <Component variant="caption" className="text-gray-500">
+          18px / Line height: 26px
         </Component>
       </div>
 
@@ -108,8 +108,8 @@ export const Typography: Story = {
           Heading 4 <br />
           Bold
         </Component>
-        <Component variant="caption" className="al-text-gray-500">
-          24px / Line height: 32px
+        <Component variant="caption" className="text-gray-500">
+          16px / Line height: 24px
         </Component>
       </div>
 
@@ -131,8 +131,8 @@ export const Typography: Story = {
           Sub heading <br />
           Bold
         </Component>
-        <Component variant="caption" className="al-text-gray-500">
-          20px / Line height: 30px
+        <Component variant="caption" className="text-gray-500">
+          14px / Line height: 20px
         </Component>
       </div>
 
@@ -150,8 +150,8 @@ export const Typography: Story = {
         <Component variant="body" size="xl">
           Body XL <br /> Regular
         </Component>
-        <Component variant="caption" className="al-text-gray-500">
-          20px, 16px, 14px, 12px | Line height: 30px, 24px, 20px, 18px
+        <Component variant="caption" className="text-gray-500">
+          14px, 10px, 8px | Line height: 18px, 16px, 14px
         </Component>
       </div>
 
@@ -169,8 +169,8 @@ export const Typography: Story = {
         <Component variant="caption" weight="medium" size="lg">
           Caption LG <br /> Medium
         </Component>
-        <Component variant="caption" className="al-text-gray-500">
-          12px, 14px, 16px | Line height: 24px, 20px, 18px
+        <Component variant="caption" className="text-gray-500">
+          14px, 10px | Line height: 18px, 16px
         </Component>
       </div>
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altimateai/ui-components",
-  "version": "0.0.21",
+  "version": "0.0.23-beta.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AltimateAI/altimate-components.git"
@@ -52,4 +52,4 @@
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   }
-}
+}

package/dist/Label.js

@@ -1,48 +0,0 @@
-import { j as o } from "./index2.js";
-import * as l from "react";
-import "react-dom";
-import { c, a as b, b as p } from "./Tooltip.js";
-var v = [
-  "a",
-  "button",
-  "div",
-  "form",
-  "h2",
-  "h3",
-  "img",
-  "input",
-  "label",
-  "li",
-  "nav",
-  "ol",
-  "p",
-  "select",
-  "span",
-  "svg",
-  "ul"
-], w = v.reduce((e, t) => {
-  const a = c(`Primitive.${t}`), i = l.forwardRef((r, m) => {
-    const { asChild: d, ...f } = r, u = d ? a : t;
-    return typeof window < "u" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ o.jsx(u, { ...f, ref: m });
-  });
-  return i.displayName = `Primitive.${t}`, { ...e, [t]: i };
-}, {}), x = "Label", s = l.forwardRef((e, t) => /* @__PURE__ */ o.jsx(
-  w.label,
-  {
-    ...e,
-    ref: t,
-    onMouseDown: (a) => {
-      var r;
-      a.target.closest("button, input, select, textarea") || ((r = e.onMouseDown) == null || r.call(e, a), !a.defaultPrevented && a.detail > 1 && a.preventDefault());
-    }
-  }
-));
-s.displayName = x;
-var n = s;
-const N = p(
-  "al-text-sm al-font-medium al-leading-none peer-disabled:al-cursor-not-allowed peer-disabled:al-opacity-70"
-), y = l.forwardRef(({ className: e, ...t }, a) => /* @__PURE__ */ o.jsx(n, { ref: a, className: b(N(), e), ...t }));
-y.displayName = n.displayName;
-export {
-  y as L
-};