@oomol-lab/open-flow 0.1.0-beta.58 → 0.1.0-beta.59

package/dist/browser/ui.css

@@ -3401,6 +3401,60 @@
     background-color: #0000;
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-data-\[variant\=navigation\]\/tabs-list\:h-auto:is(:where(.group\/tabs-list)[data-variant="navigation"] *) {
+    height: auto;
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-data-\[variant\=navigation\]\/tabs-list\:flex-none:is(:where(.group\/tabs-list)[data-variant="navigation"] *) {
+    flex: none;
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-data-\[variant\=navigation\]\/tabs-list\:rounded-\[6px\]:is(:where(.group\/tabs-list)[data-variant="navigation"] *) {
+    border-radius: 6px;
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-data-\[variant\=navigation\]\/tabs-list\:border-0:is(:where(.group\/tabs-list)[data-variant="navigation"] *) {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-data-\[variant\=navigation\]\/tabs-list\:px-3:is(:where(.group\/tabs-list)[data-variant="navigation"] *) {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-data-\[variant\=navigation\]\/tabs-list\:py-2:is(:where(.group\/tabs-list)[data-variant="navigation"] *) {
+    padding-block: calc(var(--spacing) * 2);
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-data-\[variant\=navigation\]\/tabs-list\:text-\[13px\]:is(:where(.group\/tabs-list)[data-variant="navigation"] *) {
+    font-size: 13px;
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-data-\[variant\=navigation\]\/tabs-list\:font-normal:is(:where(.group\/tabs-list)[data-variant="navigation"] *) {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-data-\[variant\=navigation\]\/tabs-list\:text-muted-foreground:is(:where(.group\/tabs-list)[data-variant="navigation"] *) {
+    color: var(--ui-muted-foreground);
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-data-\[variant\=navigation\]\/tabs-list\:group-data-\[size\=sm\]\/tabs-list\:rounded-\[4px\]:is(:where(.group\/tabs-list)[data-variant="navigation"] *):is(:where(.group\/tabs-list)[data-size="sm"] *) {
+    border-radius: 4px;
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-data-\[variant\=navigation\]\/tabs-list\:group-data-\[size\=sm\]\/tabs-list\:px-2:is(:where(.group\/tabs-list)[data-variant="navigation"] *):is(:where(.group\/tabs-list)[data-size="sm"] *) {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-data-\[variant\=navigation\]\/tabs-list\:group-data-\[size\=sm\]\/tabs-list\:py-1:is(:where(.group\/tabs-list)[data-variant="navigation"] *):is(:where(.group\/tabs-list)[data-size="sm"] *) {
+    padding-block: var(--spacing);
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-data-\[variant\=navigation\]\/tabs-list\:group-data-\[size\=sm\]\/tabs-list\:text-\[12px\]:is(:where(.group\/tabs-list)[data-variant="navigation"] *):is(:where(.group\/tabs-list)[data-size="sm"] *) {
+    font-size: 12px;
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled ~ *) {
     cursor: not-allowed;
   }
@@ -3721,6 +3775,14 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
 
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-data-\[variant\=navigation\]\/tabs-list\:hover\:bg-muted:is(:where(.group\/tabs-list)[data-variant="navigation"] *):hover {
+      background-color: var(--ui-muted);
+    }
+
+    :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-data-\[variant\=navigation\]\/tabs-list\:hover\:text-foreground:is(:where(.group\/tabs-list)[data-variant="navigation"] *):hover {
+      color: var(--ui-foreground);
+    }
+
     :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .hover\:placeholder\:opacity-50:hover::placeholder {
       opacity: .5;
     }
@@ -4264,6 +4326,19 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-data-\[variant\=navigation\]\/tabs-list\:data-active\:bg-muted:is(:where(.group\/tabs-list)[data-variant="navigation"] *)[data-active] {
+    background-color: var(--ui-muted);
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-data-\[variant\=navigation\]\/tabs-list\:data-active\:font-semibold:is(:where(.group\/tabs-list)[data-variant="navigation"] *)[data-active] {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-data-\[variant\=navigation\]\/tabs-list\:data-active\:text-foreground:is(:where(.group\/tabs-list)[data-variant="navigation"] *)[data-active] {
+    color: var(--ui-foreground);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-data-\[variant\=line\]\/tabs-list\:data-active\:after\:opacity-100:is(:where(.group\/tabs-list)[data-variant="line"] *)[data-active]:after {
     content: var(--tw-content);
     opacity: 1;
@@ -4806,6 +4881,14 @@
     border-radius: 0;
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .data-\[variant\=navigation\]\:p-0[data-variant="navigation"] {
+    padding: 0;
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .group-data-\[orientation\=horizontal\]\/tabs\:data-\[variant\=navigation\]\:h-auto:is(:where(.group\/tabs)[data-orientation="horizontal"] *)[data-variant="navigation"] {
+    height: auto;
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .data-\[variant\=outline\]\:bg-background[data-variant="outline"] {
     background-color: var(--ui-background);
   }
@@ -5240,6 +5323,14 @@
     background-color: #0000;
   }
 
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:group-data-\[variant\=navigation\]\/tabs-list\:data-active\:bg-muted:where([data-theme="dark"], [data-theme="dark"] *):is(:where(.group\/tabs-list)[data-variant="navigation"] *)[data-active] {
+    background-color: var(--ui-muted);
+  }
+
+  :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:group-data-\[variant\=navigation\]\/tabs-list\:data-active\:text-foreground:where([data-theme="dark"], [data-theme="dark"] *):is(:where(.group\/tabs-list)[data-variant="navigation"] *)[data-active] {
+    color: var(--ui-foreground);
+  }
+
   :where(.open-flow-theme, .open-flow-workbench, .open-flow-canvas-root) .dark\:data-checked\:bg-primary-foreground:where([data-theme="dark"], [data-theme="dark"] *)[data-checked] {
     background-color: var(--ui-primary-foreground);
   }

package/dist/browser/ui.d.ts

@@ -30,6 +30,23 @@ export declare const DialogHeader: ComponentType<ComponentPropsWithoutRef<'div'>
 export declare const DialogFooter: ComponentType<ComponentPropsWithoutRef<'div'>>;
 export declare const DialogTitle: ComponentType<ComponentPropsWithoutRef<'h2'>>;
 export declare const DialogDescription: ComponentType<ComponentPropsWithoutRef<'p'>>;
+/** Host tabs reuse the product's keyboard navigation and panel semantics. */
+export interface TabsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'defaultValue'> {
+    readonly defaultValue?: string;
+    readonly value?: string;
+    readonly onValueChange?: (value: string) => void;
+}
+export declare const Tabs: ComponentType<TabsProps>;
+export declare const TabsList: ComponentType<ComponentPropsWithoutRef<'div'> & {
+    readonly variant?: 'default' | 'line' | 'flat' | 'navigation';
+    readonly size?: 'default' | 'sm';
+}>;
+export declare const TabsTrigger: ComponentType<Omit<ComponentPropsWithoutRef<'button'>, 'value'> & {
+    readonly value: string;
+}>;
+export declare const TabsContent: ComponentType<ComponentPropsWithoutRef<'div'> & {
+    readonly value: string;
+}>;
 export { Input } from './ui-input.js';
 export declare const InputGroup: ComponentType<ComponentPropsWithoutRef<'div'>>;
 export declare const InputGroupAddon: ComponentType<ComponentPropsWithoutRef<'div'> & {