@hanzo/ui 8.27.9 → 8.27.11

package/dist/backends/gui/item.cjs

@@ -0,0 +1,154 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Item = Item;
+exports.ItemMedia = ItemMedia;
+exports.ItemContent = ItemContent;
+exports.ItemTitle = ItemTitle;
+exports.ItemDescription = ItemDescription;
+exports.ItemActions = ItemActions;
+exports.ItemHeader = ItemHeader;
+exports.ItemFooter = ItemFooter;
+exports.ItemGroup = ItemGroup;
+exports.ItemSeparator = ItemSeparator;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Item — a flex row for displaying content with media, a title, a description
+ * and actions. `ItemGroup` stacks several with one rhythm and a separator
+ * between them; `asChild` puts the item's hover/focus styling on a passed-in
+ * element (an anchor, say) instead of wrapping it.
+ *
+ * `Item`, `ItemMedia`, `ItemContent`, `ItemTitle`, `ItemDescription`,
+ * `ItemActions`, `ItemHeader`, `ItemFooter`, `ItemGroup`, `ItemSeparator`, and
+ * the `data-slot`/`data-variant`/`data-size` markers.
+ *
+ * Variant and size live on `Item` alone — border, background, gap and padding.
+ * The parts inside (`ItemMedia`, `ItemTitle`, ...) carry fixed styling of their
+ * own and never read Item's variant or size, matching the original shape.
+ */
+const gui_1 = require("@hanzo/gui");
+const layout_1 = require("./layout.cjs");
+const ink_1 = require("./ink.cjs");
+/** The system's WCAG-checked ring, restored on the plain `<div>` this renders as. */
+const RING = { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' };
+const ItemFrame = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'Item',
+    flexWrap: 'wrap',
+    items: 'center',
+    rounded: '$3',
+    borderWidth: 1,
+    borderColor: 'transparent',
+    outlineWidth: 0,
+    focusVisibleStyle: RING,
+    hoverStyle: { bg: '$hover' },
+    variants: {
+        variant: {
+            default: { bg: 'transparent' },
+            outline: { bg: 'transparent', borderColor: '$borderColor' },
+            muted: { bg: '$edge' },
+        },
+        size: {
+            default: { gap: '$4', p: '$4' },
+            sm: { gap: '$2.5', px: '$4', py: '$3' },
+        },
+    },
+    defaultVariants: { variant: 'default', size: 'default' },
+});
+function Item({ variant = 'default', size = 'default', asChild = false, ...props }) {
+    const v = variant ?? 'default';
+    const s = size ?? 'default';
+    return ((0, jsx_runtime_1.jsx)(ItemFrame, { "data-slot": "item", "data-variant": v, "data-size": s, variant: v, size: s, asChild: asChild, render: asChild ? undefined : 'div', ...props }));
+}
+const ItemMediaFrame = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'ItemMedia',
+    shrink: 0,
+    items: 'center',
+    justify: 'center',
+    gap: '$2',
+    variants: {
+        variant: {
+            default: { bg: 'transparent' },
+            icon: { bg: '$edge', width: 32, height: 32, rounded: '$2', borderWidth: 1, borderColor: '$borderColor' },
+            image: { width: 40, height: 40, rounded: '$2', overflow: 'hidden' },
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+function ItemMedia({ variant = 'default', ...props }) {
+    const v = variant ?? 'default';
+    return (0, jsx_runtime_1.jsx)(ItemMediaFrame, { "data-slot": "item-media", "data-variant": v, variant: v, ...props });
+}
+const ItemContentFrame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'ItemContent',
+    flex: 1,
+    gap: '$1',
+});
+function ItemContent(props) {
+    return (0, jsx_runtime_1.jsx)(ItemContentFrame, { "data-slot": "item-content", ...props });
+}
+const ItemTitleFrame = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'ItemTitle',
+    display: 'inline-flex',
+    self: 'flex-start',
+    items: 'center',
+    gap: '$2',
+});
+function ItemTitle({ children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(ItemTitleFrame, { "data-slot": "item-title", ...props, children: (0, ink_1.ink)(children, gui_1.SizableText, { size: '$3', fontWeight: '600' }) }));
+}
+const ItemDescriptionFrame = (0, gui_1.styled)(gui_1.SizableText, {
+    name: 'ItemDescription',
+    size: '$3',
+    color: '$quiet',
+    fontWeight: '400',
+});
+// The line clamp shadcn ships as `line-clamp-2`. `-webkit-box` degrades to a
+// plain paragraph on a host that ignores it, which is the correct fallback —
+// carried as an inline style rather than a styled() variant because it is CSS
+// with no token behind it, not a design choice a theme should be able to flip.
+const CLAMP = {
+    display: '-webkit-box',
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: 'vertical',
+    overflow: 'hidden',
+};
+function ItemDescription({ style, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(ItemDescriptionFrame, { "data-slot": "item-description", style: { ...CLAMP, ...style }, ...props }));
+}
+const ItemActionsFrame = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'ItemActions',
+    items: 'center',
+    gap: '$2',
+});
+function ItemActions(props) {
+    return (0, jsx_runtime_1.jsx)(ItemActionsFrame, { "data-slot": "item-actions", ...props });
+}
+const ItemHeaderFrame = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'ItemHeader',
+    flexBasis: '100%',
+    items: 'center',
+    justify: 'space-between',
+    gap: '$2',
+});
+function ItemHeader(props) {
+    return (0, jsx_runtime_1.jsx)(ItemHeaderFrame, { "data-slot": "item-header", ...props });
+}
+const ItemFooterFrame = (0, gui_1.styled)(gui_1.XStack, {
+    name: 'ItemFooter',
+    flexBasis: '100%',
+    items: 'center',
+    justify: 'space-between',
+    gap: '$2',
+});
+function ItemFooter(props) {
+    return (0, jsx_runtime_1.jsx)(ItemFooterFrame, { "data-slot": "item-footer", ...props });
+}
+const ItemGroupFrame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'ItemGroup',
+});
+function ItemGroup(props) {
+    return (0, jsx_runtime_1.jsx)(ItemGroupFrame, { "data-slot": "item-group", role: "list", ...props });
+}
+function ItemSeparator(props) {
+    return (0, jsx_runtime_1.jsx)(layout_1.Separator, { "data-slot": "item-separator", my: 0, ...props });
+}

package/dist/backends/gui/item.d.ts

@@ -0,0 +1,72 @@
+import type { ComponentProps } from 'react';
+import { Separator } from './layout.js';
+export type ItemVariant = 'default' | 'outline' | 'muted';
+export type ItemSize = 'default' | 'sm';
+export type ItemMediaVariant = 'default' | 'icon' | 'image';
+declare const ItemFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+    size?: "default" | "sm" | undefined;
+    variant?: "default" | "muted" | "outline" | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+export type ItemProps = ComponentProps<typeof ItemFrame> & {
+    variant?: ItemVariant | null;
+    size?: ItemSize | null;
+    asChild?: boolean;
+};
+export declare function Item({ variant, size, asChild, ...props }: ItemProps): import("react").JSX.Element;
+declare const ItemMediaFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+    variant?: "default" | "icon" | "image" | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+export type ItemMediaProps = ComponentProps<typeof ItemMediaFrame> & {
+    variant?: ItemMediaVariant | null;
+};
+export declare function ItemMedia({ variant, ...props }: ItemMediaProps): import("react").JSX.Element;
+declare const ItemContentFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+export type ItemContentProps = ComponentProps<typeof ItemContentFrame>;
+export declare function ItemContent(props: ItemContentProps): import("react").JSX.Element;
+declare const ItemTitleFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+export type ItemTitleProps = ComponentProps<typeof ItemTitleFrame>;
+export declare function ItemTitle({ children, ...props }: ItemTitleProps): import("react").JSX.Element;
+declare const ItemDescriptionFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiTextElement, import("@hanzogui/web").TextNonStyleProps, import("@hanzogui/web").TextStylePropsBase, {
+    unstyled?: boolean | undefined;
+    size?: import("@hanzogui/web").FontSizeTokens | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+export type ItemDescriptionProps = ComponentProps<typeof ItemDescriptionFrame>;
+export declare function ItemDescription({ style, ...props }: ItemDescriptionProps): import("react").JSX.Element;
+declare const ItemActionsFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+export type ItemActionsProps = ComponentProps<typeof ItemActionsFrame>;
+export declare function ItemActions(props: ItemActionsProps): import("react").JSX.Element;
+declare const ItemHeaderFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+export type ItemHeaderProps = ComponentProps<typeof ItemHeaderFrame>;
+export declare function ItemHeader(props: ItemHeaderProps): import("react").JSX.Element;
+declare const ItemFooterFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+export type ItemFooterProps = ComponentProps<typeof ItemFooterFrame>;
+export declare function ItemFooter(props: ItemFooterProps): import("react").JSX.Element;
+declare const ItemGroupFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+}, import("@hanzogui/web").StaticConfigPublic>;
+export type ItemGroupProps = ComponentProps<typeof ItemGroupFrame>;
+export declare function ItemGroup(props: ItemGroupProps): import("react").JSX.Element;
+export type ItemSeparatorProps = ComponentProps<typeof Separator>;
+export declare function ItemSeparator(props: ItemSeparatorProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=item.d.ts.map

package/dist/backends/gui/item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/item.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAGpC,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AACzD,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAA;AACvC,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAA;AAK3D,QAAA,MAAM,SAAS;;;;;8CAwBb,CAAA;AAEF,MAAM,MAAM,SAAS,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IACzD,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC5B,IAAI,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,wBAAgB,IAAI,CAAC,EAAE,OAAmB,EAAE,IAAgB,EAAE,OAAe,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,+BAenG;AAED,QAAA,MAAM,cAAc;;;;8CAgBlB,CAAA;AAEF,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,GAAG;IACnE,OAAO,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAA;CAClC,CAAA;AAED,wBAAgB,SAAS,CAAC,EAAE,OAAmB,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BAG1E;AAED,QAAA,MAAM,gBAAgB;;;8CAIpB,CAAA;AAEF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAEtE,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAElD;AAED,QAAA,MAAM,cAAc;;;8CAMlB,CAAA;AAEF,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,CAAA;AAElE,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BAM/D;AAED,QAAA,MAAM,oBAAoB;;;8CAKxB,CAAA;AAEF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAA;AAa9E,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,+BAQxE;AAED,QAAA,MAAM,gBAAgB;;;8CAIpB,CAAA;AAEF,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAEtE,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,+BAElD;AAED,QAAA,MAAM,eAAe;;;8CAMnB,CAAA;AAEF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,CAAA;AAEpE,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BAEhD;AAED,QAAA,MAAM,eAAe;;;8CAMnB,CAAA;AAEF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,CAAA;AAEpE,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,+BAEhD;AAED,QAAA,MAAM,cAAc;;;8CAElB,CAAA;AAEF,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,OAAO,cAAc,CAAC,CAAA;AAElE,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,+BAE9C;AAED,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAA;AAEjE,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAEtD"}

package/dist/backends/gui/item.js

@@ -0,0 +1,143 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Item — a flex row for displaying content with media, a title, a description
+ * and actions. `ItemGroup` stacks several with one rhythm and a separator
+ * between them; `asChild` puts the item's hover/focus styling on a passed-in
+ * element (an anchor, say) instead of wrapping it.
+ *
+ * `Item`, `ItemMedia`, `ItemContent`, `ItemTitle`, `ItemDescription`,
+ * `ItemActions`, `ItemHeader`, `ItemFooter`, `ItemGroup`, `ItemSeparator`, and
+ * the `data-slot`/`data-variant`/`data-size` markers.
+ *
+ * Variant and size live on `Item` alone — border, background, gap and padding.
+ * The parts inside (`ItemMedia`, `ItemTitle`, ...) carry fixed styling of their
+ * own and never read Item's variant or size, matching the original shape.
+ */
+import { SizableText, XStack, YStack, styled } from '@hanzo/gui';
+import { Separator } from './layout.js';
+import { ink } from './ink.js';
+/** The system's WCAG-checked ring, restored on the plain `<div>` this renders as. */
+const RING = { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' };
+const ItemFrame = styled(XStack, {
+    name: 'Item',
+    flexWrap: 'wrap',
+    items: 'center',
+    rounded: '$3',
+    borderWidth: 1,
+    borderColor: 'transparent',
+    outlineWidth: 0,
+    focusVisibleStyle: RING,
+    hoverStyle: { bg: '$hover' },
+    variants: {
+        variant: {
+            default: { bg: 'transparent' },
+            outline: { bg: 'transparent', borderColor: '$borderColor' },
+            muted: { bg: '$edge' },
+        },
+        size: {
+            default: { gap: '$4', p: '$4' },
+            sm: { gap: '$2.5', px: '$4', py: '$3' },
+        },
+    },
+    defaultVariants: { variant: 'default', size: 'default' },
+});
+export function Item({ variant = 'default', size = 'default', asChild = false, ...props }) {
+    const v = variant ?? 'default';
+    const s = size ?? 'default';
+    return (_jsx(ItemFrame, { "data-slot": "item", "data-variant": v, "data-size": s, variant: v, size: s, asChild: asChild, render: asChild ? undefined : 'div', ...props }));
+}
+const ItemMediaFrame = styled(XStack, {
+    name: 'ItemMedia',
+    shrink: 0,
+    items: 'center',
+    justify: 'center',
+    gap: '$2',
+    variants: {
+        variant: {
+            default: { bg: 'transparent' },
+            icon: { bg: '$edge', width: 32, height: 32, rounded: '$2', borderWidth: 1, borderColor: '$borderColor' },
+            image: { width: 40, height: 40, rounded: '$2', overflow: 'hidden' },
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+export function ItemMedia({ variant = 'default', ...props }) {
+    const v = variant ?? 'default';
+    return _jsx(ItemMediaFrame, { "data-slot": "item-media", "data-variant": v, variant: v, ...props });
+}
+const ItemContentFrame = styled(YStack, {
+    name: 'ItemContent',
+    flex: 1,
+    gap: '$1',
+});
+export function ItemContent(props) {
+    return _jsx(ItemContentFrame, { "data-slot": "item-content", ...props });
+}
+const ItemTitleFrame = styled(XStack, {
+    name: 'ItemTitle',
+    display: 'inline-flex',
+    self: 'flex-start',
+    items: 'center',
+    gap: '$2',
+});
+export function ItemTitle({ children, ...props }) {
+    return (_jsx(ItemTitleFrame, { "data-slot": "item-title", ...props, children: ink(children, SizableText, { size: '$3', fontWeight: '600' }) }));
+}
+const ItemDescriptionFrame = styled(SizableText, {
+    name: 'ItemDescription',
+    size: '$3',
+    color: '$quiet',
+    fontWeight: '400',
+});
+// The line clamp shadcn ships as `line-clamp-2`. `-webkit-box` degrades to a
+// plain paragraph on a host that ignores it, which is the correct fallback —
+// carried as an inline style rather than a styled() variant because it is CSS
+// with no token behind it, not a design choice a theme should be able to flip.
+const CLAMP = {
+    display: '-webkit-box',
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: 'vertical',
+    overflow: 'hidden',
+};
+export function ItemDescription({ style, ...props }) {
+    return (_jsx(ItemDescriptionFrame, { "data-slot": "item-description", style: { ...CLAMP, ...style }, ...props }));
+}
+const ItemActionsFrame = styled(XStack, {
+    name: 'ItemActions',
+    items: 'center',
+    gap: '$2',
+});
+export function ItemActions(props) {
+    return _jsx(ItemActionsFrame, { "data-slot": "item-actions", ...props });
+}
+const ItemHeaderFrame = styled(XStack, {
+    name: 'ItemHeader',
+    flexBasis: '100%',
+    items: 'center',
+    justify: 'space-between',
+    gap: '$2',
+});
+export function ItemHeader(props) {
+    return _jsx(ItemHeaderFrame, { "data-slot": "item-header", ...props });
+}
+const ItemFooterFrame = styled(XStack, {
+    name: 'ItemFooter',
+    flexBasis: '100%',
+    items: 'center',
+    justify: 'space-between',
+    gap: '$2',
+});
+export function ItemFooter(props) {
+    return _jsx(ItemFooterFrame, { "data-slot": "item-footer", ...props });
+}
+const ItemGroupFrame = styled(YStack, {
+    name: 'ItemGroup',
+});
+export function ItemGroup(props) {
+    return _jsx(ItemGroupFrame, { "data-slot": "item-group", role: "list", ...props });
+}
+export function ItemSeparator(props) {
+    return _jsx(Separator, { "data-slot": "item-separator", my: 0, ...props });
+}
+//# sourceMappingURL=item.js.map

package/dist/backends/gui/item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../src/backends/gui/item.tsx"],"names":[],"mappings":"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"}

package/dist/backends/gui/kanban.cjs

@@ -0,0 +1,247 @@
+'use client';"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KanbanBoard = KanbanBoard;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Kanban — a board of columns holding draggable cards, with search, column
+ * limits, labels, priority, assignee and due date, and a create/edit dialog.
+ *
+ * The board is controlled: callers hold `KanbanBoardData` and pass it down
+ * with `onUpdateBoard`, so every mutation (drag, add, edit, delete) computes
+ * the next board and hands it back rather than mutating in place. Drag and
+ * drop is native HTML5 drag events (`draggable`, `dataTransfer`) gated by
+ * `isWeb`, the same split `dropzone.tsx` uses for file drops — there is no
+ * `@dnd-kit` in this workspace and none is needed for a same-tab reorder.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const React = __importStar(require("react"));
+const badge_1 = require("./badge.cjs");
+const button_1 = require("./button.cjs");
+const dialog_1 = require("./dialog.cjs");
+const dropdown_menu_1 = require("./dropdown-menu.cjs");
+const ink_1 = require("./ink.cjs");
+const input_1 = require("./input.cjs");
+const label_1 = require("./label.cjs");
+const select_1 = require("./select.cjs");
+const slot_1 = require("./slot.cjs");
+const textarea_1 = require("./textarea.cjs");
+const sx_1 = require("../../sx.cjs");
+const PRIORITY_COLOR = {
+    low: '$blue9',
+    medium: '$yellow9',
+    high: '$orange9',
+    urgent: '$red9',
+};
+/** Move a card from its column to `toColumnId`, optionally before `beforeId`. */
+const moveCard = (board, drag, toColumnId, beforeId) => {
+    const from = board.columns.find((col) => col.id === drag.columnId);
+    const card = from?.cards.find((c) => c.id === drag.cardId);
+    if (!from || !card)
+        return board;
+    const to = board.columns.find((col) => col.id === toColumnId);
+    if (!to)
+        return board;
+    if (from.id !== to.id && to.limit && to.cards.length >= to.limit)
+        return board;
+    return {
+        ...board,
+        columns: board.columns.map((col) => {
+            if (col.id === from.id && col.id === to.id) {
+                const rest = col.cards.filter((c) => c.id !== card.id);
+                const at = beforeId ? rest.findIndex((c) => c.id === beforeId) : rest.length;
+                const index = at < 0 ? rest.length : at;
+                return { ...col, cards: [...rest.slice(0, index), card, ...rest.slice(index)] };
+            }
+            if (col.id === from.id)
+                return { ...col, cards: col.cards.filter((c) => c.id !== card.id) };
+            if (col.id === to.id) {
+                const at = beforeId ? col.cards.findIndex((c) => c.id === beforeId) : col.cards.length;
+                const index = at < 0 ? col.cards.length : at;
+                return { ...col, cards: [...col.cards.slice(0, index), card, ...col.cards.slice(index)] };
+            }
+            return col;
+        }),
+    };
+};
+const matches = (card, query) => {
+    const q = query.toLowerCase();
+    return (card.title.toLowerCase().includes(q) ||
+        (card.description?.toLowerCase().includes(q) ?? false) ||
+        (card.labels?.some((label) => label.name.toLowerCase().includes(q)) ?? false));
+};
+const BoardFrame = (0, gui_1.styled)(gui_1.YStack, { name: 'Kanban', flex: 1, height: '100%' });
+const ColumnFrame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'KanbanColumn',
+    bg: '$raised',
+    rounded: '$4',
+    p: '$4',
+    minW: 280,
+    maxW: 280,
+    gap: '$3',
+    variants: {
+        over: { true: { borderColor: '$borderColor', borderWidth: 1 } },
+    },
+});
+const CardFrame = (0, gui_1.styled)(gui_1.YStack, {
+    name: 'KanbanCard',
+    bg: '$background',
+    borderWidth: 1,
+    borderColor: '$borderColor',
+    rounded: '$4',
+    p: '$3',
+    gap: '$2',
+    cursor: 'grab',
+    variants: {
+        dragging: { true: { opacity: 0.5 } },
+    },
+});
+function KanbanCardView({ card, drag, onDragStart, onDragEnd, onDropBefore, onEdit, onDelete, }) {
+    return ((0, jsx_runtime_1.jsxs)(CardFrame, { ...(0, slot_1.slot)('kanban-card'), "data-card-id": card.id, dragging: drag?.cardId === card.id, ...(gui_1.isWeb
+            ? {
+                draggable: true,
+                onDragStart,
+                onDragEnd,
+                onDragOver: (e) => e.preventDefault(),
+                onDrop: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onDropBefore(e);
+                },
+            }
+            : null), children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { justify: "space-between", items: "flex-start", gap: "$2", children: [(0, ink_1.ink)(card.title, gui_1.SizableText, { fontWeight: '600', fontSize: '$3', flex: 1 }), (0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...(0, slot_1.slot)('kanban-card-menu'), variant: "ghost", size: "icon-sm", "aria-label": "Card actions", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.MoreHorizontal, { size: 14 }) }) }), (0, jsx_runtime_1.jsxs)(dropdown_menu_1.DropdownMenuContent, { align: "end", children: [(0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuItem, { onSelect: onEdit, children: "Edit" }), (0, jsx_runtime_1.jsx)(dropdown_menu_1.DropdownMenuItem, { variant: "destructive", onSelect: onDelete, children: "Delete" })] })] })] }), card.description ? (0, ink_1.ink)(card.description, gui_1.SizableText, { fontSize: '$1', color: '$quiet' }) : null, card.labels && card.labels.length > 0 ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { gap: "$1", flexWrap: "wrap", children: card.labels.map((label) => ((0, jsx_runtime_1.jsx)(badge_1.Badge, { variant: "outline", style: { borderColor: label.color, color: label.color }, children: label.name }, label.id))) })) : null, (0, jsx_runtime_1.jsxs)(gui_1.XStack, { justify: "space-between", items: "center", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", items: "center", children: [card.priority ? ((0, jsx_runtime_1.jsx)(badge_1.Badge, { ...(0, slot_1.slot)('kanban-card-priority'), variant: "outline", style: { borderColor: PRIORITY_COLOR[card.priority], color: PRIORITY_COLOR[card.priority] }, children: card.priority })) : null, card.assignee ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$1", items: "center", children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.User, { size: 12, color: "$quiet" }), (0, ink_1.ink)(card.assignee, gui_1.SizableText, { fontSize: '$1', color: '$quiet' })] })) : null] }), card.dueDate ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$1", items: "center", children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Calendar, { size: 12, color: "$quiet" }), (0, ink_1.ink)(new Date(card.dueDate).toLocaleDateString(), gui_1.SizableText, { fontSize: '$1', color: '$quiet' })] })) : null] })] }));
+}
+function KanbanColumnView({ column, drag, onDragStart, onDragEnd, onDropOn, onAddCard, onEditCard, onDeleteCard, }) {
+    const full = column.limit != null && column.cards.length >= column.limit;
+    return ((0, jsx_runtime_1.jsxs)(ColumnFrame, { ...(0, slot_1.slot)('kanban-column'), "data-column-id": column.id, ...(gui_1.isWeb
+            ? {
+                onDragOver: (e) => e.preventDefault(),
+                onDrop: onDropOn(column.id),
+            }
+            : null), children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { justify: "space-between", items: "center", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", items: "center", children: [(0, ink_1.ink)(column.title, gui_1.SizableText, { fontWeight: '600', fontSize: '$3' }), (0, jsx_runtime_1.jsx)(badge_1.Badge, { variant: "secondary", children: column.limit != null ? `${column.cards.length}/${column.limit}` : column.cards.length })] }), (0, jsx_runtime_1.jsx)(button_1.Button, { ...(0, slot_1.slot)('kanban-add-card'), variant: "ghost", size: "icon-sm", "aria-label": `Add card to ${column.title}`, disabled: full, onPress: onAddCard, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, { size: 14 }) })] }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { gap: "$3", minH: 40, children: column.cards.map((card) => ((0, jsx_runtime_1.jsx)(KanbanCardView, { card: card, drag: drag, onDragStart: onDragStart(card), onDragEnd: onDragEnd, onDropBefore: onDropOn(column.id, card.id), onEdit: () => onEditCard(card), onDelete: () => onDeleteCard(card.id) }, card.id))) })] }));
+}
+function KanbanCardDialog({ open, onOpenChange, card, labels, onSave, }) {
+    const [title, setTitle] = React.useState(card?.title ?? '');
+    const [description, setDescription] = React.useState(card?.description ?? '');
+    const [priority, setPriority] = React.useState(card?.priority ?? 'low');
+    const [assignee, setAssignee] = React.useState(card?.assignee ?? '');
+    const [dueDate, setDueDate] = React.useState(card?.dueDate ?? '');
+    React.useEffect(() => {
+        setTitle(card?.title ?? '');
+        setDescription(card?.description ?? '');
+        setPriority(card?.priority ?? 'low');
+        setAssignee(card?.assignee ?? '');
+        setDueDate(card?.dueDate ?? '');
+    }, [card, open]);
+    const submit = (e) => {
+        e.preventDefault();
+        if (!title.trim())
+            return;
+        onSave({ title, description, priority, assignee, dueDate, labels: card?.labels });
+        onOpenChange(false);
+    };
+    return ((0, jsx_runtime_1.jsx)(dialog_1.Dialog, { open: open, onOpenChange: onOpenChange, children: (0, jsx_runtime_1.jsxs)(dialog_1.DialogContent, { ...(0, slot_1.slot)('kanban-card-dialog'), children: [(0, jsx_runtime_1.jsxs)(dialog_1.DialogHeader, { children: [(0, jsx_runtime_1.jsx)(dialog_1.DialogTitle, { children: card ? 'Edit Card' : 'Create Card' }), (0, jsx_runtime_1.jsx)(dialog_1.DialogDescription, { children: card ? 'Update the card details below.' : 'Create a new card for your kanban board.' })] }), (0, jsx_runtime_1.jsxs)("form", { onSubmit: submit, children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$3", children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$1", children: [(0, jsx_runtime_1.jsx)(label_1.Label, { htmlFor: "kanban-title", children: "Title" }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: "kanban-title", value: title, onChangeText: setTitle, placeholder: "Card title" })] }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$1", children: [(0, jsx_runtime_1.jsx)(label_1.Label, { htmlFor: "kanban-description", children: "Description" }), (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { id: "kanban-description", value: description, onChangeText: setDescription, rows: 3 })] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$3", children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$1", flex: 1, children: [(0, jsx_runtime_1.jsx)(label_1.Label, { children: "Priority" }), (0, jsx_runtime_1.jsxs)(select_1.Select, { value: priority, onValueChange: (v) => setPriority(v), children: [(0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, {}) }), (0, jsx_runtime_1.jsxs)(select_1.SelectContent, { children: [(0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: "low", children: "Low" }), (0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: "medium", children: "Medium" }), (0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: "high", children: "High" }), (0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: "urgent", children: "Urgent" })] })] })] }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$1", flex: 1, children: [(0, jsx_runtime_1.jsx)(label_1.Label, { htmlFor: "kanban-assignee", children: "Assignee" }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: "kanban-assignee", value: assignee, onChangeText: setAssignee, placeholder: "Assign to..." })] })] }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$1", children: [(0, jsx_runtime_1.jsx)(label_1.Label, { htmlFor: "kanban-due", children: "Due date" }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: "kanban-due", type: "date", value: dueDate, onChangeText: setDueDate })] })] }), (0, jsx_runtime_1.jsxs)(dialog_1.DialogFooter, { mt: "$4", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", variant: "outline", onPress: () => onOpenChange(false), children: "Cancel" }), (0, jsx_runtime_1.jsxs)(button_1.Button, { type: "submit", children: [card ? 'Update' : 'Create', " Card"] })] })] })] }) }));
+}
+function KanbanBoard({ board, onUpdateBoard, className }) {
+    const [query, setQuery] = React.useState('');
+    const [drag, setDrag] = React.useState(null);
+    const [dialogOpen, setDialogOpen] = React.useState(false);
+    const [editingCard, setEditingCard] = React.useState(undefined);
+    const [targetColumnId, setTargetColumnId] = React.useState('');
+    const shown = React.useMemo(() => query.trim()
+        ? { ...board, columns: board.columns.map((col) => ({ ...col, cards: col.cards.filter((c) => matches(c, query)) })) }
+        : board, [board, query]);
+    const onDragStart = (card) => (e) => {
+        const columnId = board.columns.find((col) => col.cards.some((c) => c.id === card.id))?.id ?? '';
+        setDrag({ cardId: card.id, columnId });
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData('text/plain', card.id);
+    };
+    const onDragEnd = () => setDrag(null);
+    const onDropOn = (columnId, beforeId) => (e) => {
+        e.preventDefault();
+        if (!drag)
+            return;
+        const next = moveCard(board, drag, columnId, beforeId);
+        if (next !== board)
+            onUpdateBoard(next);
+        setDrag(null);
+    };
+    const openAdd = (columnId) => {
+        setTargetColumnId(columnId);
+        setEditingCard(undefined);
+        setDialogOpen(true);
+    };
+    const openEdit = (card) => {
+        setEditingCard(card);
+        setTargetColumnId('');
+        setDialogOpen(true);
+    };
+    const deleteCard = (cardId) => onUpdateBoard({
+        ...board,
+        columns: board.columns.map((col) => ({ ...col, cards: col.cards.filter((c) => c.id !== cardId) })),
+    });
+    const saveCard = (data) => {
+        const now = new Date().toISOString();
+        if (editingCard) {
+            onUpdateBoard({
+                ...board,
+                columns: board.columns.map((col) => ({
+                    ...col,
+                    cards: col.cards.map((c) => (c.id === editingCard.id ? { ...c, ...data, updatedAt: now } : c)),
+                })),
+            });
+            return;
+        }
+        const card = {
+            id: `card-${Date.now()}`,
+            title: data.title ?? '',
+            description: data.description,
+            priority: data.priority,
+            assignee: data.assignee,
+            dueDate: data.dueDate,
+            labels: data.labels,
+            createdAt: now,
+            updatedAt: now,
+        };
+        onUpdateBoard({
+            ...board,
+            columns: board.columns.map((col) => (col.id === targetColumnId ? { ...col, cards: [...col.cards, card] } : col)),
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)(BoardFrame, { ...(0, slot_1.slot)('kanban'), ...(0, sx_1.sx)(className), children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('kanban-header'), justify: "space-between", items: "center", p: "$4", borderBottomWidth: 1, borderColor: "$borderColor", children: [(0, ink_1.ink)(board.title, gui_1.SizableText, { fontSize: '$6', fontWeight: '700' }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { position: "relative", width: 256, items: "center", children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { position: "absolute", l: "$2", pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Search, { size: 14, color: "$quiet" }) }), (0, jsx_runtime_1.jsx)(input_1.Input, { ...(0, slot_1.slot)('kanban-search'), placeholder: "Search cards...", value: query, onChangeText: setQuery, pl: "$7" }), query ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { position: "absolute", r: "$2", cursor: "pointer", onPress: () => setQuery(''), "aria-label": "Clear search", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 14 }) })) : null] })] }), (0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('kanban-board'), gap: "$4", p: "$4", flex: 1, overflow: "scroll", children: shown.columns.map((column) => ((0, jsx_runtime_1.jsx)(KanbanColumnView, { column: column, drag: drag, onDragStart: onDragStart, onDragEnd: onDragEnd, onDropOn: onDropOn, onAddCard: () => openAdd(column.id), onEditCard: openEdit, onDeleteCard: deleteCard }, column.id))) }), (0, jsx_runtime_1.jsx)(KanbanCardDialog, { open: dialogOpen, onOpenChange: setDialogOpen, card: editingCard, labels: board.labels, onSave: saveCard })] }));
+}