@jackbernnie/hiyf 0.3.0 → 0.3.2

package/dist/components/MapEmbed.d.ts

@@ -0,0 +1,27 @@
+/**
+ * MapEmbed — the closed, sanctioned way to render an embedded location map.
+ *
+ * Raw <iframe> map embeds are an off-system escape hatch: every provider URL,
+ * viewport shape, loading behavior, and frame treatment would be up for grabs.
+ * This wrapper closes it:
+ *   - Location is expressed only as decimal latitude/longitude with an
+ *     enumerated map view and clamped zoom.
+ *   - The embed always uses the approved responsive 16:9 frame, rounded
+ *     corners, muted loading surface, and Google Maps embed URL.
+ *   - NO `className`/`style` escape hatch. Need a new map affordance? Add it
+ *     here so every map stays on-system.
+ */
+export interface MapEmbedProps {
+    /** Latitude in decimal degrees. */
+    lat: number;
+    /** Longitude in decimal degrees. */
+    lon: number;
+    /** Zoom level 1-21. Defaults to 14. */
+    zoom?: number;
+    /** 'satellite' (default) or 'map'. */
+    view?: 'map' | 'satellite';
+    /** Accessible title for the embed. Defaults to 'Map'. */
+    title?: string;
+}
+/** Closed responsive map embed — no className/style. */
+export declare function MapEmbed({ lat, lon, zoom, view, title, }: MapEmbedProps): import("react").JSX.Element | null;

package/dist/components/MapEmbed.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import { AspectRatio } from './ui/aspect-ratio.js';
+
+function MapEmbed({
+  lat,
+  lon,
+  zoom = 14,
+  view = "satellite",
+  title = "Map"
+}) {
+  if (!Number.isFinite(lat) || !Number.isFinite(lon)) {
+    return null;
+  }
+  const zoomValue = Number.isNaN(zoom) ? 14 : zoom;
+  const clampedZoom = Math.min(21, Math.max(1, zoomValue));
+  const src = `https://maps.google.com/maps?ll=${lat},${lon}&q=${lat},${lon}&z=${clampedZoom}&t=${view === "map" ? "m" : "k"}&output=embed`;
+  return /* @__PURE__ */ jsx("div", { className: "w-full overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsx(AspectRatio, { ratio: 16 / 9, children: /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      src,
+      title,
+      loading: "lazy",
+      referrerPolicy: "no-referrer-when-downgrade",
+      allowFullScreen: true,
+      className: "size-full border-0"
+    }
+  ) }) });
+}
+
+export { MapEmbed };

package/dist/components/Sidebar.d.ts

@@ -8,7 +8,8 @@ import * as React from "react";
  *   - items take an `icon`, can be `active`, and may nest `items` to become a
  *     collapsible sub-menu (chevron expands an indented list).
  *   - optional `brand` header (icon + title + subtitle) and `user` footer
- *     (avatar + name + email), both of which also collapse to their icon.
+ *     (avatar + name + email + optional menu), both of which also collapse to
+ *     their icon.
  *   - `children` is the main inset content; it gets a header with the trigger.
  *   - No `className`/`style` escape hatch. Need badges or actions? Add typed
  *     fields to SidebarNavItem here.
@@ -38,10 +39,17 @@ export interface SidebarBrand {
     title: string;
     subtitle?: string;
 }
+export interface SidebarUserMenuItem {
+    label: string;
+    tone?: "default" | "danger";
+    onSelect?: () => void;
+    separatorBefore?: boolean;
+}
 export interface SidebarUser {
     name: string;
     email?: string;
     avatar?: React.ReactNode;
+    menuItems?: SidebarUserMenuItem[];
 }
 export interface SidebarProps {
     groups: SidebarNavGroup[];

package/dist/components/Sidebar.js

@@ -1,7 +1,9 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { SidebarProvider, Sidebar as Sidebar$1, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarFooter, SidebarRail, SidebarInset, SidebarTrigger, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton } from './ui/sidebar.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { SidebarMenuButton, SidebarProvider, Sidebar as Sidebar$1, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarRail, SidebarInset, SidebarTrigger, SidebarMenuSub, SidebarMenuSubItem, SidebarMenuSubButton, useSidebar, SidebarFooter } from './ui/sidebar.js';
 import { Collapsible, CollapsibleTrigger, CollapsibleContent } from './ui/collapsible.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuSeparator, DropdownMenuItem } from './ui/dropdown-menu.js';
 import { TooltipProvider } from './ui/tooltip.js';
 
 function Chevron() {
@@ -20,6 +22,25 @@ function Chevron() {
     }
   );
 }
+function ChevronsUpDown() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "ml-auto size-4 shrink-0 text-sidebar-foreground/60",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "m7 15 5 5 5-5" }),
+        /* @__PURE__ */ jsx("path", { d: "m7 9 5-5 5 5" })
+      ]
+    }
+  );
+}
 function NavItem({ item }) {
   if (item.items && item.items.length > 0) {
     return /* @__PURE__ */ jsx(
@@ -59,6 +80,45 @@ function NavItem({ item }) {
     }
   ) });
 }
+const UserMenuButton = React.forwardRef(function UserMenuButton2({ user, showChevron, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(SidebarMenuButton, { ref, size: "lg", ...props, children: [
+    user.avatar && /* @__PURE__ */ jsx("div", { className: "size-8 shrink-0 overflow-hidden rounded-lg", children: user.avatar }),
+    /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate font-semibold", children: user.name }),
+      user.email && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-sidebar-foreground/70", children: user.email })
+    ] }),
+    showChevron && /* @__PURE__ */ jsx(ChevronsUpDown, {})
+  ] });
+});
+function UserFooter({ user }) {
+  const { isMobile } = useSidebar();
+  const menuItems = user.menuItems ?? [];
+  if (menuItems.length === 0) {
+    return /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(UserMenuButton, { user }) }) }) });
+  }
+  return /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(UserMenuButton, { user, showChevron: true }) }),
+    /* @__PURE__ */ jsx(
+      DropdownMenuContent,
+      {
+        side: isMobile ? "bottom" : "right",
+        align: "end",
+        sideOffset: 4,
+        children: menuItems.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          item.separatorBefore && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsx(
+            DropdownMenuItem,
+            {
+              variant: item.tone === "danger" ? "destructive" : "default",
+              onSelect: item.onSelect,
+              children: item.label
+            }
+          )
+        ] }, index))
+      }
+    )
+  ] }) }) }) });
+}
 function Sidebar({ groups, brand, user, children }) {
   return (
     // The icon-rail tooltips on SidebarMenuButton need a TooltipProvider; this
@@ -76,13 +136,7 @@ function Sidebar({ groups, brand, user, children }) {
           group.label && /* @__PURE__ */ jsx(SidebarGroupLabel, { children: group.label }),
           /* @__PURE__ */ jsx(SidebarMenu, { children: group.items.map((item) => /* @__PURE__ */ jsx(NavItem, { item }, item.label)) })
         ] }, groupIndex)) }),
-        user && /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, { size: "lg", children: [
-          user.avatar && /* @__PURE__ */ jsx("div", { className: "size-8 shrink-0 overflow-hidden rounded-lg", children: user.avatar }),
-          /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-left text-sm leading-tight", children: [
-            /* @__PURE__ */ jsx("span", { className: "truncate font-semibold", children: user.name }),
-            user.email && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-sidebar-foreground/70", children: user.email })
-          ] })
-        ] }) }) }) }),
+        user && /* @__PURE__ */ jsx(UserFooter, { user }),
         /* @__PURE__ */ jsx(SidebarRail, {})
       ] }),
       /* @__PURE__ */ jsxs(SidebarInset, { children: [

package/dist/components/Table.d.ts

@@ -6,14 +6,25 @@ import * as React from 'react';
  * apply arbitrary one-off styles and compose rows however they like. This wrapper
  * closes it:
  *   - `columns` is a typed column descriptor array with `key`, `header`, `align`,
- *     and an optional `render` function; no className escapes.
+ *     controlled sort/filter metadata, and an optional `render` function; no
+ *     className escapes.
  *   - `data` is a generic array of row objects; the type parameter `T` flows
  *     through so column keys and render callbacks are fully type-checked.
  *   - `caption` is an optional accessible table caption.
+ *   - sorting, filtering, and row clicks are controlled callbacks only; Table
+ *     never mutates, sorts, or filters `data`.
  *   - NO `className`/`style` escape hatch. Every table on screen is rendered by
  *     the same correct, on-brand structure.
  *   - Need a new alignment or row variant? Add it to the column descriptor here.
  */
+export interface TableFilterOption {
+    value: string;
+    label: string;
+}
+export type TableSort = {
+    key: string;
+    direction: 'asc' | 'desc';
+};
 export interface TableColumn<T> {
     /** Property key on each data row (used as default cell content). */
     key: string;
@@ -21,6 +32,14 @@ export interface TableColumn<T> {
     header: string;
     /** Text alignment for both the header and cells. Defaults to 'left'. */
     align?: 'left' | 'right' | 'center';
+    /** Whether this column exposes controlled sort actions. */
+    sortable?: boolean;
+    /** Controlled filter options. The first option conventionally means no filter/all. */
+    filterOptions?: TableFilterOption[];
+    /** Current controlled filter value for this column. */
+    filterValue?: string;
+    /** Called when a filter option is selected. */
+    onFilterChange?: (value: string) => void;
     /**
      * Optional custom renderer for this column's cell.
      * Receives the full row object and returns a React node.
@@ -34,6 +53,12 @@ export interface TableProps<T> {
     data: T[];
     /** Optional accessible caption rendered below the table. */
     caption?: string;
+    /** Current controlled sort state. */
+    sort?: TableSort;
+    /** Called when a column sort direction is selected. */
+    onSortChange?: (sort: TableSort) => void;
+    /** Called when a non-interactive part of a row is clicked or keyboard-activated. */
+    onRowClick?: (row: T) => void;
 }
 /** Closed generic data table — no className/style. */
-export declare function Table<T extends Record<string, unknown>>({ columns, data, caption, }: TableProps<T>): React.JSX.Element;
+export declare function Table<T extends Record<string, unknown>>({ columns, data, caption, sort, onSortChange, onRowClick, }: TableProps<T>): React.JSX.Element;

package/dist/components/Table.js

@@ -1,21 +1,196 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Table as Table$1, TableCaption, TableHeader, TableRow, TableHead, TableBody, TableCell } from './ui/table.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from './ui/dropdown-menu.js';
 
 const ALIGN_CLASS = {
   left: "text-left",
   right: "text-right",
   center: "text-center"
 };
+const HEADER_FLEX_CLASS = {
+  left: "justify-start",
+  right: "justify-end",
+  center: "justify-center"
+};
+function CheckGlyph({ visible }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: visible ? "size-4 shrink-0" : "size-4 shrink-0 opacity-0",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "m20 6-11 11-5-5" })
+    }
+  );
+}
+function SortGlyph({ direction }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "size-4 shrink-0",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: direction === "asc" ? /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" }) : /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+function ChevronDownGlyph({ active }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: active ? "size-4 shrink-0" : "size-4 shrink-0 opacity-50 transition-opacity group-hover/header:opacity-100 group-focus-within/header:opacity-100",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+function HeaderMenu({
+  column,
+  sort,
+  onSortChange
+}) {
+  const activeSort = sort?.key === column.key ? sort : void 0;
+  const firstFilterValue = column.filterOptions?.[0]?.value;
+  const filterActive = column.filterValue !== void 0 && firstFilterValue !== void 0 && column.filterValue !== firstFilterValue;
+  const active = Boolean(activeSort) || filterActive;
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: active ? "inline-flex size-6 items-center justify-center rounded-md text-foreground outline-hidden transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring" : "inline-flex size-6 items-center justify-center rounded-md text-muted-foreground outline-hidden transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+        "aria-label": `${column.header} options`,
+        children: activeSort ? /* @__PURE__ */ jsx(SortGlyph, { direction: activeSort.direction }) : /* @__PURE__ */ jsx(ChevronDownGlyph, { active })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+      column.sortable && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            onSelect: () => onSortChange?.({ key: column.key, direction: "asc" }),
+            children: [
+              /* @__PURE__ */ jsx(CheckGlyph, { visible: activeSort?.direction === "asc" }),
+              "Sort ascending"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            onSelect: () => onSortChange?.({ key: column.key, direction: "desc" }),
+            children: [
+              /* @__PURE__ */ jsx(CheckGlyph, { visible: activeSort?.direction === "desc" }),
+              "Sort descending"
+            ]
+          }
+        )
+      ] }),
+      column.sortable && column.filterOptions && column.filterOptions.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      column.filterOptions?.map((option) => /* @__PURE__ */ jsxs(
+        DropdownMenuItem,
+        {
+          onSelect: () => column.onFilterChange?.(option.value),
+          children: [
+            /* @__PURE__ */ jsx(CheckGlyph, { visible: column.filterValue === option.value }),
+            option.label
+          ]
+        },
+        option.value
+      ))
+    ] })
+  ] });
+}
+function HeaderContent({
+  column,
+  sort,
+  onSortChange
+}) {
+  const hasMenu = column.sortable || column.filterOptions && column.filterOptions.length > 0;
+  if (!hasMenu) {
+    return /* @__PURE__ */ jsx(Fragment, { children: column.header });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-1 ${HEADER_FLEX_CLASS[column.align ?? "left"]}`, children: [
+    /* @__PURE__ */ jsx("span", { children: column.header }),
+    /* @__PURE__ */ jsx(HeaderMenu, { column, sort, onSortChange })
+  ] });
+}
+function rowClickIsFromInteractiveElement(event) {
+  return Boolean(
+    event.target.closest(
+      'button, a, input, textarea, select, [role="menuitem"], [role="checkbox"]'
+    )
+  );
+}
 function Table({
   columns,
   data,
-  caption
+  caption,
+  sort,
+  onSortChange,
+  onRowClick
 }) {
   return /* @__PURE__ */ jsxs(Table$1, { children: [
     caption && /* @__PURE__ */ jsx(TableCaption, { children: caption }),
-    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((col) => /* @__PURE__ */ jsx(TableHead, { className: ALIGN_CLASS[col.align ?? "left"], children: col.header }, col.key)) }) }),
-    /* @__PURE__ */ jsx(TableBody, { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx(TableRow, { children: columns.map((col) => /* @__PURE__ */ jsx(TableCell, { className: ALIGN_CLASS[col.align ?? "left"], children: col.render ? col.render(row) : String(row[col.key] ?? "") }, col.key)) }, rowIndex)) })
+    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((col) => /* @__PURE__ */ jsx(
+      TableHead,
+      {
+        className: col.sortable || col.filterOptions && col.filterOptions.length > 0 ? `${ALIGN_CLASS[col.align ?? "left"]} group/header` : ALIGN_CLASS[col.align ?? "left"],
+        children: /* @__PURE__ */ jsx(
+          HeaderContent,
+          {
+            column: col,
+            sort,
+            onSortChange
+          }
+        )
+      },
+      col.key
+    )) }) }),
+    /* @__PURE__ */ jsx(TableBody, { children: data.map((row, rowIndex) => /* @__PURE__ */ jsx(
+      TableRow,
+      {
+        className: onRowClick ? "cursor-pointer" : void 0,
+        tabIndex: onRowClick ? 0 : void 0,
+        onClick: onRowClick ? (event) => {
+          if (rowClickIsFromInteractiveElement(event)) {
+            return;
+          }
+          onRowClick(row);
+        } : void 0,
+        onKeyDown: onRowClick ? (event) => {
+          if (event.key !== "Enter" && event.key !== " ") {
+            return;
+          }
+          if (event.target.closest(
+            'button, a, input, textarea, select, [role="menuitem"], [role="checkbox"]'
+          )) {
+            return;
+          }
+          event.preventDefault();
+          onRowClick(row);
+        } : void 0,
+        children: columns.map((col) => /* @__PURE__ */ jsx(TableCell, { className: ALIGN_CLASS[col.align ?? "left"], children: col.render ? col.render(row) : String(row[col.key] ?? "") }, col.key))
+      },
+      rowIndex
+    )) })
   ] });
 }
 

package/dist/index.d.ts

@@ -64,6 +64,8 @@ export { Image } from './components/Image';
 export type { ImageProps, ImageRadius, ImageFit } from './components/Image';
 export { Kbd } from './components/Kbd';
 export type { KbdProps } from './components/Kbd';
+export { MapEmbed } from './components/MapEmbed';
+export type { MapEmbedProps } from './components/MapEmbed';
 export { Empty } from './components/Empty';
 export type { EmptyProps } from './components/Empty';
 export { Toaster } from './components/Toaster';
@@ -75,7 +77,7 @@ export type { AspectRatioProps } from './components/AspectRatio';
 export { ScrollArea } from './components/ScrollArea';
 export type { ScrollAreaProps } from './components/ScrollArea';
 export { Table } from './components/Table';
-export type { TableProps, TableColumn } from './components/Table';
+export type { TableProps, TableColumn, TableFilterOption, TableSort } from './components/Table';
 export { Carousel } from './components/Carousel';
 export type { CarouselProps } from './components/Carousel';
 export { Tabs } from './components/Tabs';
@@ -113,7 +115,7 @@ export type { NavigationMenuProps, NavItem } from './components/NavigationMenu';
 export { Menubar } from './components/Menubar';
 export type { MenubarProps, MenuDef, MenubarItemDef } from './components/Menubar';
 export { Sidebar } from './components/Sidebar';
-export type { SidebarProps, SidebarNavGroup, SidebarNavItem, SidebarNavSubItem, SidebarBrand, SidebarUser, } from './components/Sidebar';
+export type { SidebarProps, SidebarNavGroup, SidebarNavItem, SidebarNavSubItem, SidebarBrand, SidebarUser, SidebarUserMenuItem, } from './components/Sidebar';
 export { Resizable } from './components/Resizable';
 export type { ResizableProps } from './components/Resizable';
 export { Chart } from './components/Chart';

package/dist/index.js

@@ -31,6 +31,7 @@ export { Spinner } from './components/Spinner.js';
 export { Avatar } from './components/Avatar.js';
 export { Image } from './components/Image.js';
 export { Kbd } from './components/Kbd.js';
+export { MapEmbed } from './components/MapEmbed.js';
 export { Empty } from './components/Empty.js';
 export { Toaster } from './components/Toaster.js';
 export { Separator } from './components/Separator.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackbernnie/hiyf",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "human-in-your-face — an AI design protocol (a locked, LLM-safe design system). Forked from Polar's Orbit (Apache-2.0).",
   "license": "Apache-2.0",
   "type": "module",