@tcn/ui 0.3.1 → 0.3.3

package/src/inputs/date_picker/date_picker_year_input.module.css

@@ -1,49 +1,51 @@
-.year-select {
-  /* Base select styles */
-  position: relative;
-  box-sizing: border-box;
-  padding-inline-end: calc(
-    24px *
-    var(--scalar, 1)
-  ); /* Add padding to prevent text overlap with chevron */
-}
+@layer tcn-system {
+  :where(.year-select) {
+    /* Base select styles */
+    position: relative;
+    box-sizing: border-box;
+    padding-inline-end: calc(
+      24px *
+      var(--scalar, 1)
+    ); /* Add padding to prevent text overlap with chevron */
+  }
 
-.year-select:focus {
-  outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
-}
+  :where(.year-select:focus) {
+    outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
+  }
 
-.year-select:dir(ltr)::after {
-  content: "";
-  position: absolute;
-  right: calc(4px * var(--scalar, 1));
-  top: 50%;
-  transform: translateY(-50%);
-  width: calc(18px * var(--scalar, 1));
-  height: calc(18px * var(--scalar, 1));
-  background-color: currentColor;
-  mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 8.46967C5.76256 8.17678 6.23744 8.17678 6.53033 8.46967L12 13.9393L17.4697 8.46967C17.7626 8.17678 18.2374 8.17678 18.5303 8.46967C18.8232 8.76256 18.8232 9.23744 18.5303 9.53033L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L5.46967 9.53033C5.17678 9.23744 5.17678 8.76256 5.46967 8.46967Z'%3E%3C/path%3E%3C/svg%3E");
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: contain;
-  pointer-events: none; /* Ensure the chevron doesn't interfere with button clicks */
-}
+  :where(.year-select:dir(ltr)::after) {
+    content: "";
+    position: absolute;
+    right: calc(4px * var(--scalar, 1));
+    top: 50%;
+    transform: translateY(-50%);
+    width: calc(18px * var(--scalar, 1));
+    height: calc(18px * var(--scalar, 1));
+    background-color: currentColor;
+    mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 8.46967C5.76256 8.17678 6.23744 8.17678 6.53033 8.46967L12 13.9393L17.4697 8.46967C17.7626 8.17678 18.2374 8.17678 18.5303 8.46967C18.8232 8.76256 18.8232 9.23744 18.5303 9.53033L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L5.46967 9.53033C5.17678 9.23744 5.17678 8.76256 5.46967 8.46967Z'%3E%3C/path%3E%3C/svg%3E");
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+    pointer-events: none; /* Ensure the chevron doesn't interfere with button clicks */
+  }
 
-.year-select:dir(rtl)::after {
-  content: "";
-  position: absolute;
-  left: calc(4px * var(--scalar, 1));
-  top: 50%;
-  transform: translateY(-50%);
-  width: calc(18px * var(--scalar, 1));
-  height: calc(18px * var(--scalar, 1));
-  background-color: currentColor;
-  mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 8.46967C5.76256 8.17678 6.23744 8.17678 6.53033 8.46967L12 13.9393L17.4697 8.46967C17.7626 8.17678 18.2374 8.17678 18.5303 8.46967C18.8232 8.76256 18.8232 9.23744 18.5303 9.53033L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L5.46967 9.53033C5.17678 9.23744 5.17678 8.76256 5.46967 8.46967Z'%3E%3C/path%3E%3C/svg%3E");
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: contain;
-  pointer-events: none; /* Ensure the chevron doesn't interfere with button clicks */
-}
+  :where(.year-select:dir(rtl)::after) {
+    content: "";
+    position: absolute;
+    left: calc(4px * var(--scalar, 1));
+    top: 50%;
+    transform: translateY(-50%);
+    width: calc(18px * var(--scalar, 1));
+    height: calc(18px * var(--scalar, 1));
+    background-color: currentColor;
+    mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.46967 8.46967C5.76256 8.17678 6.23744 8.17678 6.53033 8.46967L12 13.9393L17.4697 8.46967C17.7626 8.17678 18.2374 8.17678 18.5303 8.46967C18.8232 8.76256 18.8232 9.23744 18.5303 9.53033L12.5303 15.5303C12.2374 15.8232 11.7626 15.8232 11.4697 15.5303L5.46967 9.53033C5.17678 9.23744 5.17678 8.76256 5.46967 8.46967Z'%3E%3C/path%3E%3C/svg%3E");
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+    pointer-events: none; /* Ensure the chevron doesn't interfere with button clicks */
+  }
 
-.year-select:hover::after {
-  background-color: currentColor;
+  :where(.year-select:hover::after) {
+    background-color: currentColor;
+  }
 }

package/src/inputs/date_picker/date_picker_year_input.tsx

@@ -29,7 +29,7 @@ export function DatePickerYearInput({ presenter }: DatePickerYearInputProps) {
     <>
       <Button
         hierarchy="tertiary"
-        className={clsx('date-picker-year-select', styles['year-select'])}
+        className={clsx('tcn-date-picker-year-select', styles['year-select'])}
         width="auto"
         hAlign="start"
         onClick={open}

package/src/inputs/date_picker/date_picker_year_selector.module.css

@@ -1,51 +1,53 @@
-.date-picker-year-selector {
-  background-color: #fff;
-  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-  outline: none;
-}
+@layer tcn-system {
+  :where(.date-picker-year-selector) {
+    background-color: #fff;
+    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    outline: none;
+  }
 
-.date-picker-year-button {
-  padding: 4px 8px;
-  border: 2px solid transparent;
-  border-radius: 4px;
-  cursor: pointer;
-  background-color: transparent;
-  color: var(--font-color);
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  outline: none;
-}
+  :where(.date-picker-year-button) {
+    padding: 4px 8px;
+    border: 2px solid transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    background-color: transparent;
+    color: var(--font-color);
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    outline: none;
+  }
 
-.date-picker-year-button:hover,
-.date-picker-year-button:focus,
-.date-picker-year-button[data-is-today]:hover,
-.date-picker-year-button[data-is-today]:focus {
-  border: 2px dotted var(--accent-color);
-  outline: none;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-}
+  :where(.date-picker-year-button:hover),
+  :where(.date-picker-year-button:focus),
+  :where(.date-picker-year-button[data-is-today]:hover),
+  :where(.date-picker-year-button[data-is-today]:focus) {
+    border: 2px dotted var(--accent-color);
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+  }
 
-.date-picker-year-button[data-is-selected="true"] {
-  border: 2px solid var(--accent-color);
-  background-color: var(--accent-color);
-  color: #fff;
-  box-shadow: 0 0px 4px rgba(0, 0, 0, 0.35);
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-}
+  :where(.date-picker-year-button[data-is-selected="true"]) {
+    border: 2px solid var(--accent-color);
+    background-color: var(--accent-color);
+    color: #fff;
+    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.35);
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+  }
 
-.date-picker-year-button[data-is-disabled="true"] {
-  text-decoration: line-through;
-  opacity: 0.5;
-  border: 2px solid transparent;
-  cursor: not-allowed;
+  :where(.date-picker-year-button[data-is-disabled="true"]) {
+    text-decoration: line-through;
+    opacity: 0.5;
+    border: 2px solid transparent;
+    cursor: not-allowed;
+  }
 }

package/src/inputs/date_picker/date_picker_year_selector.tsx

@@ -51,7 +51,7 @@ export function DatePickerYearSelector({
         key={x}
         width="flex"
         disabled={disabled}
-        className={clsx(styles['date-picker-year-button'], 'date-picker-year-button')}
+        className={clsx(styles['date-picker-year-button'], 'tcn-date-picker-year-button')}
         data-is-disabled={String(disabled)}
         data-is-selected={String(date.getFullYear() === visibleYear)}
         onClick={() => {
@@ -95,7 +95,10 @@ export function DatePickerYearSelector({
       ref={containerRef}
       tabIndex={0}
       padding="8px"
-      className={clsx(styles['date-picker-year-selector'], 'date-picker-year-selector')}
+      className={clsx(
+        styles['date-picker-year-selector'],
+        'tcn-date-picker-year-selector'
+      )}
       gap="4px"
     >
       <HStack gap="4px">

package/src/inputs/index.ts

@@ -32,7 +32,6 @@ export * from './multi_combo_box/multi_combo_box.js';
 
 export * from './multiselect/multiselect.js';
 export * from './multiselect/multiselect_inline_values.js';
-export * from './multiselect/multiselect_row.js';
 export * from './multiselect/multiselect_values.js';
 
 export * from './options/utils.js';
@@ -42,7 +41,6 @@ export * from './phone_number_input/countries_phone_information.js';
 export * from './phone_number_input/phone_number_input.js';
 
 export * from './radio/radio.js';
-export * from './radio/radio_row.js';
 
 export * from './select/select.js';
 
@@ -52,9 +50,7 @@ export * from './suggestions/suggestion_item.js';
 export * from './suggestions/suggestion_list.js';
 
 export * from './switch/switch.js';
-export * from './switch/switch_row.js';
 
 export * from './textarea/textarea.js';
-export * from './textarea/textarea_row.js';
 
 export * from './unit_input/unit_input.js';

package/src/inputs/input/input.module.css

@@ -1,80 +1,56 @@
-:root {
-  --disabled-input-color: var(--status-disabled, rgba(0, 0, 0, 0.3));
-  --disabled-input-background-color: rgba(0, 0, 0, 0.05);
-}
-
-.input {
-  font-size: calc(14px * var(--scalar, 1));
-  height: calc(26px * var(--scalar, 1));
-  width: 100%;
-  background-color: #fff;
-  color: var(--font-color);
-  border: 1px solid #aaa;
-  border-radius: 4px;
-  padding: 0;
-  padding-inline: 4px;
-  box-sizing: border-box;
-  font-family: Lato, Arial, Helvetica, sans-serif;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.input[data-is-disabled="false"]:hover {
-  border: 1px solid var(--accent-color);
-}
-
-.input:focus {
-  outline: none;
-  border: 1px solid var(--accent-color);
-}
-
-.input:focus-visible {
-  outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
-}
-
-.input[data-is-disabled="true"] {
-  cursor: not-allowed;
-  color: var(--disabled-input-color);
-  background-color: var(--disabled-input-background-color);
-  border-color: var(--status-disabled);
-}
-
-.input[data-is-disabled="true"]::placeholder {
-  color: var(--disabled-input-color);
-}
-
-:global(.small-text) .input {
-  font-size: 12px;
-  height: 22px;
-}
-
-:global(.medium-small-text) .input {
-  font-size: 14px;
-  height: 24px;
-}
-
-:global(.medium-text) .input {
-  font-size: 16px;
-  height: 26px;
-}
-
-:global(.medium-large-text) .input {
-  font-size: 18px;
-  height: 28px;
-}
-
-:global(.large-text) .input {
-  font-size: 20px;
-  height: 30px;
-}
-
-.input[type="color"] {
-  cursor: pointer;
-  padding-block: 4px;
-  font-size: 12px;
-}
-
-.input[type="file"] {
-  cursor: pointer;
-  padding-block: 3px;
-  font-size: 12px;
+@layer tcn-system {
+  :root {
+    --disabled-input-color: var(--status-disabled, rgba(0, 0, 0, 0.3));
+    --disabled-input-background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  :where(.input) {
+    font-size: calc(14px * var(--scalar, 1));
+    height: calc(26px * var(--scalar, 1));
+    width: 100%;
+    background-color: #fff;
+    color: var(--font-color);
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    padding: 0;
+    padding-inline: 4px;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :where(.input[data-is-disabled="false"]:hover) {
+    border: 1px solid var(--accent-color);
+  }
+
+  :where(.input:focus) {
+    outline: none;
+    border: 1px solid var(--accent-color);
+  }
+
+  :where(.input:focus-visible) {
+    outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
+  }
+
+  :where(.input[data-is-disabled="true"]) {
+    cursor: not-allowed;
+    color: var(--disabled-input-color);
+    background-color: var(--disabled-input-background-color);
+    border-color: var(--status-disabled);
+  }
+
+  :where(.input[data-is-disabled="true"]::placeholder) {
+    color: var(--disabled-input-color);
+  }
+
+  :where(.input[type="color"]) {
+    cursor: pointer;
+    padding-block: 4px;
+    font-size: 12px;
+  }
+
+  :where(.input[type="file"]) {
+    cursor: pointer;
+    padding-block: 3px;
+    font-size: 12px;
+  }
 }

package/src/inputs/input/input.tsx

@@ -22,7 +22,7 @@ export const Input = React.forwardRef(function Input(
 ) {
   return (
     <input
-      className={clsx(styles.input, className, 'input')}
+      className={clsx(styles.input, className, 'tcn-input')}
       type={type}
       ref={ref}
       data-is-disabled={props.disabled || false}

package/src/inputs/multi_combo_box/multi_combo_box.module.css

@@ -1,3 +1,5 @@
-.multi-combo-box-container {
-  gap: 1px;
+@layer tcn-system {
+  .multi-combo-box-container {
+    gap: 1px;
+  }
 }

package/src/inputs/multiselect/multiselect.module.css

@@ -1,3 +1,5 @@
-.multiselect-container {
-  gap: 1px;
+@layer tcn-system {
+  :where(.multiselect-container) {
+    gap: 1px;
+  }
 }

package/src/inputs/multiselect/multiselect.tsx

@@ -8,6 +8,7 @@ import { Select, SelectProps } from '../select/select.js';
 import { OptionProps } from '../options/option.js';
 import { useForkRef } from '../../utils/index.js';
 import styles from './multiselect.module.css';
+import clsx from 'clsx';
 
 export interface MultiselectProps
   extends Omit<
@@ -108,7 +109,7 @@ export const Multiselect = React.forwardRef(function Multiselect(
       width={width}
       minWidth={minWidth}
       maxWidth={maxWidth}
-      className={styles['multiselect-container']}
+      className={clsx(styles['multiselect-container'], 'tcn-multiselect-container')}
     >
       <Select
         ref={ref}

package/src/inputs/multiselect/multiselect_inline_values.tsx

@@ -4,6 +4,7 @@ import { CrossIcon } from '@tcn/icons/cross_icon.js';
 import { SlimButton } from '../../actions/index.js';
 import { OptionProps } from '../options/option.js';
 import { Chip } from '../../tokens/index.js';
+import clsx from 'clsx';
 
 export interface MultiselectInlineValuesProps {
   values: React.ReactElement<OptionProps>[];
@@ -20,7 +21,7 @@ export function MultiselectInlineValues({
     return (
       <Chip
         hAlign="start"
-        className={styles.chip}
+        className={clsx(styles.chip, 'tcn-multiselect-chip')}
         key={index}
         paddingInlineStart="8px"
         width="auto"
@@ -30,7 +31,7 @@ export function MultiselectInlineValues({
           disabled={disabled}
           size="sm"
           hierarchy="tertiary"
-          className={styles.remove}
+          className={clsx(styles.remove, 'tcn-multiselect-chip-remove')}
           onClick={() => {
             onRemove(v);
           }}

package/src/inputs/multiselect/multiselect_values.module.css

@@ -1,31 +1,33 @@
-.chip {
-  margin-block: 2px;
-  margin-inline-end: 4px;
-  padding: 4px 8px 4px 12px;
-}
+@layer tcn-system {
+  :where(.chip) {
+    margin-block: 2px;
+    margin-inline-end: 4px;
+    padding: 4px 8px 4px 12px;
+  }
 
-.remove,
-.remove:focus,
-.remove:active {
-  outline-width: 1px;
-}
+  :where(.remove),
+  :where(.remove:focus),
+  :where(.remove:active) {
+    outline-width: 1px;
+  }
 
-.item-container {
-  background-color: #fff;
-  border-radius: 4px;
-  padding: 4px;
-  max-height: 150px;
-  min-width: 100%;
-  overflow: auto;
-  border: 1px solid #aaa;
-}
+  :where(.item-container) {
+    background-color: #fff;
+    border-radius: 4px;
+    padding: 4px;
+    max-height: 150px;
+    min-width: 100%;
+    overflow: auto;
+    border: 1px solid #aaa;
+  }
 
-.item-container[data-is-disabled="true"] {
-  background-color: rgba(0, 0, 0, 0.05);
-  cursor: not-allowed;
-}
+  :where(.item-container[data-is-disabled="true"]) {
+    background-color: rgba(0, 0, 0, 0.05);
+    cursor: not-allowed;
+  }
 
-.item-container[data-is-disabled="true"] > .chip {
-  opacity: 0.5;
-  cursor: not-allowed;
+  :where(.item-container[data-is-disabled="true"] > .chip) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 }

package/src/inputs/multiselect/multiselect_values.tsx

@@ -24,7 +24,7 @@ export function MultiselectValues({
       <Chip
         hAlign="start"
         color="rgb(57, 85, 120)"
-        className={styles.chip}
+        className={clsx(styles.chip, 'tcn-multiselect-chip')}
         key={index}
         paddingInlineStart="8px"
       >
@@ -33,7 +33,7 @@ export function MultiselectValues({
           disabled={disabled}
           size="sm"
           hierarchy="tertiary"
-          className={styles.remove}
+          className={clsx(styles.remove, 'tcn-multiselect-chip-remove')}
           onClick={() => {
             onRemove(v);
           }}
@@ -53,7 +53,7 @@ export function MultiselectValues({
       className={clsx(
         styles['item-container'],
         className,
-        'multiselect-values-container'
+        'tcn-multiselect-values-container'
       )}
       data-is-disabled={disabled}
     >