@waveinno/ui 0.4.0 → 0.5.0

package/dist/components/ui/tree-view.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+/**
+ * TreeView — things inside things: sites → levels → bays, folders, an org.
+ *
+ * Branches fold with a turning chevron and guide lines show the depth.
+ * `selectable` picks one node; `checkable` adds checkboxes where a parent is
+ * ticked when all its children are, and half-ticked when some are (ticking a
+ * parent ticks everything under it). Keyboard follows the WAI-ARIA tree: ↑ ↓
+ * move, → opens or steps in, ← closes or steps out, Home / End, Enter / Space.
+ */
+export interface TreeNode {
+    id: string;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    /** On the right: a count, a status. */
+    badge?: React.ReactNode;
+    children?: TreeNode[];
+    disabled?: boolean;
+}
+export interface TreeViewProps {
+    data: TreeNode[];
+    expanded?: string[];
+    defaultExpanded?: string[];
+    onExpandedChange?: (ids: string[]) => void;
+    selected?: string | null;
+    defaultSelected?: string | null;
+    onSelectedChange?: (id: string) => void;
+    /** Checkboxes with tri-state parents. The value holds leaf ids. */
+    checkable?: boolean;
+    checked?: string[];
+    defaultChecked?: string[];
+    onCheckedChange?: (leafIds: string[]) => void;
+    /** Lines from each branch to its children. */
+    guides?: boolean;
+    "aria-label"?: string;
+    className?: string;
+}
+export declare function TreeView({ data, expanded: expandedProp, defaultExpanded, onExpandedChange, selected: selectedProp, defaultSelected, onSelectedChange, checkable, checked: checkedProp, defaultChecked, onCheckedChange, guides, "aria-label": ariaLabel, className, }: TreeViewProps): React.JSX.Element;

package/dist/components/ui/tree-view.js

@@ -0,0 +1 @@
+"use client";import{jsx as d,jsxs as R}from"react/jsx-runtime";import{Check as X,ChevronRight as Y,Minus as Z}from"lucide-react";import*as T from"react";import{cn as u}from"../../lib/utils.js";const k=o=>o.children?.length?o.children.flatMap(k):[o.id];function S(o,x,b){const[v,N]=T.useState(x);return[o!==void 0?o:v,r=>{o===void 0&&N(r),b?.(r)}]}function te({data:o,expanded:x,defaultExpanded:b=[],onExpandedChange:v,selected:N,defaultSelected:C=null,onSelectedChange:E,checkable:r,checked:O,defaultChecked:U=[],onCheckedChange:W,guides:q=!0,"aria-label":_="Tree",className:$}){const[z,B]=S(x,b,v),[L,A]=S(N,C,e=>e&&E?.(e)),[D,G]=S(O,U,W),[y,I]=T.useState(null),M=T.useRef(null),m=new Set(z),H=new Set(D),a=[],K=(e,i)=>{for(const n of e)a.push({node:n,parent:i}),n.children?.length&&m.has(n.id)&&K(n.children,n.id)};K(o,null);const J=y&&a.some(e=>e.node.id===y)?y:L??a[0]?.node.id,f=(e,i)=>{const n=new Set(z);i??!n.has(e)?n.add(e):n.delete(e),B([...n])},P=e=>{const i=k(e),n=i.every(s=>H.has(s)),t=new Set(D);i.forEach(s=>n?t.delete(s):t.add(s)),G([...t])},c=e=>{e&&(I(e),M.current?.querySelector(`[data-tree-id="${CSS.escape(e)}"]`)?.focus())},Q=(e,i,n)=>{const t=a.findIndex(h=>h.node.id===i.id),s=!!i.children?.length;let l=!0;if(e.key==="ArrowDown")c(a[t+1]?.node.id);else if(e.key==="ArrowUp")c(a[t-1]?.node.id);else if(e.key==="Home")c(a[0]?.node.id);else if(e.key==="End")c(a[a.length-1]?.node.id);else if(e.key==="ArrowRight")s&&!m.has(i.id)?f(i.id,!0):s&&c(i.children[0].id);else if(e.key==="ArrowLeft")s&&m.has(i.id)?f(i.id,!1):n&&c(n);else if(e.key==="Enter"||e.key===" "){if(i.disabled)return;r?P(i):A(i.id),s&&!r&&e.key==="Enter"&&f(i.id)}else l=!1;l&&e.preventDefault()},V=(e,i,n)=>e.map(t=>{const s=!!t.children?.length,l=s&&m.has(t.id),h=r?k(t):[],F=h.filter(g=>H.has(g)).length,p=r?F===0?!1:F===h.length?!0:"mixed":null,w=!r&&L===t.id;return R("li",{role:"none",children:[R("div",{role:"treeitem","data-tree-id":t.id,"aria-level":i+1,"aria-expanded":s?l:void 0,"aria-selected":r?void 0:w,"aria-checked":r?p==="mixed"?"mixed":!!p:void 0,"aria-disabled":t.disabled||void 0,tabIndex:t.id===J?0:-1,onFocus:()=>I(t.id),onKeyDown:g=>Q(g,t,n),onClick:()=>{t.disabled||(r?P(t):A(t.id),s&&!r&&f(t.id))},className:u("group/tree relative flex min-h-[32px] cursor-pointer select-none items-center gap-1.5 rounded-[calc(8px*var(--radius-scale))] pr-2 text-[13px] outline-none transition-colors","focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary/40",w?"bg-primary-subtle font-medium text-primary":"text-body hover:bg-hover hover:text-text",t.disabled&&"pointer-events-none opacity-45"),style:{paddingLeft:6+i*18},children:[s?d("span",{role:"presentation",onClick:g=>{r&&(g.stopPropagation(),f(t.id))},className:"grid size-5 shrink-0 place-items-center rounded-[5px] text-muted hover:bg-border/60",children:d(Y,{className:u("size-3.5 transition-transform duration-200 ease-[var(--ease)]",l&&"rotate-90")})}):d("span",{className:"size-5 shrink-0"}),r?d("span",{"aria-hidden":!0,className:u("grid size-4 shrink-0 place-items-center rounded-[4px] border transition-colors",p?"border-primary bg-primary text-white":"border-border2 bg-raised"),children:p==="mixed"?d(Z,{className:"size-3",strokeWidth:3}):p?d(X,{className:"size-3",strokeWidth:3}):null}):null,t.icon?d("span",{className:u("grid shrink-0 place-items-center [&_svg]:size-4",w?"text-primary":"text-muted group-hover/tree:text-text"),children:t.icon}):null,d("span",{className:"min-w-0 flex-1 truncate",children:t.label}),t.badge]}),s?d("div",{className:u("grid transition-[grid-template-rows] duration-250 ease-[var(--ease)]",l?"grid-rows-[1fr]":"grid-rows-[0fr]"),children:R("div",{className:"relative min-h-0 overflow-hidden",children:[q?d("span",{"aria-hidden":!0,className:"absolute bottom-1.5 top-0 w-px bg-border",style:{left:15+i*18}}):null,d("ul",{role:"group",inert:!l,children:V(t.children,i+1,t.id)})]})}):null]},t.id)});return d("ul",{ref:M,role:"tree","aria-label":_,"aria-multiselectable":r||void 0,className:u("space-y-px",$),children:V(o,0,null)})}export{te as TreeView};

package/dist/styles.css

@@ -698,3 +698,76 @@ select {
     animation-iteration-count: infinite !important;
   }
 }
+
+/* Accordion content opens to its measured height (Radix sets the variable). */
+@keyframes wm-acc-down {
+  from { height: 0; opacity: 0 }
+  to { height: var(--radix-accordion-content-height); opacity: 1 }
+}
+@keyframes wm-acc-up {
+  from { height: var(--radix-accordion-content-height); opacity: 1 }
+  to { height: 0; opacity: 0 }
+}
+
+/* ConfirmDialog as a sheet: up from the bottom edge. */
+@keyframes wm-sheet-up {
+  from { opacity: 0; transform: translateY(24px) }
+  to { opacity: 1; transform: none }
+}
+@keyframes wm-sheet-down {
+  from { opacity: 1; transform: none }
+  to { opacity: 0; transform: translateY(24px) }
+}
+[data-confirm-sheet][data-state="open"] { animation: wm-sheet-up 300ms var(--ease) }
+[data-confirm-sheet][data-state="closed"] { animation: wm-sheet-down 180ms cubic-bezier(0.4, 0, 1, 1) both }
+
+/* ── OrgChart: the connectors between a person and their team ── */
+.wm-org ul {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  padding-top: 22px;
+}
+.wm-org > ul { padding-top: 0 }
+.wm-org li {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 22px 10px 0;
+}
+.wm-org > ul > li { padding-top: 0 }
+.wm-org li::before,
+.wm-org li::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 50%;
+  width: 50%;
+  height: 22px;
+  border-top: 1.5px solid var(--org-line, var(--border2));
+}
+.wm-org li::after {
+  right: auto;
+  left: 50%;
+  border-left: 1.5px solid var(--org-line, var(--border2));
+}
+.wm-org > ul > li::before,
+.wm-org > ul > li::after,
+.wm-org li:only-child::before { display: none }
+.wm-org li:only-child::after { border-top: 0; border-radius: 0 }
+.wm-org li:first-child::before,
+.wm-org li:last-child::after { border: 0 none }
+.wm-org li:last-child::before {
+  border-right: 1.5px solid var(--org-line, var(--border2));
+  border-radius: 0 12px 0 0;
+}
+.wm-org li:first-child::after { border-radius: 12px 0 0 0 }
+.wm-org ul ul::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 50%;
+  height: 22px;
+  border-left: 1.5px solid var(--org-line, var(--border2));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waveinno/ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "WAVEINNO design system — tokens, shell, primitives and patterns shared by every WAVEINNO product",
   "keywords": [
     "waveinno",
@@ -62,14 +62,17 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.20",
     "@radix-ui/react-avatar": "^1.2.6",
     "@radix-ui/react-checkbox": "^1.3.11",
     "@radix-ui/react-dialog": "^1.1.23",
     "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-hover-card": "^1.1.23",
     "@radix-ui/react-label": "^2.1.15",
     "@radix-ui/react-popover": "^1.1.23",
     "@radix-ui/react-progress": "^1.1.16",
     "@radix-ui/react-radio-group": "^1.4.7",
+    "@radix-ui/react-scroll-area": "^1.2.18",
     "@radix-ui/react-select": "^2.3.7",
     "@radix-ui/react-separator": "^1.1.15",
     "@radix-ui/react-slider": "^1.4.7",