@emara/ui 1.1.0

package/components/ui/select.stories.tsx

@@ -0,0 +1,203 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { RiCodeLine, RiGlobalLine, RiPaletteLine, RiSearchLine } from "@remixicon/react";
+import { useState } from "react";
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+
+const meta: Meta<typeof Select> = {
+  title: "Forms/Select",
+  component: Select,
+  parameters: { layout: "centered" },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-56">
+        <SelectValue placeholder="Pick a framework" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="next">Next.js</SelectItem>
+        <SelectItem value="remix">Remix</SelectItem>
+        <SelectItem value="astro">Astro</SelectItem>
+        <SelectItem value="vite">Vite</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-2">
+      {(["xs", "sm", "md", "lg", "xl"] as const).map((s) => (
+        <Select key={s}>
+          <SelectTrigger size={s} className="w-56">
+            <SelectValue placeholder={`size=${s}`} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="a">Apple</SelectItem>
+            <SelectItem value="b">Banana</SelectItem>
+            <SelectItem value="c">Cherry</SelectItem>
+          </SelectContent>
+        </Select>
+      ))}
+    </div>
+  ),
+};
+
+export const Grouped: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-64">
+        <SelectValue placeholder="Pick a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Tropical</SelectLabel>
+          <SelectItem value="mango">Mango</SelectItem>
+          <SelectItem value="pineapple">Pineapple</SelectItem>
+          <SelectItem value="papaya">Papaya</SelectItem>
+        </SelectGroup>
+        <SelectSeparator />
+        <SelectGroup>
+          <SelectLabel>Berries</SelectLabel>
+          <SelectItem value="strawberry">Strawberry</SelectItem>
+          <SelectItem value="blueberry">Blueberry</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const WithIcons: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-64" startAdornment={<RiPaletteLine />}>
+        <SelectValue placeholder="Pick a theme" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="light" icon={<RiGlobalLine />}>
+          Light
+        </SelectItem>
+        <SelectItem value="dark" icon={<RiCodeLine />}>
+          Dark
+        </SelectItem>
+        <SelectItem value="system" icon={<RiSearchLine />}>
+          System
+        </SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const WithDescriptions: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-72">
+        <SelectValue placeholder="Pick a plan" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="starter" description="Up to 3 projects. Free.">
+          Starter
+        </SelectItem>
+        <SelectItem value="pro" description="Unlimited projects. $12/mo.">
+          Pro
+        </SelectItem>
+        <SelectItem value="team" description="Seats and roles. $48/mo.">
+          Team
+        </SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const Invalid: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-56" invalid>
+        <SelectValue placeholder="Required field" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="a">A</SelectItem>
+        <SelectItem value="b">B</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const Loading: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-56" loading>
+        <SelectValue placeholder="Loading…" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="a">A</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const Clearable: Story = {
+  render: () => {
+    const Wrapper = () => {
+      const [value, setValue] = useState("medium");
+      return (
+        <Select value={value} onValueChange={setValue}>
+          <SelectTrigger className="w-56" clearable value={value} onClear={() => setValue("")}>
+            <SelectValue placeholder="Pick a size" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="small">Small</SelectItem>
+            <SelectItem value="medium">Medium</SelectItem>
+            <SelectItem value="large">Large</SelectItem>
+          </SelectContent>
+        </Select>
+      );
+    };
+    return <Wrapper />;
+  },
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <Select disabled defaultValue="a">
+      <SelectTrigger className="w-56">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="a">A</SelectItem>
+        <SelectItem value="b">B</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const DisabledItem: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-56">
+        <SelectValue placeholder="Pick one" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="free">Free</SelectItem>
+        <SelectItem value="pro">Pro</SelectItem>
+        <SelectItem value="enterprise" disabled>
+          Enterprise (contact sales)
+        </SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};

package/components/ui/select.tsx

@@ -0,0 +1,318 @@
+"use client";
+
+import { forwardRef } from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import {
+  RiArrowDownSLine,
+  RiArrowUpSLine,
+  RiCheckLine,
+  RiCloseLine,
+  RiLoader2Line,
+} from "@remixicon/react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+// Per docs/emara-ui-phase-2-components.md §4.
+
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+
+// ----------------------------------------------------------------------------
+// SelectTrigger
+// ----------------------------------------------------------------------------
+
+const selectTriggerVariants = cva(
+  [
+    "flex items-center justify-between w-full gap-2",
+    "rounded-md border border-input bg-background text-foreground",
+    "transition-colors",
+    "hover:border-foreground/40 disabled:hover:border-input",
+    "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "data-[placeholder]:text-muted-foreground",
+    "[&>span]:line-clamp-1 [&>span]:text-start",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        xs: "h-7 ps-2.5 pe-2 text-xs",
+        sm: "h-8 ps-3 pe-2 text-xs",
+        md: "h-9 ps-3 pe-2 text-sm",
+        lg: "h-10 ps-3.5 pe-2.5 text-base",
+        xl: "h-12 ps-4 pe-3 text-base",
+      },
+      invalid: {
+        true: "border-destructive focus-visible:ring-destructive",
+        false: "",
+      },
+    },
+    defaultVariants: { size: "md", invalid: false },
+  },
+);
+
+type SelectTriggerVariants = VariantProps<typeof selectTriggerVariants>;
+
+type SelectTriggerProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> &
+  SelectTriggerVariants & {
+    clearable?: boolean;
+    loading?: boolean;
+    startAdornment?: React.ReactNode;
+    onClear?: () => void;
+    /** Current value — needed for `clearable` to decide whether to show X. */
+    value?: string;
+  };
+
+const SelectTrigger = forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  SelectTriggerProps
+>(function SelectTrigger(
+  {
+    className,
+    size,
+    invalid,
+    clearable = false,
+    loading = false,
+    startAdornment,
+    onClear,
+    value,
+    children,
+    ...props
+  },
+  ref,
+) {
+  const showClear = clearable && !props.disabled && !loading && Boolean(value);
+
+  return (
+    <SelectPrimitive.Trigger
+      ref={ref}
+      className={cn(selectTriggerVariants({ size, invalid }), className)}
+      {...props}
+    >
+      {startAdornment ? (
+        <span
+          aria-hidden="true"
+          className="text-muted-foreground me-1 inline-flex shrink-0 items-center [&_svg]:size-4 [&_svg]:shrink-0"
+        >
+          {startAdornment}
+        </span>
+      ) : null}
+      {children}
+      <span className="text-muted-foreground ms-auto inline-flex shrink-0 items-center gap-1 [&_svg]:size-4 [&_svg]:shrink-0">
+        {showClear ? (
+          <button
+            type="button"
+            aria-label="Clear"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              onClear?.();
+            }}
+            className={cn(
+              "inline-flex items-center justify-center rounded p-0.5",
+              "hover:text-foreground",
+              "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+            )}
+          >
+            <RiCloseLine />
+          </button>
+        ) : null}
+        {loading ? (
+          <RiLoader2Line className="size-4 animate-spin" />
+        ) : (
+          <SelectPrimitive.Icon asChild>
+            <RiArrowDownSLine />
+          </SelectPrimitive.Icon>
+        )}
+      </span>
+    </SelectPrimitive.Trigger>
+  );
+});
+SelectTrigger.displayName = "SelectTrigger";
+
+// ----------------------------------------------------------------------------
+// SelectContent
+// ----------------------------------------------------------------------------
+
+const SelectContent = forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(function SelectContent(
+  { className, children, position = "popper", sideOffset = 4, ...props },
+  ref,
+) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        ref={ref}
+        position={position}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-popover relative max-h-(--radix-select-content-available-height) min-w-32 overflow-hidden",
+          "border-border bg-popover text-popover-foreground rounded-md border shadow-md",
+          "data-[state=open]:animate-[scale-in_var(--duration-fast)_var(--ease-out)]",
+          "data-[state=closed]:animate-[scale-out_var(--duration-fast)_var(--ease-in)]",
+          position === "popper" && "w-(--radix-select-trigger-width)",
+          className,
+        )}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport className="p-1">{children}</SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+});
+SelectContent.displayName = "SelectContent";
+
+// ----------------------------------------------------------------------------
+// SelectScrollUpButton / SelectScrollDownButton
+// ----------------------------------------------------------------------------
+
+const SelectScrollUpButton = forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(function SelectScrollUpButton({ className, ...props }, ref) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      ref={ref}
+      className={cn(
+        "text-muted-foreground flex cursor-default items-center justify-center py-1",
+        "hover:bg-accent hover:text-accent-foreground",
+        className,
+      )}
+      {...props}
+    >
+      <RiArrowUpSLine className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+});
+SelectScrollUpButton.displayName = "SelectScrollUpButton";
+
+const SelectScrollDownButton = forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(function SelectScrollDownButton({ className, ...props }, ref) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      ref={ref}
+      className={cn(
+        "text-muted-foreground flex cursor-default items-center justify-center py-1",
+        "hover:bg-accent hover:text-accent-foreground",
+        className,
+      )}
+      {...props}
+    >
+      <RiArrowDownSLine className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+});
+SelectScrollDownButton.displayName = "SelectScrollDownButton";
+
+// ----------------------------------------------------------------------------
+// SelectLabel
+// ----------------------------------------------------------------------------
+
+const SelectLabel = forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(function SelectLabel({ className, ...props }, ref) {
+  return (
+    <SelectPrimitive.Label
+      ref={ref}
+      className={cn(
+        "text-muted-foreground px-2 py-1.5 text-xs font-semibold tracking-wide uppercase",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SelectLabel.displayName = "SelectLabel";
+
+// ----------------------------------------------------------------------------
+// SelectItem (with Emara additions: description, icon)
+// ----------------------------------------------------------------------------
+
+type SelectItemProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
+  description?: React.ReactNode;
+  icon?: React.ReactNode;
+};
+
+const SelectItem = forwardRef<React.ElementRef<typeof SelectPrimitive.Item>, SelectItemProps>(
+  function SelectItem({ className, children, description, icon, ...props }, ref) {
+    return (
+      <SelectPrimitive.Item
+        ref={ref}
+        className={cn(
+          "relative flex w-full cursor-pointer items-start gap-2 rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none select-none",
+          "transition-colors",
+          "focus:bg-accent focus:text-accent-foreground",
+          "data-[state=checked]:font-medium",
+          "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+          className,
+        )}
+        {...props}
+      >
+        <span className="absolute start-2 inline-flex h-4 w-4 items-center justify-center text-current">
+          <SelectPrimitive.ItemIndicator>
+            <RiCheckLine className="size-4" />
+          </SelectPrimitive.ItemIndicator>
+        </span>
+
+        <span className="flex flex-1 flex-col gap-0.5 leading-none">
+          <span className="inline-flex items-center gap-2">
+            {icon ? (
+              <span
+                aria-hidden="true"
+                className="text-muted-foreground inline-flex shrink-0 [&_svg]:size-4 [&_svg]:shrink-0"
+              >
+                {icon}
+              </span>
+            ) : null}
+            <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+          </span>
+          {description ? (
+            <span className="text-muted-foreground text-xs">{description}</span>
+          ) : null}
+        </span>
+      </SelectPrimitive.Item>
+    );
+  },
+);
+SelectItem.displayName = "SelectItem";
+
+// ----------------------------------------------------------------------------
+// SelectSeparator
+// ----------------------------------------------------------------------------
+
+const SelectSeparator = forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(function SelectSeparator({ className, ...props }, ref) {
+  return (
+    <SelectPrimitive.Separator
+      ref={ref}
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+});
+SelectSeparator.displayName = "SelectSeparator";
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  selectTriggerVariants,
+};
+export type { SelectTriggerProps, SelectItemProps };

package/components/ui/sidebar.stories.tsx

@@ -0,0 +1,186 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import {
+  RiBarChart2Line,
+  RiDashboardLine,
+  RiFolderLine,
+  RiSettings4Line,
+  RiTeamLine,
+  RiUser3Line,
+  RiWalletLine,
+} from "@remixicon/react";
+
+import { Avatar, AvatarFallback } from "./avatar";
+import { Badge } from "./badge";
+import {
+  Sidebar,
+  SidebarBody,
+  SidebarBrand,
+  SidebarCollapseToggle,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarItem,
+  SidebarSubItem,
+} from "./sidebar";
+import { TooltipProvider } from "./tooltip";
+
+const meta: Meta<typeof Sidebar> = {
+  title: "Layout/Sidebar",
+  component: Sidebar,
+  parameters: { layout: "fullscreen" },
+  argTypes: {
+    variant: { control: "select", options: ["filled", "outline", "floating"] },
+    collapsed: { control: "boolean" },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Sidebar>;
+
+function Brand() {
+  return (
+    <SidebarBrand>
+      <span className="bg-primary text-primary-foreground inline-flex size-6 items-center justify-center rounded text-xs font-bold">
+        E
+      </span>
+      <span>Emara</span>
+    </SidebarBrand>
+  );
+}
+
+function FooterUser() {
+  return (
+    <SidebarFooter>
+      <div className="flex items-center gap-2 px-2 py-1.5">
+        <Avatar size="sm">
+          <AvatarFallback>AZ</AvatarFallback>
+        </Avatar>
+        <div className="flex-1 truncate text-sm">
+          <div className="truncate font-medium">Abdelkader</div>
+          <div className="text-muted-foreground truncate text-xs">abdel@emara.io</div>
+        </div>
+      </div>
+    </SidebarFooter>
+  );
+}
+
+function NavContent() {
+  return (
+    <>
+      <SidebarGroup>
+        <SidebarGroupLabel>Workspace</SidebarGroupLabel>
+        <SidebarItem icon={<RiDashboardLine />} label="Dashboard" tooltip="Dashboard" active />
+        <SidebarItem
+          icon={<RiTeamLine />}
+          label="Team"
+          tooltip="Team"
+          badge={
+            <Badge size="xs" variant="info">
+              12
+            </Badge>
+          }
+        />
+        <SidebarItem
+          icon={<RiFolderLine />}
+          label="Projects"
+          tooltip="Projects"
+          expandable
+          defaultExpanded
+        >
+          <SidebarSubItem label="Apollo" />
+          <SidebarSubItem label="Mercury" active />
+          <SidebarSubItem label="Gemini" />
+        </SidebarItem>
+      </SidebarGroup>
+
+      <SidebarGroup>
+        <SidebarGroupLabel>Insights</SidebarGroupLabel>
+        <SidebarItem icon={<RiBarChart2Line />} label="Analytics" tooltip="Analytics" />
+        <SidebarItem icon={<RiWalletLine />} label="Billing" tooltip="Billing" kbd={["⌘", "B"]} />
+      </SidebarGroup>
+
+      <SidebarGroup>
+        <SidebarGroupLabel>Settings</SidebarGroupLabel>
+        <SidebarItem icon={<RiUser3Line />} label="Profile" tooltip="Profile" />
+        <SidebarItem icon={<RiSettings4Line />} label="Preferences" tooltip="Preferences" />
+      </SidebarGroup>
+    </>
+  );
+}
+
+export const Filled: Story = {
+  args: { variant: "filled" },
+  render: (args) => (
+    <TooltipProvider delayDuration={200}>
+      <div className="flex h-[32rem]">
+        <Sidebar {...args}>
+          <Brand />
+          <SidebarBody>
+            <NavContent />
+          </SidebarBody>
+          <FooterUser />
+        </Sidebar>
+        <main className="text-muted-foreground flex-1 p-6">Main content area</main>
+      </div>
+    </TooltipProvider>
+  ),
+};
+
+export const Outline: Story = {
+  ...Filled,
+  args: { variant: "outline" },
+};
+
+export const Floating: Story = {
+  ...Filled,
+  args: { variant: "floating" },
+};
+
+export const Collapsed: Story = {
+  args: { collapsed: true },
+  render: (args) => (
+    <TooltipProvider delayDuration={200}>
+      <div className="flex h-[32rem]">
+        <Sidebar {...args}>
+          <Brand />
+          <SidebarBody>
+            <NavContent />
+          </SidebarBody>
+          <FooterUser />
+        </Sidebar>
+        <main className="text-muted-foreground flex-1 p-6">
+          Main content area (collapsed sidebar — hover items to see tooltips, click Projects for its
+          popover)
+        </main>
+      </div>
+    </TooltipProvider>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => {
+    function Demo() {
+      const [collapsed, setCollapsed] = useState(false);
+      return (
+        <TooltipProvider delayDuration={200}>
+          <div className="flex h-[32rem]">
+            <Sidebar collapsed={collapsed}>
+              <Brand />
+              <SidebarBody>
+                <NavContent />
+              </SidebarBody>
+              <SidebarFooter>
+                <SidebarCollapseToggle onClick={() => setCollapsed((v) => !v)} />
+              </SidebarFooter>
+            </Sidebar>
+            <main className="text-muted-foreground flex-1 p-6">
+              Click the collapse button at the bottom of the sidebar.
+            </main>
+          </div>
+        </TooltipProvider>
+      );
+    }
+    return <Demo />;
+  },
+};