@hanzo/ui 8.27.10 → 8.27.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/backends/gui/comparison.cjs +17 -21
- package/dist/backends/gui/comparison.d.ts +4 -5
- package/dist/backends/gui/comparison.d.ts.map +1 -1
- package/dist/backends/gui/comparison.js +18 -22
- package/dist/backends/gui/comparison.js.map +1 -1
- package/dist/backends/gui/crypto-screener.cjs +21 -31
- package/dist/backends/gui/crypto-screener.d.ts +20 -24
- package/dist/backends/gui/crypto-screener.d.ts.map +1 -1
- package/dist/backends/gui/crypto-screener.js +21 -31
- package/dist/backends/gui/crypto-screener.js.map +1 -1
- package/dist/backends/gui/cursor.cjs +15 -18
- package/dist/backends/gui/cursor.d.ts +4 -3
- package/dist/backends/gui/cursor.d.ts.map +1 -1
- package/dist/backends/gui/cursor.js +15 -18
- package/dist/backends/gui/cursor.js.map +1 -1
- package/dist/backends/gui/data-table.cjs +144 -184
- package/dist/backends/gui/data-table.d.ts +64 -44
- package/dist/backends/gui/data-table.d.ts.map +1 -1
- package/dist/backends/gui/data-table.js +146 -152
- package/dist/backends/gui/data-table.js.map +1 -1
- package/dist/backends/gui/dock.cjs +1 -1
- package/dist/backends/gui/dock.d.ts.map +1 -1
- package/dist/backends/gui/dock.js +1 -1
- package/dist/backends/gui/dock.js.map +1 -1
- package/dist/backends/gui/editor.cjs +35 -31
- package/dist/backends/gui/editor.d.ts +11 -11
- package/dist/backends/gui/editor.d.ts.map +1 -1
- package/dist/backends/gui/editor.js +35 -31
- package/dist/backends/gui/editor.js.map +1 -1
- package/dist/backends/gui/field.cjs +132 -0
- package/dist/backends/gui/field.d.ts +74 -0
- package/dist/backends/gui/field.d.ts.map +1 -0
- package/dist/backends/gui/field.js +121 -0
- package/dist/backends/gui/field.js.map +1 -0
- package/dist/backends/gui/gantt.cjs +17 -19
- package/dist/backends/gui/gantt.d.ts +4 -5
- package/dist/backends/gui/gantt.d.ts.map +1 -1
- package/dist/backends/gui/gantt.js +18 -21
- package/dist/backends/gui/gantt.js.map +1 -1
- package/dist/backends/gui/glimpse.cjs +88 -0
- package/dist/backends/gui/glimpse.d.ts +57 -0
- package/dist/backends/gui/glimpse.d.ts.map +1 -0
- package/dist/backends/gui/glimpse.js +81 -0
- package/dist/backends/gui/glimpse.js.map +1 -0
- package/dist/backends/gui/grid-pattern.cjs +119 -0
- package/dist/backends/gui/grid-pattern.d.ts +96 -0
- package/dist/backends/gui/grid-pattern.d.ts.map +1 -0
- package/dist/backends/gui/grid-pattern.js +84 -0
- package/dist/backends/gui/grid-pattern.js.map +1 -0
- package/dist/backends/gui/image-crop.cjs +35 -0
- package/dist/backends/gui/image-crop.d.ts +20 -0
- package/dist/backends/gui/image-crop.d.ts.map +1 -0
- package/dist/backends/gui/image-crop.js +33 -0
- package/dist/backends/gui/image-crop.js.map +1 -0
- package/dist/backends/gui/image-zoom.cjs +58 -0
- package/dist/backends/gui/image-zoom.d.ts +16 -0
- package/dist/backends/gui/image-zoom.d.ts.map +1 -0
- package/dist/backends/gui/image-zoom.js +56 -0
- package/dist/backends/gui/image-zoom.js.map +1 -0
- package/dist/backends/gui/index.cjs +159 -1
- package/dist/backends/gui/index.d.ts +49 -0
- package/dist/backends/gui/index.d.ts.map +1 -1
- package/dist/backends/gui/index.js +49 -0
- package/dist/backends/gui/index.js.map +1 -1
- package/dist/backends/gui/interactive-grid-pattern.cjs +61 -0
- package/dist/backends/gui/interactive-grid-pattern.d.ts +28 -0
- package/dist/backends/gui/interactive-grid-pattern.d.ts.map +1 -0
- package/dist/backends/gui/interactive-grid-pattern.js +26 -0
- package/dist/backends/gui/interactive-grid-pattern.js.map +1 -0
- package/dist/backends/gui/iphone-15-pro.cjs +83 -0
- package/dist/backends/gui/iphone-15-pro.d.ts +16 -0
- package/dist/backends/gui/iphone-15-pro.d.ts.map +1 -0
- package/dist/backends/gui/iphone-15-pro.js +81 -0
- package/dist/backends/gui/iphone-15-pro.js.map +1 -0
- package/dist/backends/gui/item.cjs +154 -0
- package/dist/backends/gui/item.d.ts +72 -0
- package/dist/backends/gui/item.d.ts.map +1 -0
- package/dist/backends/gui/item.js +143 -0
- package/dist/backends/gui/item.js.map +1 -0
- package/dist/backends/gui/kanban.cjs +247 -0
- package/dist/backends/gui/kanban.d.ts +37 -0
- package/dist/backends/gui/kanban.d.ts.map +1 -0
- package/dist/backends/gui/kanban.js +212 -0
- package/dist/backends/gui/kanban.js.map +1 -0
- package/dist/backends/gui/kbd.cjs +45 -0
- package/dist/backends/gui/kbd.d.ts +8 -0
- package/dist/backends/gui/kbd.d.ts.map +1 -0
- package/dist/backends/gui/kbd.js +42 -0
- package/dist/backends/gui/kbd.js.map +1 -0
- package/dist/backends/gui/limelight-nav.cjs +201 -0
- package/dist/backends/gui/limelight-nav.d.ts +20 -0
- package/dist/backends/gui/limelight-nav.d.ts.map +1 -0
- package/dist/backends/gui/limelight-nav.js +166 -0
- package/dist/backends/gui/limelight-nav.js.map +1 -0
- package/dist/backends/gui/list.cjs +26 -0
- package/dist/backends/gui/list.d.ts +15 -0
- package/dist/backends/gui/list.d.ts.map +1 -0
- package/dist/backends/gui/list.js +23 -0
- package/dist/backends/gui/list.js.map +1 -0
- package/dist/backends/gui/macos-dock.cjs +84 -0
- package/dist/backends/gui/macos-dock.d.ts +30 -0
- package/dist/backends/gui/macos-dock.d.ts.map +1 -0
- package/dist/backends/gui/macos-dock.js +82 -0
- package/dist/backends/gui/macos-dock.js.map +1 -0
- package/dist/backends/gui/magnetic.cjs +40 -0
- package/dist/backends/gui/magnetic.d.ts +12 -0
- package/dist/backends/gui/magnetic.d.ts.map +1 -0
- package/dist/backends/gui/magnetic.js +38 -0
- package/dist/backends/gui/magnetic.js.map +1 -0
- package/dist/backends/gui/marquee.cjs +110 -0
- package/dist/backends/gui/marquee.d.ts +44 -0
- package/dist/backends/gui/marquee.d.ts.map +1 -0
- package/dist/backends/gui/marquee.js +75 -0
- package/dist/backends/gui/marquee.js.map +1 -0
- package/dist/backends/gui/menu-dock.cjs +64 -0
- package/dist/backends/gui/menu-dock.d.ts +21 -0
- package/dist/backends/gui/menu-dock.d.ts.map +1 -0
- package/dist/backends/gui/menu-dock.js +62 -0
- package/dist/backends/gui/menu-dock.js.map +1 -0
- package/dist/backends/gui/menubar.cjs +227 -0
- package/dist/backends/gui/menubar.d.ts +106 -0
- package/dist/backends/gui/menubar.d.ts.map +1 -0
- package/dist/backends/gui/menubar.js +177 -0
- package/dist/backends/gui/menubar.js.map +1 -0
- package/dist/backends/gui/message-dock.cjs +111 -0
- package/dist/backends/gui/message-dock.d.ts +22 -0
- package/dist/backends/gui/message-dock.d.ts.map +1 -0
- package/dist/backends/gui/message-dock.js +110 -0
- package/dist/backends/gui/message-dock.js.map +1 -0
- package/dist/backends/gui/mini-calendar.cjs +25 -0
- package/dist/backends/gui/mini-calendar.d.ts +22 -0
- package/dist/backends/gui/mini-calendar.d.ts.map +1 -0
- package/dist/backends/gui/mini-calendar.js +24 -0
- package/dist/backends/gui/mini-calendar.js.map +1 -0
- package/dist/backends/gui/minimal-tiptap.cjs +56 -0
- package/dist/backends/gui/minimal-tiptap.d.ts +20 -0
- package/dist/backends/gui/minimal-tiptap.d.ts.map +1 -0
- package/dist/backends/gui/minimal-tiptap.js +21 -0
- package/dist/backends/gui/minimal-tiptap.js.map +1 -0
- package/dist/backends/gui/motion-highlight.cjs +83 -0
- package/dist/backends/gui/motion-highlight.d.ts +27 -0
- package/dist/backends/gui/motion-highlight.d.ts.map +1 -0
- package/dist/backends/gui/motion-highlight.js +48 -0
- package/dist/backends/gui/motion-highlight.js.map +1 -0
- package/dist/backends/gui/navigation-bar.cjs +47 -0
- package/dist/backends/gui/navigation-bar.d.ts +48 -0
- package/dist/backends/gui/navigation-bar.d.ts.map +1 -0
- package/dist/backends/gui/navigation-bar.js +45 -0
- package/dist/backends/gui/navigation-bar.js.map +1 -0
- package/dist/backends/gui/news-timeline.cjs +47 -0
- package/dist/backends/gui/news-timeline.d.ts +39 -0
- package/dist/backends/gui/news-timeline.d.ts.map +1 -0
- package/dist/backends/gui/news-timeline.js +45 -0
- package/dist/backends/gui/news-timeline.js.map +1 -0
- package/dist/backends/gui/order-entry.cjs +53 -0
- package/dist/backends/gui/order-entry.d.ts +21 -0
- package/dist/backends/gui/order-entry.d.ts.map +1 -0
- package/dist/backends/gui/order-entry.js +52 -0
- package/dist/backends/gui/order-entry.js.map +1 -0
- package/dist/backends/gui/orders-history.cjs +102 -0
- package/dist/backends/gui/orders-history.d.ts +24 -0
- package/dist/backends/gui/orders-history.d.ts.map +1 -0
- package/dist/backends/gui/orders-history.js +67 -0
- package/dist/backends/gui/orders-history.js.map +1 -0
- package/dist/backends/gui/pagination.cjs +51 -0
- package/dist/backends/gui/pagination.d.ts +52 -0
- package/dist/backends/gui/pagination.d.ts.map +1 -0
- package/dist/backends/gui/pagination.js +42 -0
- package/dist/backends/gui/pagination.js.map +1 -0
- package/dist/backends/gui/particles-background.cjs +135 -0
- package/dist/backends/gui/particles-background.d.ts +24 -0
- package/dist/backends/gui/particles-background.d.ts.map +1 -0
- package/dist/backends/gui/particles-background.js +133 -0
- package/dist/backends/gui/particles-background.js.map +1 -0
- package/dist/backends/gui/particles.cjs +145 -0
- package/dist/backends/gui/particles.d.ts +25 -0
- package/dist/backends/gui/particles.d.ts.map +1 -0
- package/dist/backends/gui/particles.js +143 -0
- package/dist/backends/gui/particles.js.map +1 -0
- package/dist/backends/gui/pill.cjs +82 -0
- package/dist/backends/gui/pill.d.ts +12 -0
- package/dist/backends/gui/pill.d.ts.map +1 -0
- package/dist/backends/gui/pill.js +78 -0
- package/dist/backends/gui/pill.js.map +1 -0
- package/dist/backends/gui/pin-list.cjs +82 -0
- package/dist/backends/gui/pin-list.d.ts +42 -0
- package/dist/backends/gui/pin-list.d.ts.map +1 -0
- package/dist/backends/gui/pin-list.js +80 -0
- package/dist/backends/gui/pin-list.js.map +1 -0
- package/dist/backends/gui/pixel-image.cjs +63 -0
- package/dist/backends/gui/pixel-image.d.ts +21 -0
- package/dist/backends/gui/pixel-image.d.ts.map +1 -0
- package/dist/backends/gui/pixel-image.js +61 -0
- package/dist/backends/gui/pixel-image.js.map +1 -0
- package/dist/backends/gui/positions-list.cjs +60 -0
- package/dist/backends/gui/positions-list.d.ts +14 -0
- package/dist/backends/gui/positions-list.d.ts.map +1 -0
- package/dist/backends/gui/positions-list.js +58 -0
- package/dist/backends/gui/positions-list.js.map +1 -0
- package/dist/backends/gui/qr-code.cjs +438 -0
- package/dist/backends/gui/qr-code.d.ts +42 -0
- package/dist/backends/gui/qr-code.d.ts.map +1 -0
- package/dist/backends/gui/qr-code.js +402 -0
- package/dist/backends/gui/qr-code.js.map +1 -0
- package/dist/backends/gui/relative-time.cjs +167 -0
- package/dist/backends/gui/relative-time.d.ts +10 -0
- package/dist/backends/gui/relative-time.d.ts.map +1 -0
- package/dist/backends/gui/relative-time.js +132 -0
- package/dist/backends/gui/relative-time.js.map +1 -0
- package/dist/backends/gui/safari.cjs +65 -0
- package/dist/backends/gui/safari.d.ts +23 -0
- package/dist/backends/gui/safari.d.ts.map +1 -0
- package/dist/backends/gui/safari.js +63 -0
- package/dist/backends/gui/safari.js.map +1 -0
- package/dist/backends/gui/snippet.cjs +144 -0
- package/dist/backends/gui/snippet.d.ts +38 -0
- package/dist/backends/gui/snippet.d.ts.map +1 -0
- package/dist/backends/gui/snippet.js +141 -0
- package/dist/backends/gui/snippet.js.map +1 -0
- package/dist/backends/gui/stars-scrolling-wheel.cjs +106 -0
- package/dist/backends/gui/stars-scrolling-wheel.d.ts +24 -0
- package/dist/backends/gui/stars-scrolling-wheel.d.ts.map +1 -0
- package/dist/backends/gui/stars-scrolling-wheel.js +104 -0
- package/dist/backends/gui/stars-scrolling-wheel.js.map +1 -0
- package/dist/backends/gui/status.cjs +79 -0
- package/dist/backends/gui/status.d.ts +15 -0
- package/dist/backends/gui/status.d.ts.map +1 -0
- package/dist/backends/gui/status.js +77 -0
- package/dist/backends/gui/status.js.map +1 -0
- package/dist/backends/gui/stock-market.cjs +21 -0
- package/dist/backends/gui/stock-market.d.ts +17 -0
- package/dist/backends/gui/stock-market.d.ts.map +1 -0
- package/dist/backends/gui/stock-market.js +19 -0
- package/dist/backends/gui/stock-market.js.map +1 -0
- package/dist/backends/gui/stock-screener.cjs +55 -0
- package/dist/backends/gui/stock-screener.d.ts +41 -0
- package/dist/backends/gui/stock-screener.d.ts.map +1 -0
- package/dist/backends/gui/stock-screener.js +53 -0
- package/dist/backends/gui/stock-screener.js.map +1 -0
- package/dist/backends/gui/symbol-info.cjs +46 -0
- package/dist/backends/gui/symbol-info.d.ts +36 -0
- package/dist/backends/gui/symbol-info.d.ts.map +1 -0
- package/dist/backends/gui/symbol-info.js +44 -0
- package/dist/backends/gui/symbol-info.js.map +1 -0
- package/dist/backends/gui/table.cjs +104 -0
- package/dist/backends/gui/table.d.ts +57 -0
- package/dist/backends/gui/table.d.ts.map +1 -0
- package/dist/backends/gui/table.js +95 -0
- package/dist/backends/gui/table.js.map +1 -0
- package/dist/backends/gui/tags.cjs +22 -0
- package/dist/backends/gui/tags.d.ts +22 -0
- package/dist/backends/gui/tags.d.ts.map +1 -0
- package/dist/backends/gui/tags.js +20 -0
- package/dist/backends/gui/tags.js.map +1 -0
- package/dist/backends/gui/technical-analysis.cjs +58 -0
- package/dist/backends/gui/technical-analysis.d.ts +41 -0
- package/dist/backends/gui/technical-analysis.d.ts.map +1 -0
- package/dist/backends/gui/technical-analysis.js +56 -0
- package/dist/backends/gui/technical-analysis.js.map +1 -0
- package/dist/backends/gui/terminal.cjs +266 -0
- package/dist/backends/gui/terminal.d.ts +38 -0
- package/dist/backends/gui/terminal.d.ts.map +1 -0
- package/dist/backends/gui/terminal.js +231 -0
- package/dist/backends/gui/terminal.js.map +1 -0
- package/dist/backends/gui/ticker.cjs +79 -0
- package/dist/backends/gui/ticker.d.ts +19 -0
- package/dist/backends/gui/ticker.d.ts.map +1 -0
- package/dist/backends/gui/ticker.js +44 -0
- package/dist/backends/gui/ticker.js.map +1 -0
- package/dist/backends/gui/timeline.cjs +154 -0
- package/dist/backends/gui/timeline.d.ts +42 -0
- package/dist/backends/gui/timeline.d.ts.map +1 -0
- package/dist/backends/gui/timeline.js +118 -0
- package/dist/backends/gui/timeline.js.map +1 -0
- package/dist/backends/gui/toggle.cjs +96 -0
- package/dist/backends/gui/toggle.d.ts +29 -0
- package/dist/backends/gui/toggle.d.ts.map +1 -0
- package/dist/backends/gui/toggle.js +95 -0
- package/dist/backends/gui/toggle.js.map +1 -0
- package/dist/backends/gui/video-player.cjs +383 -0
- package/dist/backends/gui/video-player.d.ts +54 -0
- package/dist/backends/gui/video-player.d.ts.map +1 -0
- package/dist/backends/gui/video-player.js +348 -0
- package/dist/backends/gui/video-player.js.map +1 -0
- package/dist/gallery.html +249 -249
- package/dist/gui-config.cjs +5 -0
- package/dist/gui-config.d.ts +18 -3
- package/dist/gui-config.d.ts.map +1 -1
- package/dist/gui-config.js +5 -0
- package/dist/gui-config.js.map +1 -1
- package/dist/index.cjs +110 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.node.cjs +110 -1
- package/dist/index.node.js +1 -1
- package/dist/styles.css +124 -124
- package/package.json +1 -1
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import type { ComponentProps } from 'react';
|
|
2
|
+
import { Separator } from './layout.js';
|
|
3
|
+
export type ItemVariant = 'default' | 'outline' | 'muted';
|
|
4
|
+
export type ItemSize = 'default' | 'sm';
|
|
5
|
+
export type ItemMediaVariant = 'default' | 'icon' | 'image';
|
|
6
|
+
declare const ItemFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
|
|
7
|
+
elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
|
|
8
|
+
fullscreen?: boolean | undefined;
|
|
9
|
+
size?: "default" | "sm" | undefined;
|
|
10
|
+
variant?: "default" | "muted" | "outline" | undefined;
|
|
11
|
+
}, import("@hanzogui/web").StaticConfigPublic>;
|
|
12
|
+
export type ItemProps = ComponentProps<typeof ItemFrame> & {
|
|
13
|
+
variant?: ItemVariant | null;
|
|
14
|
+
size?: ItemSize | null;
|
|
15
|
+
asChild?: boolean;
|
|
16
|
+
};
|
|
17
|
+
export declare function Item({ variant, size, asChild, ...props }: ItemProps): import("react").JSX.Element;
|
|
18
|
+
declare const ItemMediaFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
|
|
19
|
+
elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
|
|
20
|
+
fullscreen?: boolean | undefined;
|
|
21
|
+
variant?: "default" | "icon" | "image" | undefined;
|
|
22
|
+
}, import("@hanzogui/web").StaticConfigPublic>;
|
|
23
|
+
export type ItemMediaProps = ComponentProps<typeof ItemMediaFrame> & {
|
|
24
|
+
variant?: ItemMediaVariant | null;
|
|
25
|
+
};
|
|
26
|
+
export declare function ItemMedia({ variant, ...props }: ItemMediaProps): import("react").JSX.Element;
|
|
27
|
+
declare const ItemContentFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
|
|
28
|
+
elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
|
|
29
|
+
fullscreen?: boolean | undefined;
|
|
30
|
+
}, import("@hanzogui/web").StaticConfigPublic>;
|
|
31
|
+
export type ItemContentProps = ComponentProps<typeof ItemContentFrame>;
|
|
32
|
+
export declare function ItemContent(props: ItemContentProps): import("react").JSX.Element;
|
|
33
|
+
declare const ItemTitleFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
|
|
34
|
+
elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
|
|
35
|
+
fullscreen?: boolean | undefined;
|
|
36
|
+
}, import("@hanzogui/web").StaticConfigPublic>;
|
|
37
|
+
export type ItemTitleProps = ComponentProps<typeof ItemTitleFrame>;
|
|
38
|
+
export declare function ItemTitle({ children, ...props }: ItemTitleProps): import("react").JSX.Element;
|
|
39
|
+
declare const ItemDescriptionFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiTextElement, import("@hanzogui/web").TextNonStyleProps, import("@hanzogui/web").TextStylePropsBase, {
|
|
40
|
+
unstyled?: boolean | undefined;
|
|
41
|
+
size?: import("@hanzogui/web").FontSizeTokens | undefined;
|
|
42
|
+
}, import("@hanzogui/web").StaticConfigPublic>;
|
|
43
|
+
export type ItemDescriptionProps = ComponentProps<typeof ItemDescriptionFrame>;
|
|
44
|
+
export declare function ItemDescription({ style, ...props }: ItemDescriptionProps): import("react").JSX.Element;
|
|
45
|
+
declare const ItemActionsFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
|
|
46
|
+
elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
|
|
47
|
+
fullscreen?: boolean | undefined;
|
|
48
|
+
}, import("@hanzogui/web").StaticConfigPublic>;
|
|
49
|
+
export type ItemActionsProps = ComponentProps<typeof ItemActionsFrame>;
|
|
50
|
+
export declare function ItemActions(props: ItemActionsProps): import("react").JSX.Element;
|
|
51
|
+
declare const ItemHeaderFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
|
|
52
|
+
elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
|
|
53
|
+
fullscreen?: boolean | undefined;
|
|
54
|
+
}, import("@hanzogui/web").StaticConfigPublic>;
|
|
55
|
+
export type ItemHeaderProps = ComponentProps<typeof ItemHeaderFrame>;
|
|
56
|
+
export declare function ItemHeader(props: ItemHeaderProps): import("react").JSX.Element;
|
|
57
|
+
declare const ItemFooterFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
|
|
58
|
+
elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
|
|
59
|
+
fullscreen?: boolean | undefined;
|
|
60
|
+
}, import("@hanzogui/web").StaticConfigPublic>;
|
|
61
|
+
export type ItemFooterProps = ComponentProps<typeof ItemFooterFrame>;
|
|
62
|
+
export declare function ItemFooter(props: ItemFooterProps): import("react").JSX.Element;
|
|
63
|
+
declare const ItemGroupFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
|
|
64
|
+
elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
|
|
65
|
+
fullscreen?: boolean | undefined;
|
|
66
|
+
}, import("@hanzogui/web").StaticConfigPublic>;
|
|
67
|
+
export type ItemGroupProps = ComponentProps<typeof ItemGroupFrame>;
|
|
68
|
+
export declare function ItemGroup(props: ItemGroupProps): import("react").JSX.Element;
|
|
69
|
+
export type ItemSeparatorProps = ComponentProps<typeof Separator>;
|
|
70
|
+
export declare function ItemSeparator(props: ItemSeparatorProps): import("react").JSX.Element;
|
|
71
|
+
export {};
|
|
72
|
+
//# sourceMappingURL=item.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
/**
|
|
4
|
+
* Item — a flex row for displaying content with media, a title, a description
|
|
5
|
+
* and actions. `ItemGroup` stacks several with one rhythm and a separator
|
|
6
|
+
* between them; `asChild` puts the item's hover/focus styling on a passed-in
|
|
7
|
+
* element (an anchor, say) instead of wrapping it.
|
|
8
|
+
*
|
|
9
|
+
* `Item`, `ItemMedia`, `ItemContent`, `ItemTitle`, `ItemDescription`,
|
|
10
|
+
* `ItemActions`, `ItemHeader`, `ItemFooter`, `ItemGroup`, `ItemSeparator`, and
|
|
11
|
+
* the `data-slot`/`data-variant`/`data-size` markers.
|
|
12
|
+
*
|
|
13
|
+
* Variant and size live on `Item` alone — border, background, gap and padding.
|
|
14
|
+
* The parts inside (`ItemMedia`, `ItemTitle`, ...) carry fixed styling of their
|
|
15
|
+
* own and never read Item's variant or size, matching the original shape.
|
|
16
|
+
*/
|
|
17
|
+
import { SizableText, XStack, YStack, styled } from '@hanzo/gui';
|
|
18
|
+
import { Separator } from './layout.js';
|
|
19
|
+
import { ink } from './ink.js';
|
|
20
|
+
/** The system's WCAG-checked ring, restored on the plain `<div>` this renders as. */
|
|
21
|
+
const RING = { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' };
|
|
22
|
+
const ItemFrame = styled(XStack, {
|
|
23
|
+
name: 'Item',
|
|
24
|
+
flexWrap: 'wrap',
|
|
25
|
+
items: 'center',
|
|
26
|
+
rounded: '$3',
|
|
27
|
+
borderWidth: 1,
|
|
28
|
+
borderColor: 'transparent',
|
|
29
|
+
outlineWidth: 0,
|
|
30
|
+
focusVisibleStyle: RING,
|
|
31
|
+
hoverStyle: { bg: '$hover' },
|
|
32
|
+
variants: {
|
|
33
|
+
variant: {
|
|
34
|
+
default: { bg: 'transparent' },
|
|
35
|
+
outline: { bg: 'transparent', borderColor: '$borderColor' },
|
|
36
|
+
muted: { bg: '$edge' },
|
|
37
|
+
},
|
|
38
|
+
size: {
|
|
39
|
+
default: { gap: '$4', p: '$4' },
|
|
40
|
+
sm: { gap: '$2.5', px: '$4', py: '$3' },
|
|
41
|
+
},
|
|
42
|
+
},
|
|
43
|
+
defaultVariants: { variant: 'default', size: 'default' },
|
|
44
|
+
});
|
|
45
|
+
export function Item({ variant = 'default', size = 'default', asChild = false, ...props }) {
|
|
46
|
+
const v = variant ?? 'default';
|
|
47
|
+
const s = size ?? 'default';
|
|
48
|
+
return (_jsx(ItemFrame, { "data-slot": "item", "data-variant": v, "data-size": s, variant: v, size: s, asChild: asChild, render: asChild ? undefined : 'div', ...props }));
|
|
49
|
+
}
|
|
50
|
+
const ItemMediaFrame = styled(XStack, {
|
|
51
|
+
name: 'ItemMedia',
|
|
52
|
+
shrink: 0,
|
|
53
|
+
items: 'center',
|
|
54
|
+
justify: 'center',
|
|
55
|
+
gap: '$2',
|
|
56
|
+
variants: {
|
|
57
|
+
variant: {
|
|
58
|
+
default: { bg: 'transparent' },
|
|
59
|
+
icon: { bg: '$edge', width: 32, height: 32, rounded: '$2', borderWidth: 1, borderColor: '$borderColor' },
|
|
60
|
+
image: { width: 40, height: 40, rounded: '$2', overflow: 'hidden' },
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
defaultVariants: { variant: 'default' },
|
|
64
|
+
});
|
|
65
|
+
export function ItemMedia({ variant = 'default', ...props }) {
|
|
66
|
+
const v = variant ?? 'default';
|
|
67
|
+
return _jsx(ItemMediaFrame, { "data-slot": "item-media", "data-variant": v, variant: v, ...props });
|
|
68
|
+
}
|
|
69
|
+
const ItemContentFrame = styled(YStack, {
|
|
70
|
+
name: 'ItemContent',
|
|
71
|
+
flex: 1,
|
|
72
|
+
gap: '$1',
|
|
73
|
+
});
|
|
74
|
+
export function ItemContent(props) {
|
|
75
|
+
return _jsx(ItemContentFrame, { "data-slot": "item-content", ...props });
|
|
76
|
+
}
|
|
77
|
+
const ItemTitleFrame = styled(XStack, {
|
|
78
|
+
name: 'ItemTitle',
|
|
79
|
+
display: 'inline-flex',
|
|
80
|
+
self: 'flex-start',
|
|
81
|
+
items: 'center',
|
|
82
|
+
gap: '$2',
|
|
83
|
+
});
|
|
84
|
+
export function ItemTitle({ children, ...props }) {
|
|
85
|
+
return (_jsx(ItemTitleFrame, { "data-slot": "item-title", ...props, children: ink(children, SizableText, { size: '$3', fontWeight: '600' }) }));
|
|
86
|
+
}
|
|
87
|
+
const ItemDescriptionFrame = styled(SizableText, {
|
|
88
|
+
name: 'ItemDescription',
|
|
89
|
+
size: '$3',
|
|
90
|
+
color: '$quiet',
|
|
91
|
+
fontWeight: '400',
|
|
92
|
+
});
|
|
93
|
+
// The line clamp shadcn ships as `line-clamp-2`. `-webkit-box` degrades to a
|
|
94
|
+
// plain paragraph on a host that ignores it, which is the correct fallback —
|
|
95
|
+
// carried as an inline style rather than a styled() variant because it is CSS
|
|
96
|
+
// with no token behind it, not a design choice a theme should be able to flip.
|
|
97
|
+
const CLAMP = {
|
|
98
|
+
display: '-webkit-box',
|
|
99
|
+
WebkitLineClamp: 2,
|
|
100
|
+
WebkitBoxOrient: 'vertical',
|
|
101
|
+
overflow: 'hidden',
|
|
102
|
+
};
|
|
103
|
+
export function ItemDescription({ style, ...props }) {
|
|
104
|
+
return (_jsx(ItemDescriptionFrame, { "data-slot": "item-description", style: { ...CLAMP, ...style }, ...props }));
|
|
105
|
+
}
|
|
106
|
+
const ItemActionsFrame = styled(XStack, {
|
|
107
|
+
name: 'ItemActions',
|
|
108
|
+
items: 'center',
|
|
109
|
+
gap: '$2',
|
|
110
|
+
});
|
|
111
|
+
export function ItemActions(props) {
|
|
112
|
+
return _jsx(ItemActionsFrame, { "data-slot": "item-actions", ...props });
|
|
113
|
+
}
|
|
114
|
+
const ItemHeaderFrame = styled(XStack, {
|
|
115
|
+
name: 'ItemHeader',
|
|
116
|
+
flexBasis: '100%',
|
|
117
|
+
items: 'center',
|
|
118
|
+
justify: 'space-between',
|
|
119
|
+
gap: '$2',
|
|
120
|
+
});
|
|
121
|
+
export function ItemHeader(props) {
|
|
122
|
+
return _jsx(ItemHeaderFrame, { "data-slot": "item-header", ...props });
|
|
123
|
+
}
|
|
124
|
+
const ItemFooterFrame = styled(XStack, {
|
|
125
|
+
name: 'ItemFooter',
|
|
126
|
+
flexBasis: '100%',
|
|
127
|
+
items: 'center',
|
|
128
|
+
justify: 'space-between',
|
|
129
|
+
gap: '$2',
|
|
130
|
+
});
|
|
131
|
+
export function ItemFooter(props) {
|
|
132
|
+
return _jsx(ItemFooterFrame, { "data-slot": "item-footer", ...props });
|
|
133
|
+
}
|
|
134
|
+
const ItemGroupFrame = styled(YStack, {
|
|
135
|
+
name: 'ItemGroup',
|
|
136
|
+
});
|
|
137
|
+
export function ItemGroup(props) {
|
|
138
|
+
return _jsx(ItemGroupFrame, { "data-slot": "item-group", role: "list", ...props });
|
|
139
|
+
}
|
|
140
|
+
export function ItemSeparator(props) {
|
|
141
|
+
return _jsx(Separator, { "data-slot": "item-separator", my: 0, ...props });
|
|
142
|
+
}
|
|
143
|
+
//# sourceMappingURL=item.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../src/backends/gui/item.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,247 @@
|
|
|
1
|
+
'use client';"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
4
|
+
if (k2 === undefined) k2 = k;
|
|
5
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
7
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
8
|
+
}
|
|
9
|
+
Object.defineProperty(o, k2, desc);
|
|
10
|
+
}) : (function(o, m, k, k2) {
|
|
11
|
+
if (k2 === undefined) k2 = k;
|
|
12
|
+
o[k2] = m[k];
|
|
13
|
+
}));
|
|
14
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
15
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
16
|
+
}) : function(o, v) {
|
|
17
|
+
o["default"] = v;
|
|
18
|
+
});
|
|
19
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
20
|
+
var ownKeys = function(o) {
|
|
21
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
22
|
+
var ar = [];
|
|
23
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
24
|
+
return ar;
|
|
25
|
+
};
|
|
26
|
+
return ownKeys(o);
|
|
27
|
+
};
|
|
28
|
+
return function (mod) {
|
|
29
|
+
if (mod && mod.__esModule) return mod;
|
|
30
|
+
var result = {};
|
|
31
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
32
|
+
__setModuleDefault(result, mod);
|
|
33
|
+
return result;
|
|
34
|
+
};
|
|
35
|
+
})();
|
|
36
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
37
|
+
exports.KanbanBoard = KanbanBoard;
|
|
38
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
39
|
+
/**
|
|
40
|
+
* Kanban — a board of columns holding draggable cards, with search, column
|
|
41
|
+
* limits, labels, priority, assignee and due date, and a create/edit dialog.
|
|
42
|
+
*
|
|
43
|
+
* The board is controlled: callers hold `KanbanBoardData` and pass it down
|
|
44
|
+
* with `onUpdateBoard`, so every mutation (drag, add, edit, delete) computes
|
|
45
|
+
* the next board and hands it back rather than mutating in place. Drag and
|
|
46
|
+
* drop is native HTML5 drag events (`draggable`, `dataTransfer`) gated by
|
|
47
|
+
* `isWeb`, the same split `dropzone.tsx` uses for file drops — there is no
|
|
48
|
+
* `@dnd-kit` in this workspace and none is needed for a same-tab reorder.
|
|
49
|
+
*/
|
|
50
|
+
const gui_1 = require("@hanzo/gui");
|
|
51
|
+
const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
|
|
52
|
+
const React = __importStar(require("react"));
|
|
53
|
+
const badge_1 = require("./badge.cjs");
|
|
54
|
+
const button_1 = require("./button.cjs");
|
|
55
|
+
const dialog_1 = require("./dialog.cjs");
|
|
56
|
+
const dropdown_menu_1 = require("./dropdown-menu.cjs");
|
|
57
|
+
const ink_1 = require("./ink.cjs");
|
|
58
|
+
const input_1 = require("./input.cjs");
|
|
59
|
+
const label_1 = require("./label.cjs");
|
|
60
|
+
const select_1 = require("./select.cjs");
|
|
61
|
+
const slot_1 = require("./slot.cjs");
|
|
62
|
+
const textarea_1 = require("./textarea.cjs");
|
|
63
|
+
const sx_1 = require("../../sx.cjs");
|
|
64
|
+
const PRIORITY_COLOR = {
|
|
65
|
+
low: '$blue9',
|
|
66
|
+
medium: '$yellow9',
|
|
67
|
+
high: '$orange9',
|
|
68
|
+
urgent: '$red9',
|
|
69
|
+
};
|
|
70
|
+
/** Move a card from its column to `toColumnId`, optionally before `beforeId`. */
|
|
71
|
+
const moveCard = (board, drag, toColumnId, beforeId) => {
|
|
72
|
+
const from = board.columns.find((col) => col.id === drag.columnId);
|
|
73
|
+
const card = from?.cards.find((c) => c.id === drag.cardId);
|
|
74
|
+
if (!from || !card)
|
|
75
|
+
return board;
|
|
76
|
+
const to = board.columns.find((col) => col.id === toColumnId);
|
|
77
|
+
if (!to)
|
|
78
|
+
return board;
|
|
79
|
+
if (from.id !== to.id && to.limit && to.cards.length >= to.limit)
|
|
80
|
+
return board;
|
|
81
|
+
return {
|
|
82
|
+
...board,
|
|
83
|
+
columns: board.columns.map((col) => {
|
|
84
|
+
if (col.id === from.id && col.id === to.id) {
|
|
85
|
+
const rest = col.cards.filter((c) => c.id !== card.id);
|
|
86
|
+
const at = beforeId ? rest.findIndex((c) => c.id === beforeId) : rest.length;
|
|
87
|
+
const index = at < 0 ? rest.length : at;
|
|
88
|
+
return { ...col, cards: [...rest.slice(0, index), card, ...rest.slice(index)] };
|
|
89
|
+
}
|
|
90
|
+
if (col.id === from.id)
|
|
91
|
+
return { ...col, cards: col.cards.filter((c) => c.id !== card.id) };
|
|
92
|
+
if (col.id === to.id) {
|
|
93
|
+
const at = beforeId ? col.cards.findIndex((c) => c.id === beforeId) : col.cards.length;
|
|
94
|
+
const index = at < 0 ? col.cards.length : at;
|
|
95
|
+
return { ...col, cards: [...col.cards.slice(0, index), card, ...col.cards.slice(index)] };
|
|
96
|
+
}
|
|
97
|
+
return col;
|
|
98
|
+
}),
|
|
99
|
+
};
|
|
100
|
+
};
|
|
101
|
+
const matches = (card, query) => {
|
|
102
|
+
const q = query.toLowerCase();
|
|
103
|
+
return (card.title.toLowerCase().includes(q) ||
|
|
104
|
+
(card.description?.toLowerCase().includes(q) ?? false) ||
|
|
105
|
+
(card.labels?.some((label) => label.name.toLowerCase().includes(q)) ?? false));
|
|
106
|
+
};
|
|
107
|
+
const BoardFrame = (0, gui_1.styled)(gui_1.YStack, { name: 'Kanban', flex: 1, height: '100%' });
|
|
108
|
+
const ColumnFrame = (0, gui_1.styled)(gui_1.YStack, {
|
|
109
|
+
name: 'KanbanColumn',
|
|
110
|
+
bg: '$raised',
|
|
111
|
+
rounded: '$4',
|
|
112
|
+
p: '$4',
|
|
113
|
+
minW: 280,
|
|
114
|
+
maxW: 280,
|
|
115
|
+
gap: '$3',
|
|
116
|
+
variants: {
|
|
117
|
+
over: { true: { borderColor: '$borderColor', borderWidth: 1 } },
|
|
118
|
+
},
|
|
119
|
+
});
|
|
120
|
+
const CardFrame = (0, gui_1.styled)(gui_1.YStack, {
|
|
121
|
+
name: 'KanbanCard',
|
|
122
|
+
bg: '$background',
|
|
123
|
+
borderWidth: 1,
|
|
124
|
+
borderColor: '$borderColor',
|
|
125
|
+
rounded: '$4',
|
|
126
|
+
p: '$3',
|
|
127
|
+
gap: '$2',
|
|
128
|
+
cursor: 'grab',
|
|
129
|
+
variants: {
|
|
130
|
+
dragging: { true: { opacity: 0.5 } },
|
|
131
|
+
},
|
|
132
|
+
});
|
|
133
|
+
function KanbanCardView({ card, drag, onDragStart, onDragEnd, onDropBefore, onEdit, onDelete, }) {
|
|
134
|
+
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
|
|
135
|
+
? {
|
|
136
|
+
draggable: true,
|
|
137
|
+
onDragStart,
|
|
138
|
+
onDragEnd,
|
|
139
|
+
onDragOver: (e) => e.preventDefault(),
|
|
140
|
+
onDrop: (e) => {
|
|
141
|
+
e.preventDefault();
|
|
142
|
+
e.stopPropagation();
|
|
143
|
+
onDropBefore(e);
|
|
144
|
+
},
|
|
145
|
+
}
|
|
146
|
+
: 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] })] }));
|
|
147
|
+
}
|
|
148
|
+
function KanbanColumnView({ column, drag, onDragStart, onDragEnd, onDropOn, onAddCard, onEditCard, onDeleteCard, }) {
|
|
149
|
+
const full = column.limit != null && column.cards.length >= column.limit;
|
|
150
|
+
return ((0, jsx_runtime_1.jsxs)(ColumnFrame, { ...(0, slot_1.slot)('kanban-column'), "data-column-id": column.id, ...(gui_1.isWeb
|
|
151
|
+
? {
|
|
152
|
+
onDragOver: (e) => e.preventDefault(),
|
|
153
|
+
onDrop: onDropOn(column.id),
|
|
154
|
+
}
|
|
155
|
+
: 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))) })] }));
|
|
156
|
+
}
|
|
157
|
+
function KanbanCardDialog({ open, onOpenChange, card, labels, onSave, }) {
|
|
158
|
+
const [title, setTitle] = React.useState(card?.title ?? '');
|
|
159
|
+
const [description, setDescription] = React.useState(card?.description ?? '');
|
|
160
|
+
const [priority, setPriority] = React.useState(card?.priority ?? 'low');
|
|
161
|
+
const [assignee, setAssignee] = React.useState(card?.assignee ?? '');
|
|
162
|
+
const [dueDate, setDueDate] = React.useState(card?.dueDate ?? '');
|
|
163
|
+
React.useEffect(() => {
|
|
164
|
+
setTitle(card?.title ?? '');
|
|
165
|
+
setDescription(card?.description ?? '');
|
|
166
|
+
setPriority(card?.priority ?? 'low');
|
|
167
|
+
setAssignee(card?.assignee ?? '');
|
|
168
|
+
setDueDate(card?.dueDate ?? '');
|
|
169
|
+
}, [card, open]);
|
|
170
|
+
const submit = (e) => {
|
|
171
|
+
e.preventDefault();
|
|
172
|
+
if (!title.trim())
|
|
173
|
+
return;
|
|
174
|
+
onSave({ title, description, priority, assignee, dueDate, labels: card?.labels });
|
|
175
|
+
onOpenChange(false);
|
|
176
|
+
};
|
|
177
|
+
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"] })] })] })] }) }));
|
|
178
|
+
}
|
|
179
|
+
function KanbanBoard({ board, onUpdateBoard, className }) {
|
|
180
|
+
const [query, setQuery] = React.useState('');
|
|
181
|
+
const [drag, setDrag] = React.useState(null);
|
|
182
|
+
const [dialogOpen, setDialogOpen] = React.useState(false);
|
|
183
|
+
const [editingCard, setEditingCard] = React.useState(undefined);
|
|
184
|
+
const [targetColumnId, setTargetColumnId] = React.useState('');
|
|
185
|
+
const shown = React.useMemo(() => query.trim()
|
|
186
|
+
? { ...board, columns: board.columns.map((col) => ({ ...col, cards: col.cards.filter((c) => matches(c, query)) })) }
|
|
187
|
+
: board, [board, query]);
|
|
188
|
+
const onDragStart = (card) => (e) => {
|
|
189
|
+
const columnId = board.columns.find((col) => col.cards.some((c) => c.id === card.id))?.id ?? '';
|
|
190
|
+
setDrag({ cardId: card.id, columnId });
|
|
191
|
+
e.dataTransfer.effectAllowed = 'move';
|
|
192
|
+
e.dataTransfer.setData('text/plain', card.id);
|
|
193
|
+
};
|
|
194
|
+
const onDragEnd = () => setDrag(null);
|
|
195
|
+
const onDropOn = (columnId, beforeId) => (e) => {
|
|
196
|
+
e.preventDefault();
|
|
197
|
+
if (!drag)
|
|
198
|
+
return;
|
|
199
|
+
const next = moveCard(board, drag, columnId, beforeId);
|
|
200
|
+
if (next !== board)
|
|
201
|
+
onUpdateBoard(next);
|
|
202
|
+
setDrag(null);
|
|
203
|
+
};
|
|
204
|
+
const openAdd = (columnId) => {
|
|
205
|
+
setTargetColumnId(columnId);
|
|
206
|
+
setEditingCard(undefined);
|
|
207
|
+
setDialogOpen(true);
|
|
208
|
+
};
|
|
209
|
+
const openEdit = (card) => {
|
|
210
|
+
setEditingCard(card);
|
|
211
|
+
setTargetColumnId('');
|
|
212
|
+
setDialogOpen(true);
|
|
213
|
+
};
|
|
214
|
+
const deleteCard = (cardId) => onUpdateBoard({
|
|
215
|
+
...board,
|
|
216
|
+
columns: board.columns.map((col) => ({ ...col, cards: col.cards.filter((c) => c.id !== cardId) })),
|
|
217
|
+
});
|
|
218
|
+
const saveCard = (data) => {
|
|
219
|
+
const now = new Date().toISOString();
|
|
220
|
+
if (editingCard) {
|
|
221
|
+
onUpdateBoard({
|
|
222
|
+
...board,
|
|
223
|
+
columns: board.columns.map((col) => ({
|
|
224
|
+
...col,
|
|
225
|
+
cards: col.cards.map((c) => (c.id === editingCard.id ? { ...c, ...data, updatedAt: now } : c)),
|
|
226
|
+
})),
|
|
227
|
+
});
|
|
228
|
+
return;
|
|
229
|
+
}
|
|
230
|
+
const card = {
|
|
231
|
+
id: `card-${Date.now()}`,
|
|
232
|
+
title: data.title ?? '',
|
|
233
|
+
description: data.description,
|
|
234
|
+
priority: data.priority,
|
|
235
|
+
assignee: data.assignee,
|
|
236
|
+
dueDate: data.dueDate,
|
|
237
|
+
labels: data.labels,
|
|
238
|
+
createdAt: now,
|
|
239
|
+
updatedAt: now,
|
|
240
|
+
};
|
|
241
|
+
onUpdateBoard({
|
|
242
|
+
...board,
|
|
243
|
+
columns: board.columns.map((col) => (col.id === targetColumnId ? { ...col, cards: [...col.cards, card] } : col)),
|
|
244
|
+
});
|
|
245
|
+
};
|
|
246
|
+
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 })] }));
|
|
247
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export interface KanbanLabel {
|
|
3
|
+
id: string;
|
|
4
|
+
name: string;
|
|
5
|
+
color: string;
|
|
6
|
+
}
|
|
7
|
+
export type KanbanPriority = 'low' | 'medium' | 'high' | 'urgent';
|
|
8
|
+
export interface KanbanCard {
|
|
9
|
+
id: string;
|
|
10
|
+
title: string;
|
|
11
|
+
description?: string;
|
|
12
|
+
labels?: KanbanLabel[];
|
|
13
|
+
priority?: KanbanPriority;
|
|
14
|
+
assignee?: string;
|
|
15
|
+
dueDate?: string;
|
|
16
|
+
createdAt: string;
|
|
17
|
+
updatedAt: string;
|
|
18
|
+
}
|
|
19
|
+
export interface KanbanColumn {
|
|
20
|
+
id: string;
|
|
21
|
+
title: string;
|
|
22
|
+
cards: KanbanCard[];
|
|
23
|
+
limit?: number;
|
|
24
|
+
}
|
|
25
|
+
export interface KanbanBoardData {
|
|
26
|
+
id: string;
|
|
27
|
+
title: string;
|
|
28
|
+
columns: KanbanColumn[];
|
|
29
|
+
labels: KanbanLabel[];
|
|
30
|
+
}
|
|
31
|
+
export type KanbanBoardProps = {
|
|
32
|
+
board: KanbanBoardData;
|
|
33
|
+
onUpdateBoard: (board: KanbanBoardData) => void;
|
|
34
|
+
className?: string;
|
|
35
|
+
};
|
|
36
|
+
export declare function KanbanBoard({ board, onUpdateBoard, className }: KanbanBoardProps): React.JSX.Element;
|
|
37
|
+
//# sourceMappingURL=kanban.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"kanban.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/kanban.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAoB9B,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAA;AAEjE,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,WAAW,EAAE,CAAA;IACtB,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,MAAM,EAAE,WAAW,EAAE,CAAA;CACtB;AAkVD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,eAAe,CAAA;IACtB,aAAa,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAA;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,gBAAgB,qBA4HhF"}
|