@tcn/ui 0.3.1 → 0.3.3

package/src/layouts/divider/divider.module.css

@@ -1,102 +1,104 @@
-.divider {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.divider-line {
-  background: var(--material-line, #aaa);
-  border-radius: calc(4px * var(--scalar, 1));
-}
-
-/* Emphasis */
-.divider-line[data-emphasis="strong"] {
-  background: color-mix(in srgb, #aaa, black 20%);
-}
-
-.divider-line[data-emphasis="normal"] {
-  background: #aaa;
-}
-
-.divider-line[data-emphasis="light"] {
-  background: color-mix(in srgb, #aaa, white 20%);
-}
-
-/* Horizontal Divider */
-.divider[data-orientation="horizontal"] {
-  width: 100%;
-  height: auto;
-}
-
-.divider-line[data-orientation="horizontal"] {
-  width: var(--divider-width, 100%);
-  height: calc(var(--divider-height, 1px) * var(--scalar, 1));
-}
-
-.divider-line[data-orientation="horizontal"][data-thickness="sm"] {
-  height: calc(var(--divider-height, 1px) * var(--scalar, 1));
-}
-
-.divider-line[data-orientation="horizontal"][data-thickness="md"] {
-  height: calc(var(--divider-height, 2px) * var(--scalar, 1));
-}
-
-.divider-line[data-orientation="horizontal"][data-thickness="lg"] {
-  height: calc(var(--divider-height, 3px) * var(--scalar, 1));
-}
-
-.divider-line[data-orientation="horizontal"][data-length="full"] {
-  width: var(--divider-width, 100%);
-}
-
-.divider-line[data-orientation="horizontal"][data-length="sm"] {
-  width: calc(var(--divider-width, 16px) * var(--scalar, 1));
-}
-
-.divider-line[data-orientation="horizontal"][data-length="md"] {
-  width: calc(var(--divider-width, 20px) * var(--scalar, 1));
-}
-
-.divider-line[data-orientation="horizontal"][data-length="lg"] {
-  width: calc(var(--divider-width, 24px) * var(--scalar, 1));
-}
-
-/* Vertical Divider */
-
-.divider[data-orientation="vertical"] {
-  height: 100%;
-  width: auto;
-}
-
-.divider-line[data-orientation="vertical"] {
-  width: calc(var(--divider-width, 1px) * var(--scalar, 1));
-  height: var(--divider-height, 100%);
-}
-
-.divider-line[data-orientation="vertical"][data-thickness="sm"] {
-  min-width: calc(var(--divider-width, 1px) * var(--scalar, 1));
-}
-
-.divider-line[data-orientation="vertical"][data-thickness="md"] {
-  min-width: calc(var(--divider-width, 2px) * var(--scalar, 1));
-}
-
-.divider-line[data-orientation="vertical"][data-thickness="lg"] {
-  min-width: calc(var(--divider-width, 3px) * var(--scalar, 1));
-}
-
-.divider-line[data-orientation="vertical"][data-length="full"] {
-  height: var(--divider-height, 100%);
-}
-
-.divider-line[data-orientation="vertical"][data-length="sm"] {
-  height: calc(var(--divider-height, 16px) * var(--scalar, 1));
-}
-
-.divider-line[data-orientation="vertical"][data-length="md"] {
-  height: calc(var(--divider-height, 20px) * var(--scalar, 1));
-}
-
-.divider-line[data-orientation="vertical"][data-length="lg"] {
-  height: calc(var(--divider-height, 24px) * var(--scalar, 1));
+@layer tcn-system {
+  :where(.divider) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :where(.divider-line) {
+    background: var(--material-line, #aaa);
+    border-radius: calc(4px * var(--scalar, 1));
+  }
+
+  /* Emphasis */
+  :where(.divider-line[data-emphasis="strong"]) {
+    background: color-mix(in srgb, #aaa, black 20%);
+  }
+
+  :where(.divider-line[data-emphasis="normal"]) {
+    background: #aaa;
+  }
+
+  :where(.divider-line[data-emphasis="light"]) {
+    background: color-mix(in srgb, #aaa, white 20%);
+  }
+
+  /* Horizontal Divider */
+  :where(.divider[data-orientation="horizontal"]) {
+    width: 100%;
+    height: auto;
+  }
+
+  :where(.divider-line[data-orientation="horizontal"]) {
+    width: var(--divider-width, 100%);
+    height: calc(var(--divider-height, 1px) * var(--scalar, 1));
+  }
+
+  :where(.divider-line[data-orientation="horizontal"][data-thickness="sm"]) {
+    height: calc(var(--divider-height, 1px) * var(--scalar, 1));
+  }
+
+  :where(.divider-line[data-orientation="horizontal"][data-thickness="md"]) {
+    height: calc(var(--divider-height, 2px) * var(--scalar, 1));
+  }
+
+  :where(.divider-line[data-orientation="horizontal"][data-thickness="lg"]) {
+    height: calc(var(--divider-height, 3px) * var(--scalar, 1));
+  }
+
+  :where(.divider-line[data-orientation="horizontal"][data-length="full"]) {
+    width: var(--divider-width, 100%);
+  }
+
+  :where(.divider-line[data-orientation="horizontal"][data-length="sm"]) {
+    width: calc(var(--divider-width, 16px) * var(--scalar, 1));
+  }
+
+  :where(.divider-line[data-orientation="horizontal"][data-length="md"]) {
+    width: calc(var(--divider-width, 20px) * var(--scalar, 1));
+  }
+
+  :where(.divider-line[data-orientation="horizontal"][data-length="lg"]) {
+    width: calc(var(--divider-width, 24px) * var(--scalar, 1));
+  }
+
+  /* Vertical Divider */
+
+  :where(.divider[data-orientation="vertical"]) {
+    height: 100%;
+    width: auto;
+  }
+
+  :where(.divider-line[data-orientation="vertical"]) {
+    width: calc(var(--divider-width, 1px) * var(--scalar, 1));
+    height: var(--divider-height, 100%);
+  }
+
+  :where(.divider-line[data-orientation="vertical"][data-thickness="sm"]) {
+    min-width: calc(var(--divider-width, 1px) * var(--scalar, 1));
+  }
+
+  :where(.divider-line[data-orientation="vertical"][data-thickness="md"]) {
+    min-width: calc(var(--divider-width, 2px) * var(--scalar, 1));
+  }
+
+  :where(.divider-line[data-orientation="vertical"][data-thickness="lg"]) {
+    min-width: calc(var(--divider-width, 3px) * var(--scalar, 1));
+  }
+
+  :where(.divider-line[data-orientation="vertical"][data-length="full"]) {
+    height: var(--divider-height, 100%);
+  }
+
+  :where(.divider-line[data-orientation="vertical"][data-length="sm"]) {
+    height: calc(var(--divider-height, 16px) * var(--scalar, 1));
+  }
+
+  :where(.divider-line[data-orientation="vertical"][data-length="md"]) {
+    height: calc(var(--divider-height, 20px) * var(--scalar, 1));
+  }
+
+  :where(.divider-line[data-orientation="vertical"][data-length="lg"]) {
+    height: calc(var(--divider-height, 24px) * var(--scalar, 1));
+  }
 }

package/src/layouts/divider/divider.tsx

@@ -59,7 +59,7 @@ export const Divider: React.FC<DividerProps> = ({
       data-thickness={thickness}
       data-length={length}
       data-orientation={orientation}
-      className={clsx(styles[`divider`], 'divider', 'tcn-divider', className)}
+      className={clsx(styles[`divider`], 'tcn-divider', className)}
       {...props}
     >
       <div
@@ -70,7 +70,6 @@ export const Divider: React.FC<DividerProps> = ({
         style={cssVariables}
         className={clsx(
           styles[`divider-line`],
-          'divider-line',
           'tcn-divider-line',
           'material',
           className

package/src/layouts/footer/footer.module.css

@@ -1,30 +1,33 @@
-.footer {
-  width: 100%;
-  min-height: 0;
-  padding: var(--padding) var(--padding-large);
-  gap: var(--gap);
-}
-/*
+@layer tcn-system {
+  :where(.footer) {
+    width: 100%;
+    min-height: 0;
+    padding: var(--padding) var(--padding-large);
+    gap: var(--gap);
+  }
+
+  /*
   Kinds:
  'default' | 'app' | 'nav' | 'toolbar' | 'window' | 'status';
 */
 
-.footer[data-kind="app"] {
-  position: relative;
-}
+  :where(.footer[data-kind="app"]) {
+    position: relative;
+  }
 
-.footer[data-kind="nav"] {
-  position: relative;
-}
+  :where(.footer[data-kind="nav"]) {
+    position: relative;
+  }
 
-.footer[data-kind="toolbar"] {
-  position: relative;
-}
+  :where(.footer[data-kind="toolbar"]) {
+    position: relative;
+  }
 
-.footer[data-kind="window"] {
-  position: relative;
-}
+  :where(.footer[data-kind="window"]) {
+    position: relative;
+  }
 
-.footer[data-kind="status"] {
-  position: relative;
+  :where(.footer[data-kind="status"]) {
+    position: relative;
+  }
 }

package/src/layouts/grid/grid.module.css

@@ -1,22 +1,24 @@
-.grid {
-  display: inline-grid;
-  grid-auto-flow: row;
-  height: auto;
-  grid-template-columns: var(--template);
-  width: 100%;
-  max-width: var(--max-width);
-  grid-auto-rows: var(--item-height);
-  justify-items: center;
-}
+@layer tcn-system {
+  :where(.grid) {
+    display: inline-grid;
+    grid-auto-flow: row;
+    height: auto;
+    grid-template-columns: var(--template);
+    width: 100%;
+    max-width: var(--max-width);
+    grid-auto-rows: var(--item-height);
+    justify-items: center;
+  }
 
-:global([data-h-alignment="center"]) > .grid {
-  justify-content: center;
-}
+  :where(:global([data-h-alignment="center"]) > .grid) {
+    justify-content: center;
+  }
 
-:global([data-h-alignment="end"]) > .grid {
-  justify-content: end;
-}
+  :where(:global([data-h-alignment="end"]) > .grid) {
+    justify-content: end;
+  }
 
-:global([data-h-alignment="start"]) > .grid {
-  justify-content: start;
+  :where(:global([data-h-alignment="start"]) > .grid) {
+    justify-content: start;
+  }
 }

package/src/layouts/grid/grid.tsx

@@ -108,7 +108,12 @@ export const Grid = React.forwardRef(function Grid(
   });
 
   return (
-    <As ref={ref} className={clsx(styles.grid, className)} style={gridStyles} {...attr}>
+    <As
+      ref={ref}
+      className={clsx(styles.grid, className, 'tcn-grid')}
+      style={gridStyles}
+      {...attr}
+    >
       {children}
     </As>
   );

package/src/layouts/header/header.module.css

@@ -1,6 +1,8 @@
-.header {
-  width: 100%;
-  min-height: 0;
-  padding: var(--padding) var(--padding-large);
-  gap: var(--gap);
+@layer tcn-system {
+  :where(.header) {
+    width: 100%;
+    min-height: 0;
+    padding: var(--padding) var(--padding-large);
+    gap: var(--gap);
+  }
 }

package/src/layouts/header/header.tsx

@@ -24,7 +24,7 @@ export const Header = React.forwardRef<HTMLElement, HeaderProps>(function Header
     <HStack
       ref={ref}
       as="header"
-      className={clsx(styles.header, className, 'tcn-header', 'header')}
+      className={clsx(styles.header, className, 'tcn-header')}
       data-hierarchy={hierarchy}
       data-size={size}
       height={height}

package/src/layouts/list/section_header.module.css

@@ -1,18 +1,20 @@
-.section-header {
-  position: sticky;
-  top: 0;
-  left: 0;
-  z-index: 1;
-}
+@layer tcn-system {
+  :where(.section-header) {
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
 
-.section-header[data-hierarchy="primary"] {
-  background-color: #f1f1f1;
-}
+  :where(.section-header[data-hierarchy="primary"]) {
+    background-color: #f1f1f1;
+  }
 
-.section-header[data-hierarchy="secondary"] {
-  background-color: #f1f1f1;
-}
+  :where(.section-header[data-hierarchy="secondary"]) {
+    background-color: #f1f1f1;
+  }
 
-.section-header[data-hierarchy="tertiary"] {
-  background-color: #f1f1f1;
+  :where(.section-header[data-hierarchy="tertiary"]) {
+    background-color: #f1f1f1;
+  }
 }

package/src/layouts/list/section_header.tsx

@@ -1,13 +1,19 @@
 import React from 'react';
 import { HStack } from '../../stacks/h_stack.js';
 import type { HStackProps } from '../../stacks/h_stack.js';
+import clsx from 'clsx';
 
 export interface SectionHeaderProps extends Omit<HStackProps, 'as'> {}
 
 export const SectionHeader = React.forwardRef<HTMLDivElement, SectionHeaderProps>(
   function SectionHeader({ children, className, ...props }: SectionHeaderProps, ref) {
     return (
-      <HStack ref={ref} as="li" className={className} {...props}>
+      <HStack
+        ref={ref}
+        as="li"
+        className={clsx(className, 'tcn-section-header')}
+        {...props}
+      >
         {children}
       </HStack>
     );

package/src/layouts/scaffold/scaffold.module.css

@@ -1,5 +1,7 @@
-.scaffold-stack {
-  width: 100%;
-  height: 100%;
-  overflow: auto;
+@layer tcn-system {
+  :where(.scaffold-stack) {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+  }
 }

package/src/layouts/sidebar_end/sidebar_end.module.css

@@ -1,31 +1,33 @@
-.sidebarEndBox {
-  width: 250px;
-  height: 100%;
-  z-index: 2;
-}
+@layer tcn-system {
+  :where(.sidebarEndBox) {
+    width: 250px;
+    height: 100%;
+    z-index: 2;
+  }
 
-.sidebarEnd {
-  width: 100%;
-  height: 100%;
-}
+  :where(.sidebarEnd) {
+    width: 100%;
+    height: 100%;
+  }
 
-/* Primary hierarchy - main sidebar end */
-.sidebarEnd[data-hierarchy="primary"] {
-  background: #ffffff;
-  border-left: 1px solid #e0e0e0;
-  padding: 16px;
-}
+  /* Primary hierarchy - main sidebar end */
+  :where(.sidebarEnd[data-hierarchy="primary"]) {
+    background: #ffffff;
+    border-left: 1px solid #e0e0e0;
+    padding: 16px;
+  }
 
-/* Secondary hierarchy - sub sidebar end */
-.sidebarEnd[data-hierarchy="secondary"] {
-  background: #f8f9fa;
-  border-left: 1px solid #e9ecef;
-  padding: 12px;
-}
+  /* Secondary hierarchy - sub sidebar end */
+  :where(.sidebarEnd[data-hierarchy="secondary"]) {
+    background: #f8f9fa;
+    border-left: 1px solid #e9ecef;
+    padding: 12px;
+  }
 
-/* Tertiary hierarchy - minor sidebar end */
-.sidebarEnd[data-hierarchy="tertiary"] {
-  background: #f1f3f4;
-  border-left: 1px solid #dee2e6;
-  padding: 8px;
+  /* Tertiary hierarchy - minor sidebar end */
+  :where(.sidebarEnd[data-hierarchy="tertiary"]) {
+    background: #f1f3f4;
+    border-left: 1px solid #dee2e6;
+    padding: 8px;
+  }
 }

package/src/layouts/sidebar_end/sidebar_end.tsx

@@ -38,7 +38,7 @@ export const SidebarEnd = React.forwardRef<HTMLElement, SidebarEndProps>(
         maxWidth={maxWidth}
         minHeight={minHeight}
         maxHeight={maxHeight}
-        className={styles.sidebarEndBox}
+        className={clsx(styles.sidebarEndBox, 'tcn-sidebar-end-container')}
         as={'section'}
         {...props}
       >
@@ -53,7 +53,7 @@ export const SidebarEnd = React.forwardRef<HTMLElement, SidebarEndProps>(
           vAlign={vAlign}
           ref={ref}
           data-hierarchy={hierarchy}
-          className={clsx(styles.sidebarEnd, className, 'sidebar-end')}
+          className={clsx(styles.sidebarEnd, className, 'tcn-sidebar-end')}
           zIndex={0}
         >
           {children}

package/src/layouts/sidebar_start/sidebar_start.module.css

@@ -1,31 +1,33 @@
-.sidebarStartBox {
-  width: 250px;
-  height: 100%;
-  z-index: 2;
-}
+@layer tcn-system {
+  :where(.sidebarStartBox) {
+    width: 250px;
+    height: 100%;
+    z-index: 2;
+  }
 
-.sidebarStart {
-  width: 100%;
-  height: 100%;
-}
+  :where(.sidebarStart) {
+    width: 100%;
+    height: 100%;
+  }
 
-/* Primary hierarchy - main sidebar start */
-.sidebarStart[data-hierarchy="primary"] {
-  background: #ffffff;
-  border-right: 1px solid #e0e0e0;
-  padding: 16px;
-}
+  /* Primary hierarchy - main sidebar start */
+  :where(.sidebarStart[data-hierarchy="primary"]) {
+    background: #ffffff;
+    border-right: 1px solid #e0e0e0;
+    padding: 16px;
+  }
 
-/* Secondary hierarchy - sub sidebar start */
-.sidebarStart[data-hierarchy="secondary"] {
-  background: #f8f9fa;
-  border-right: 1px solid #e9ecef;
-  padding: 12px;
-}
+  /* Secondary hierarchy - sub sidebar start */
+  :where(.sidebarStart[data-hierarchy="secondary"]) {
+    background: #f8f9fa;
+    border-right: 1px solid #e9ecef;
+    padding: 12px;
+  }
 
-/* Tertiary hierarchy - minor sidebar start */
-.sidebarStart[data-hierarchy="tertiary"] {
-  background: #f1f3f4;
-  border-right: 1px solid #dee2e6;
-  padding: 8px;
+  /* Tertiary hierarchy - minor sidebar start */
+  :where(.sidebarStart[data-hierarchy="tertiary"]) {
+    background: #f1f3f4;
+    border-right: 1px solid #dee2e6;
+    padding: 8px;
+  }
 }

package/src/layouts/sidebar_start/sidebar_start.tsx

@@ -38,7 +38,7 @@ export const SidebarStart = React.forwardRef<HTMLElement, SidebarStartProps>(
         maxWidth={maxWidth}
         minHeight={minHeight}
         maxHeight={maxHeight}
-        className={styles.sidebarStartBox}
+        className={clsx(styles.sidebarStartBox, 'tcn-sidebar-start-container')}
         {...props}
       >
         <VStack
@@ -50,7 +50,7 @@ export const SidebarStart = React.forwardRef<HTMLElement, SidebarStartProps>(
           vAlign={vAlign}
           ref={ref}
           data-hierarchy={hierarchy}
-          className={clsx(styles.sidebarStart, className, 'sidebar-start')}
+          className={clsx(styles.sidebarStart, className, 'tcn-sidebar-start')}
           zIndex={0}
         >
           {children}

package/src/layouts/utility_bar/utility_bar.module.css

@@ -1,4 +1,6 @@
-.utility-bar {
-  width: 100%;
-  min-height: 0;
+@layer tcn-system {
+  :where(.utility-bar) {
+    width: 100%;
+    min-height: 0;
+  }
 }

package/src/layouts/utility_bar/utility_bar.tsx

@@ -26,12 +26,7 @@ export const UtilityBar = React.forwardRef<HTMLElement, UtilityBarProps>(
       <HStack
         ref={ref}
         as="header"
-        className={clsx(
-          styles['utility-bar'],
-          className,
-          'utility-bar',
-          'tcn-utility-bar'
-        )}
+        className={clsx(styles['utility-bar'], className, 'tcn-utility-bar')}
         data-hierarchy={hierarchy}
         data-size={size}
         height={height}

package/src/navigation/index.ts

@@ -0,0 +1,18 @@
+// Stateful Components
+export { Tabs, useTabs, type TabsProps, type TabsState } from './tabs/state/context.js';
+export {
+  TabLink,
+  type TabLinkProps,
+  type TabLinkOwnProps,
+} from './tabs/state/link/tab_link.js';
+export { Tab, type TabProps } from './tabs/state/tab.js';
+export { TabsNavbar, type TabsNavbarProps } from './tabs/state/nav_bar.js';
+
+// Primitive Components
+export { TabsBar, type TabsBarProps } from './tabs/primitives/tabs_bar.js';
+export {
+  TabsList,
+  TabItem,
+  type TabsListProps,
+  type TabItemProps,
+} from './tabs/primitives/tabs_list.js';