@tcn/ui 0.3.2 → 0.4.0

package/src/themes/themes/ergo/ergo_theme.ts

@@ -1,4 +1,5 @@
 import css from './ergo_theme.css?raw';
+import '@fontsource/lato';
 
 export const ergoStyleSheet = new CSSStyleSheet();
 ergoStyleSheet.replaceSync(css);

package/src/themes/themes/windows_98/windows_98.css

@@ -36,10 +36,6 @@
     --quaternary-color: #000080;
     --quaternary-color-strong: #000080;
 
-    --font-color: #222222;
-    --font-family: "Pixelated MS Sans Serif", Arial;
-    --font-size: 12px;
-
     --background-color-primary: #c0c0c0;
     --background-color-secondary: #c0c0c0;
     --background-color-tertiary: #c0c0c0;
@@ -51,6 +47,16 @@
     --foreground-color-quaternary: #222222;
 
     --accent-color: #000080;
+
+    --font-color: #222222;
+    --font-family: "Microsoft Sans Serif", "Arial", sans-serif;
+    --font-size: 12px;
+  }
+
+  .tcn-theme-root {
+    font-family: var(--font-family);
+    color: var(--font-color);
+    -webkit-font-smoothing: none;
   }
 
   /* ===== TYPOGRAPHY ===== */
@@ -82,6 +88,7 @@
 
   /* ===== BUTTONS ===== */
   /* Base button styles */
+  .tcn-base-button,
   .tcn-button,
   .tcn-button[data-hierarchy="primary"],
   .tcn-button[data-hierarchy="secondary"],
@@ -1028,4 +1035,142 @@
     border-right: 1px solid #f5f5f5;
     border-left: 1px solid #808080;
   }
+
+  /* ===== SECTIONS ===== */
+
+  .tcn-section {
+    background: silver;
+    gap: 0px;
+    font-size: 12px;
+  }
+
+  .tcn-heading {
+    background: silver;
+    padding-inline-start: 8px;
+    height: 23px;
+    z-index: 5;
+    box-shadow:
+      inset -1px -1px #0a0a0a,
+      inset 1px 1px #fff,
+      inset -2px -2px grey,
+      inset 2px 2px #c0c0c0;
+  }
+
+  .tcn-section > .tcn-heading {
+    top: 0;
+    padding-inline-start: 8px;
+    z-index: 4;
+  }
+
+  .tcn-section > .tcn-section > .tcn-heading {
+    top: 23px;
+    padding-inline-start: 12px;
+    z-index: 3;
+  }
+
+  .tcn-section > .tcn-section > .tcn-section > .tcn-heading {
+    top: 46px;
+    padding-inline-start: 16px;
+    z-index: 2;
+  }
+
+  .tcn-section > .tcn-section > .tcn-section > .tcn-section .tcn-heading {
+    top: 69px;
+    padding-inline-start: 20px;
+    z-index: 1;
+  }
+
+  .tcn-section > :not(.tcn-heading, .tcn-section) {
+    padding-inline-start: 8px;
+  }
+
+  .tcn-section > .tcn-section > :not(.tcn-heading, .tcn-section) {
+    padding-inline-start: 12px;
+  }
+
+  .tcn-section > .tcn-section > .tcn-section > :not(.tcn-heading, .tcn-section) {
+    padding-inline-start: 16px;
+  }
+
+  .tcn-section
+    > .tcn-section
+    > .tcn-section
+    > .tcn-section
+    > :not(.tcn-heading, .tcn-section) {
+    padding-inline-start: 20px;
+  }
+
+  .tcn-section > .tcn-row {
+    background: #fff;
+    padding: 4px;
+    font-size: 12px;
+    gap: 4px;
+  }
+
+  .tcn-base-carrot {
+    --carrot-size: 12px;
+    --carrot-triangle-height: calc(var(--carrot-size) / 2);
+    --carrot-triangle-width: var(--carrot-size);
+    --carrot-triangle-base: var(--carrot-triangle-height) solid transparent;
+    --carrot-triangle-peak: var(--carrot-triangle-width) solid #000;
+
+    width: 0;
+    height: 0;
+    flex-grow: 0;
+    display: inline-block;
+
+    &[data-direction="top"] {
+      border-bottom: var(--carrot-triangle-peak);
+      border-left: var(--carrot-triangle-base);
+      border-right: var(--carrot-triangle-base);
+    }
+
+    &[data-direction="bottom"] {
+      border-top: var(--carrot-triangle-peak);
+      border-left: var(--carrot-triangle-base);
+      border-right: var(--carrot-triangle-base);
+    }
+
+    &[data-direction="start"] {
+      border-right: var(--carrot-triangle-peak);
+      border-top: var(--carrot-triangle-base);
+      border-bottom: var(--carrot-triangle-base);
+    }
+
+    &[data-direction="end"] {
+      border-left: var(--carrot-triangle-peak);
+      border-top: var(--carrot-triangle-base);
+      border-bottom: var(--carrot-triangle-base);
+    }
+  }
+}
+
+/* ===== TABS ===== */
+
+.tcn-tabs-list {
+  display: flex;
+  list-style-type: none;
+  margin: 0 0 -2px;
+  padding-left: 3px;
+  position: relative;
+  text-indent: 0;
+
+  .tcn-tab-item {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    box-shadow:
+      inset -1px 0 #0a0a0a,
+      inset 1px 1px #dfdfdf,
+      inset -2px 0 grey,
+      inset 2px 2px #fff;
+  }
+
+  .tcn-tab-item[data-is-selected="true"] {
+    background-color: silver;
+    margin-left: -3px;
+    margin-top: -2px;
+    padding-bottom: 2px;
+    position: relative;
+    z-index: 8;
+  }
 }

package/src/tokens/index.ts

@@ -1,3 +1,5 @@
 export * from './chip/chip.js';
 export * from './badge/badge.js';
 export * from './bubble/bubble.js';
+export * from './key/key.js';
+export * from './value/value.js';

package/src/tokens/key/key.tsx

@@ -0,0 +1,10 @@
+import clsx from 'clsx';
+import { HStack, HStackProps } from '../../stacks/h_stack.js';
+
+export const Key = ({ children, className, hAlign = 'start', ...props }: HStackProps) => {
+  return (
+    <HStack className={clsx(className, 'tcn-key')} hAlign={hAlign} {...props}>
+      {children}
+    </HStack>
+  );
+};

package/src/tokens/value/value.tsx

@@ -0,0 +1,10 @@
+import clsx from 'clsx';
+import { HStack, HStackProps } from '../../stacks/h_stack.js';
+
+export const Value = ({ children, className, hAlign = 'end', ...props }: HStackProps) => {
+  return (
+    <HStack className={clsx(className, 'tcn-value')} hAlign={hAlign} {...props}>
+      {children}
+    </HStack>
+  );
+};

package/src/utils/css_utils.ts

@@ -0,0 +1,64 @@
+import type { Rectangle } from './types/dimensions.js';
+import { useLayoutEffect, useRef, useState } from 'react';
+
+export const convertRectangleToCssVariables = (
+  componentName: string,
+  stateName: string,
+  rectangle?: Rectangle | null
+) => {
+  if (!rectangle) {
+    return {};
+  }
+  const prefix = `--${componentName}-${stateName}-rectangle-`;
+  return {
+    [`${prefix}position-x`]: rectangle.position.x + 'px',
+    [`${prefix}position-y`]: rectangle.position.y + 'px',
+    [`${prefix}width`]: rectangle.dimensions.width + 'px',
+    [`${prefix}height`]: rectangle.dimensions.height + 'px',
+  };
+};
+
+function getElementRect(element: HTMLElement | null): Rectangle | null {
+  if (!element) return null;
+
+  return {
+    dimensions: {
+      width: element.offsetWidth,
+      height: element.offsetHeight,
+    },
+    position: {
+      x: element.offsetLeft,
+      y: element.offsetTop,
+    },
+  };
+}
+
+export function useTrackActiveItemRectangle(isActive: boolean) {
+  const ref = useRef<HTMLElement>(null);
+  const [rectangle, setRectangle] = useState<Rectangle | null>(null);
+
+  useLayoutEffect(() => {
+    const element = ref.current;
+    if (!element) return;
+
+    const update = () => {
+      const rect = getElementRect(element);
+      if (isActive && rect) {
+        setRectangle(rect);
+      }
+    };
+
+    update();
+
+    const resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(element);
+    window.addEventListener('resize', update);
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener('resize', update);
+    };
+  }, [isActive]);
+
+  return { ref, rectangle };
+}

package/tsconfig.json

@@ -12,6 +12,9 @@
       "~icons/*": [
         "../icons/src/*"
       ],
+      "~resource-store/*": [
+        "../resource-store/src/*"
+      ],
       "~sb-blackcat-addon/*": [
         "../sb-blackcat-addon/src/*"
       ],
@@ -20,6 +23,9 @@
       ],
       "~ui/*": [
         "./src/*"
+      ],
+      "~ui-table/*": [
+        "../ui-table/src/*"
       ]
     }
   },