@waveinno/ui 0.4.0 → 0.6.0

package/dist/components/ui/toast.d.ts

@@ -8,6 +8,17 @@ import { Toaster as Sonner, toast } from "sonner";
  * `toast("Saved")`, `toast.success(…)`, `toast.error(…)`, `toast.promise(…)`
  * from anywhere. The toast is sonner's; the look is WAVEINNO's: a raised card,
  * the tone's icon in a soft tile, and the theme's colours in light and dark.
+ *
+ * Where they appear: `position` on the Toaster sets the default — any corner,
+ * top or bottom centre, or the middle of the screen (`middle-left`,
+ * `middle-center`, `middle-right`). One toast can go elsewhere with
+ * `toast("…", { position: "top-center" })` (the six edge positions). For the
+ * middle, or a second stack, add a Toaster with an `id` and send toasts to it
+ * with `toasterId`.
  */
 export { toast };
-export declare function Toaster({ position, ...props }: React.ComponentProps<typeof Sonner>): React.JSX.Element;
+export type ToastPosition = "top-left" | "top-center" | "top-right" | "middle-left" | "middle-center" | "middle-right" | "bottom-left" | "bottom-center" | "bottom-right";
+export interface ToasterProps extends Omit<React.ComponentProps<typeof Sonner>, "position"> {
+    position?: ToastPosition;
+}
+export declare function Toaster({ position, className, ...props }: ToasterProps): React.JSX.Element;

package/dist/components/ui/toast.js

@@ -1 +1 @@
-"use client";import{jsx as r}from"react/jsx-runtime";import{CircleAlert as o,CircleCheck as n,Info as s,LoaderCircle as i,TriangleAlert as c}from"lucide-react";import{Toaster as d,toast as p}from"sonner";const e=(t,a)=>r("span",{className:"grid size-7 place-items-center rounded-[calc(8px*var(--radius-scale))] [&_svg]:size-4",style:{color:`var(--${t})`,background:`var(--${t}-subtle)`},children:a});function b({position:t="bottom-right",...a}){return r(d,{position:t,gap:10,icons:{success:e("success",r(n,{})),error:e("danger",r(o,{})),warning:e("warning",r(c,{})),info:e("info",r(s,{})),loading:e("primary",r(i,{className:"animate-spin"}))},toastOptions:{unstyled:!0,classNames:{toast:"group flex w-[356px] max-w-[calc(100vw-32px)] items-center gap-3 rounded-[calc(14px*var(--radius-scale))] border border-border bg-raised p-3 pr-4 text-[13px] text-text shadow-[var(--lit),0_1px_2px_rgba(5,8,22,.06),0_16px_40px_-12px_rgba(5,8,22,.28)]",icon:"!m-0 !size-7 shrink-0 [&>svg]:hidden [&>span]:!grid [&>span]:!size-7 [&>span]:place-items-center",content:"min-w-0 flex-1",title:"font-semibold leading-[18px] text-text",description:"mt-0.5 text-[12.5px] leading-[17px] text-muted",actionButton:"ml-auto shrink-0 cursor-pointer self-center rounded-[calc(8px*var(--radius-scale))] bg-primary px-2.5 py-1.5 text-[12px] font-medium text-white transition-colors hover:bg-primary-hover",cancelButton:"shrink-0 cursor-pointer self-center rounded-[calc(8px*var(--radius-scale))] border border-border px-2.5 py-1.5 text-[12px] font-medium text-body transition-colors hover:bg-hover",closeButton:"!border-border !bg-raised !text-muted hover:!text-text",success:"bg-[image:radial-gradient(130%_140%_at_0%_0%,var(--success-subtle),transparent_55%)] border-[color-mix(in_srgb,var(--success)_22%,var(--border))]!",error:"bg-[image:radial-gradient(130%_140%_at_0%_0%,var(--danger-subtle),transparent_55%)] border-[color-mix(in_srgb,var(--danger)_22%,var(--border))]!",warning:"bg-[image:radial-gradient(130%_140%_at_0%_0%,var(--warning-subtle),transparent_55%)] border-[color-mix(in_srgb,var(--warning)_22%,var(--border))]!",info:"bg-[image:radial-gradient(130%_140%_at_0%_0%,var(--info-subtle),transparent_55%)] border-[color-mix(in_srgb,var(--info)_22%,var(--border))]!"}},...a})}export{b as Toaster,p as toast};
+"use client";import{jsx as r}from"react/jsx-runtime";import{CircleAlert as n,CircleCheck as d,Info as c,LoaderCircle as p,TriangleAlert as l}from"lucide-react";import{Toaster as m,toast as g}from"sonner";import{cn as x}from"../../lib/utils.js";const t=(e,o)=>r("span",{className:"grid size-7 place-items-center rounded-[calc(8px*var(--radius-scale))] [&_svg]:size-4",style:{color:`var(--${e})`,background:`var(--${e}-subtle)`},children:o});function f({position:e="bottom-right",className:o,...i}){const a=e.startsWith("middle-"),s=a?e.replace("middle-","top-"):e;return r(m,{position:s,gap:10,className:x(a&&"wm-toaster-middle",o),icons:{success:t("success",r(d,{})),error:t("danger",r(n,{})),warning:t("warning",r(l,{})),info:t("info",r(c,{})),loading:t("primary",r(p,{className:"animate-spin"}))},toastOptions:{unstyled:!0,classNames:{toast:"group flex w-[356px] max-w-[calc(100vw-32px)] items-center gap-3 rounded-[calc(14px*var(--radius-scale))] border border-border bg-raised p-3 pr-4 text-[13px] text-text shadow-[var(--lit),0_1px_2px_rgba(5,8,22,.06),0_16px_40px_-12px_rgba(5,8,22,.28)]",icon:"!relative !m-0 !size-7 shrink-0 [&>svg]:hidden [&>span]:!grid [&>span]:!size-7 [&>span]:place-items-center",loader:"[&>span]:!size-7",content:"min-w-0 flex-1",title:"font-semibold leading-[18px] text-text",description:"mt-0.5 text-[12.5px] leading-[17px] text-muted",actionButton:"ml-auto shrink-0 cursor-pointer self-center rounded-[calc(8px*var(--radius-scale))] bg-primary px-2.5 py-1.5 text-[12px] font-medium text-white transition-colors hover:bg-primary-hover",cancelButton:"shrink-0 cursor-pointer self-center rounded-[calc(8px*var(--radius-scale))] border border-border px-2.5 py-1.5 text-[12px] font-medium text-body transition-colors hover:bg-hover",closeButton:"!border-border !bg-raised !text-muted hover:!text-text",success:"bg-[image:radial-gradient(130%_140%_at_0%_0%,var(--success-subtle),transparent_55%)] border-[color-mix(in_srgb,var(--success)_22%,var(--border))]!",error:"bg-[image:radial-gradient(130%_140%_at_0%_0%,var(--danger-subtle),transparent_55%)] border-[color-mix(in_srgb,var(--danger)_22%,var(--border))]!",warning:"bg-[image:radial-gradient(130%_140%_at_0%_0%,var(--warning-subtle),transparent_55%)] border-[color-mix(in_srgb,var(--warning)_22%,var(--border))]!",info:"bg-[image:radial-gradient(130%_140%_at_0%_0%,var(--info-subtle),transparent_55%)] border-[color-mix(in_srgb,var(--info)_22%,var(--border))]!"}},...i})}export{f as Toaster,g as toast};

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,146 @@ 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 ──
+   2px lines in a tint of the brand, rounded where they turn, a dot where a
+   person's stem meets their team's bar. --org-gap is the height of each leg. */
+.wm-org {
+  --org-gap: 26px;
+  --org-w: 2px;
+  --org-c: var(--org-line, color-mix(in srgb, var(--primary) 32%, var(--border2)));
+}
+.wm-org ul {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  padding-top: var(--org-gap);
+}
+.wm-org > ul { padding-top: 0 }
+.wm-org li {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--org-gap) 12px 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: var(--org-gap);
+  border-top: var(--org-w) solid var(--org-c);
+}
+.wm-org li::after {
+  right: auto;
+  left: calc(50% - var(--org-w) / 2);
+  width: calc(50% + var(--org-w) / 2);
+  border-left: var(--org-w) solid var(--org-c);
+}
+.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: var(--org-w) solid var(--org-c);
+  border-radius: 0 14px 0 0;
+}
+.wm-org li:first-child::after { border-radius: 14px 0 0 0 }
+/* The stem from a person down to their team's bar. */
+.wm-org ul ul::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: calc(50% - var(--org-w) / 2);
+  height: var(--org-gap);
+  border-left: var(--org-w) solid var(--org-c);
+}
+/* Where the stem meets the bar (only when there is a bar: two or more people). */
+.wm-org ul ul:has(> li + li)::after {
+  content: "";
+  position: absolute;
+  top: var(--org-gap);
+  left: 50%;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--org-c);
+  box-shadow: 0 0 0 3px var(--surface);
+  transform: translate(-50%, -50%);
+  z-index: 1;
+}
+
+/* OrgChart motion. Opening a team: the stem draws down, then people arrive one
+   after another with a little spring. Closing: they lift away together. */
+@keyframes wm-org-stem {
+  from { transform: scaleY(0) }
+  to { transform: scaleY(1) }
+}
+@keyframes wm-org-in {
+  from { opacity: 0; transform: translateY(-14px) scale(.92) }
+  to { opacity: 1; transform: none }
+}
+@keyframes wm-org-out {
+  from { opacity: 1; transform: none }
+  to { opacity: 0; transform: translateY(-10px) scale(.94) }
+}
+.wm-org .wm-org-enter::before {
+  transform-origin: top;
+  animation: wm-org-stem 240ms cubic-bezier(.22, 1, .36, 1) both;
+}
+.wm-org .wm-org-enter > li {
+  animation: wm-org-in 560ms cubic-bezier(.2, .9, .25, 1.12) both;
+  animation-delay: calc(140ms + var(--i, 0) * 55ms);
+}
+.wm-org .wm-org-leave > li {
+  animation: wm-org-out 200ms cubic-bezier(.4, 0, 1, 1) both;
+  animation-delay: calc(var(--i, 0) * 12ms);
+}
+.wm-org .wm-org-leave::before {
+  animation: wm-org-out 180ms ease-in both;
+}
+.wm-org .wm-org-leave::after {
+  animation: wm-org-dot 160ms ease-in reverse both;
+}
+@keyframes wm-org-dot {
+  from { scale: 0 }
+  to { scale: 1 }
+}
+.wm-org .wm-org-enter::after {
+  animation: wm-org-dot 320ms cubic-bezier(.3, 1.6, .5, 1) 200ms both;
+}
+
+/* A Toaster in the middle of the screen: sonner's top row, moved to the centre. */
+[data-sonner-toaster].wm-toaster-middle {
+  top: 50% !important;
+  bottom: auto !important;
+  translate: 0 -50%;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waveinno/ui",
-  "version": "0.4.0",
+  "version": "0.6.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",