@xenide-io/the-old-ui-theme 0.2.9 → 0.3.1

package/src/components/sections/CardShowcase.tsx

@@ -1,12 +1,12 @@
 import { Badge, Button, Card, ComponentDocs, ShowcaseWrapper } from "@/components/ui";
 
 export default function CardShowcase() {
-  const code = `import { Badge, Button, Card } from "the-old-ui";
+  const code = `import { Badge, Button, Card } from "@xenide-io/the-old-ui-theme";
 
 <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
   <Card
     title="Insight saved"
-    description="White surface, hairline border, orange hover ring — mimics dashboard tiles."
+    description="A quiet, static surface. Depth is reserved for interactive or elevated content."
     actions={
       <>
         <Button variant="secondary" outline>
@@ -19,7 +19,7 @@ export default function CardShowcase() {
 
   <Card
     title="With visual"
-    description="Same card shell — media sits flush to the border like product cards."
+    description="Media sits flush to the card edge with a semantic divider."
     media={<div className="flex h-40 items-center justify-center bg-gradient-to-br from-orange-400 via-ph-brand to-ph-blue text-lg font-bold text-white">Hero stripe</div>}
     actions={
       <Button variant="primary" size="sm">
@@ -60,12 +60,19 @@ export default function CardShowcase() {
     description="Grey trays on canvas — mirrors secondary surfaces in-app."
     actions={<Button variant="primary" outline>Inspect</Button>}
   />
+
+  <Card
+    interactive
+    title="Interactive surface"
+    description="Hover depth is opt-in for cards containing an action."
+    actions={<Button variant="tertiary">Review</Button>}
+  />
 </div>`;
 
   return (
     <ShowcaseWrapper
       title="Cards"
-      description="Reusable card shell with title, description, actions, media, footer, and variant props."
+      description="Static by default, with explicit elevated, highlighted, and interactive treatments."
       code={code}
       filename="CardExample.tsx"
       docs={
@@ -76,6 +83,8 @@ export default function CardShowcase() {
             { name: "description", type: "ReactNode", description: "Optional supporting copy." },
             { name: "actions", type: "ReactNode", description: "Button row rendered with card action spacing." },
             { name: "media", type: "ReactNode", description: "Optional visual block rendered above the card body." },
+            { name: "interactive", type: "boolean", defaultValue: "false", description: "Adds hover and focus-within depth for a card containing an action." },
+            { name: "titleAs", type: "h2 | h3 | h4", defaultValue: "h3", description: "Selects the semantic heading level without changing the card style." },
           ]}
         />
       }
@@ -83,7 +92,7 @@ export default function CardShowcase() {
       <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
         <Card
           title="Insight saved"
-          description="White surface, hairline border, orange hover ring — mimics dashboard tiles."
+          description="A quiet, static surface. Depth is reserved for interactive or elevated content."
           actions={
             <>
               <Button variant="secondary" outline>
@@ -96,7 +105,7 @@ export default function CardShowcase() {
 
         <Card
           title="With visual"
-          description="Same card shell — media sits flush to the border like product cards."
+          description="Media sits flush to the card edge with a semantic divider."
           media={<div className="flex h-40 items-center justify-center bg-gradient-to-br from-orange-400 via-ph-brand to-ph-blue text-lg font-bold text-white">Hero stripe</div>}
           actions={
             <Button variant="primary" size="sm">
@@ -137,6 +146,13 @@ export default function CardShowcase() {
           description="Grey trays on canvas — mirrors secondary surfaces in-app."
           actions={<Button variant="primary" outline>Inspect</Button>}
         />
+
+        <Card
+          interactive
+          title="Interactive surface"
+          description="Hover depth is opt-in for cards containing an action."
+          actions={<Button variant="tertiary">Review</Button>}
+        />
       </div>
     </ShowcaseWrapper>
   );

package/src/components/sections/DropdownShowcase.tsx

@@ -4,8 +4,8 @@ import { IconCopy, IconEdit, IconLogout, IconPerson, IconTrash, IconTuning } fro
 import { DropdownButton, DropdownItem, ShowcaseWrapper } from "@/components/ui";
 
 export default function DropdownShowcase() {
-  const code = `import { IconCopy, IconEdit, IconLogout, IconPerson, IconTrash, IconTuning } from "the-old-ui";
-import { DropdownButton, DropdownItem } from "the-old-ui";
+  const code = `import { IconCopy, IconEdit, IconLogout, IconPerson, IconTrash, IconTuning } from "@xenide-io/the-old-ui-theme";
+import { DropdownButton, DropdownItem } from "@xenide-io/the-old-ui-theme";
 
 <div className="ph-panel space-y-6">
   <p className="text-sm text-ph-subtle">
@@ -51,15 +51,13 @@ import { DropdownButton, DropdownItem } from "the-old-ui";
   return (
     <ShowcaseWrapper
       title="Dropdowns"
-      description="Use DropdownButton from the-old-ui — labelled Lemon triggers + DropdownItem menu rows."
+      description="Accessible menu buttons with keyboard navigation and automatic viewport-aware side flipping and alignment shifting."
       code={code}
       filename="DropdownExample.tsx"
     >
       <div className="ph-panel space-y-6">
         <p className="text-sm text-ph-subtle">
-          Use <code className="ph-kbd">DropdownButton</code> from{" "}
-          <code className="ph-kbd">the-old-ui</code> — labelled Lemon triggers +{" "}
-          <code className="ph-kbd">DropdownItem</code> menu rows.
+          Menus prefer the requested side, then flip above or sideways and shift start/end alignment to remain visible.
         </p>
 
         <div className="flex flex-wrap items-start gap-6">

package/src/components/sections/FilterChipsShowcase.tsx

@@ -1,50 +1,98 @@
 "use client";
 
 import { useState } from "react";
-import { ComponentDocs, FilterChips, ShowcaseWrapper } from "@/components/ui";
+import {
+  ComponentDocs,
+  FilterControls,
+  FilterMenu,
+  ShowcaseWrapper,
+  SortMenu,
+} from "@/components/ui";
+
+const statusOptions = [
+  { value: "all", label: "Any status" },
+  { value: "active", label: "Active" },
+  { value: "draft", label: "Draft" },
+  { value: "archived", label: "Archived" },
+] as const;
+
+const ownerOptions = [
+  { value: "anyone", label: "Anyone" },
+  { value: "me", label: "Owned by me" },
+  { value: "team", label: "My team" },
+] as const;
+
+const sortOptions = [
+  { value: "updated", label: "Recently updated" },
+  { value: "created", label: "Recently created" },
+  { value: "name", label: "Name A-Z" },
+] as const;
 
 export default function FilterChipsShowcase() {
-  const [chips, setChips] = useState([
-    { id: "1", label: "Active", active: true },
-    { id: "2", label: "Archived", active: false },
-    { id: "3", label: "Draft", active: false },
-    { id: "4", label: "Pending", active: true },
-    { id: "5", label: "Failed", active: false },
-  ]);
-
-  const toggleChip = (id: string) => {
-    setChips((prev) => prev.map((chip) => (chip.id === id ? { ...chip, active: !chip.active } : chip)));
+  const [status, setStatus] = useState("active");
+  const [owner, setOwner] = useState("me");
+  const [sort, setSort] = useState("updated");
+
+  const applied = [
+    ...(status !== "all"
+      ? [{ id: "status", label: "Status", value: statusOptions.find((option) => option.value === status)?.label, active: true }]
+      : []),
+    ...(owner !== "anyone"
+      ? [{ id: "owner", label: "Owner", value: ownerOptions.find((option) => option.value === owner)?.label, active: true }]
+      : []),
+  ];
+
+  const clear = () => {
+    setStatus("all");
+    setOwner("anyone");
+    setSort("updated");
   };
 
-  const removeChip = (id: string) => {
-    setChips((prev) => prev.filter((chip) => chip.id !== id));
+  const remove = (id: string) => {
+    if (id === "status") setStatus("all");
+    if (id === "owner") setOwner("anyone");
   };
 
-  const code = `import { FilterChips } from "the-old-ui";
+  const code = `import { FilterControls, FilterMenu, SortMenu } from "@xenide-io/the-old-ui-theme";
 
-<div className="ph-panel">
-  <FilterChips chips={chips} onToggle={toggleChip} onRemove={removeChip} />
-</div>`;
+<FilterControls
+  barProps={{ onClear: clearFilters, resultCount: "24 insights" }}
+  chipsProps={{ chips: appliedFilters, onRemove: removeFilter }}
+  emptyState={<span>No filters applied</span>}
+>
+  <FilterMenu label="Status" value={status} options={statusOptions} onValueChange={setStatus} />
+  <FilterMenu label="Owner" value={owner} options={ownerOptions} onValueChange={setOwner} />
+  <SortMenu label="Sort" value={sort} options={sortOptions} onValueChange={setSort} />
+</FilterControls>`;
 
   return (
     <ShowcaseWrapper
-      title="Filter Chips"
-      description="Controlled chips for active filters, facets, and quick toggles."
+      id="filters"
+      title="Filter and sort"
+      description="Controlled, URL-ready filter menus, applied chips, sorting, clear-all, and result feedback. Menus flip and shift at viewport edges."
       code={code}
-      filename="FilterChipsExample.tsx"
+      filename="FilterBarExample.tsx"
       docs={
         <ComponentDocs
           rows={[
-            { name: "chips", type: "{ id; label; active }[]", description: "Chips to render." },
-            { name: "onToggle", type: "(id: string) => void", description: "Called when a chip is clicked." },
-            { name: "onRemove", type: "(id: string) => void", description: "Shows remove control when provided." },
+            { name: "FilterControls", type: "FilterControlsProps", description: "Combined filter bar and applied-chip composition without owning state." },
+            { name: "FilterBar", type: "FilterBarProps", description: "Lower-level responsive group for filter, sort, clear, and result controls." },
+            { name: "FilterMenu", type: "FilterMenuProps", description: "Single-choice filter using an adaptive radio menu." },
+            { name: "SortMenu", type: "SortMenuProps", description: "Dedicated sort control kept separate from filter state." },
+            { name: "FilterChips", type: "FilterChipsProps", description: "Applied or toggleable chips with independent keyboard-accessible removal." },
           ]}
         />
       }
     >
-      <div className="ph-panel">
-        <FilterChips chips={chips} onToggle={toggleChip} onRemove={removeChip} />
-      </div>
+      <FilterControls
+        barProps={{ onClear: clear, resultCount: "24 insights" }}
+        chipsProps={{ chips: applied, onRemove: remove }}
+        emptyState={<p className="text-xs text-ph-mutedtext">No filters applied</p>}
+      >
+          <FilterMenu label="Status" value={status} options={statusOptions} onValueChange={setStatus} />
+          <FilterMenu label="Owner" value={owner} options={ownerOptions} onValueChange={setOwner} />
+          <SortMenu label="Sort" value={sort} options={sortOptions} onValueChange={setSort} />
+      </FilterControls>
     </ShowcaseWrapper>
   );
 }

package/src/components/sections/FormShowcase.tsx

@@ -15,7 +15,7 @@ import {
 } from "@/components/ui";
 
 export default function FormShowcase() {
-  const code = `import { Checkbox, FileUpload, Input, Panel, Radio, Range, Rating, SearchGroup, Select, Textarea, Toggle } from "the-old-ui";
+  const code = `import { Checkbox, FileUpload, Input, Panel, Radio, Range, Rating, SearchGroup, Select, Textarea, Toggle } from "@xenide-io/the-old-ui-theme";
 
 <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
   <Panel title="Text inputs" className="space-y-6">
@@ -67,6 +67,7 @@ export default function FormShowcase() {
         <ComponentDocs
           title="Input components"
           rows={[
+            { name: "FormField", type: "component", description: "Shared label, description, error, required-state, and generated-ID composition for custom controls." },
             { name: "Input", type: "text | search | email | password", description: "Labelled input with error, helperText, size, and variant props." },
             { name: "Select", type: "select", description: "Labelled select with error, helperText, size, and disabled props." },
             { name: "Textarea", type: "textarea", description: "Labelled multiline input with the same state props as Input." },