@tcn/ui 0.3.1 → 0.3.2

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,57 @@
-: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;
+    font-family: Lato, Arial, Helvetica, sans-serif;
+    -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}
     >

package/src/inputs/phone_number_input/phone_number_input.module.css

@@ -1,62 +1,64 @@
-.phone-number-input {
-  position: relative;
-  opacity: 1;
-  border-radius: 0;
-}
+@layer tcn-system {
+  :where(.phone-number-input) {
+    position: relative;
+    opacity: 1;
+    border-radius: 0;
+  }
 
-.phone-number-input[data-has-phone-book="false"] {
-  border-end-end-radius: 4px;
-  border-start-end-radius: 4px;
-}
+  :where(.phone-number-input[data-has-phone-book="false"]) {
+    border-end-end-radius: 4px;
+    border-start-end-radius: 4px;
+  }
 
-.phone-number-input-select {
-  border-end-end-radius: 0px;
-  border-start-end-radius: 0px;
-}
+  :where(.phone-number-input-select) {
+    border-end-end-radius: 0px;
+    border-start-end-radius: 0px;
+  }
 
-.phone-number-input > * {
-  position: relative;
-  z-index: 1;
-}
+  :where(.phone-number-input > *) {
+    position: relative;
+    z-index: 1;
+  }
 
-.phone-number-input-select:has(button) {
-  z-index: 2;
-}
+  :where(.phone-number-input-select:has(button)) {
+    z-index: 2;
+  }
 
-.phone-number-input-input:has(input:focus),
-.phone-number-input-select:focus,
-.phone-number-input-input:has(input:focus-visible),
-.phone-number-input-select:focus-visible {
-  z-index: 3;
-}
+  :where(.phone-number-input-input:has(input:focus)),
+  :where(.phone-number-input-select:focus),
+  :where(.phone-number-input-input:has(input:focus-visible)),
+  :where(.phone-number-input-select:focus-visible) {
+    z-index: 3;
+  }
 
-.phone-number-input-phone-book-popover {
-  border-radius: calc(4px * var(--scalar, 1));
-  padding: 8px;
-  background-color: rgba(254, 254, 254, 1);
-  box-shadow: var(--raised-box-shadow), var(--drop-shadow-depth-3);
-  min-width: calc(200px * var(--scalar, 1));
-}
+  :where(.phone-number-input-phone-book-popover) {
+    border-radius: calc(4px * var(--scalar, 1));
+    padding: 8px;
+    background-color: rgba(254, 254, 254, 1);
+    box-shadow: var(--raised-box-shadow), var(--drop-shadow-depth-3);
+    min-width: calc(200px * var(--scalar, 1));
+  }
 
-.phone-number-input-phone-book {
-  border-start-start-radius: 0px;
-  border-end-start-radius: 0px;
-  height: calc(26px * var(--scalar, 1)) !important;
-  width: calc(26px * var(--scalar, 1)) !important;
-  min-height: calc(26px * var(--scalar, 1)) !important;
-  min-width: calc(26px * var(--scalar, 1)) !important;
-  max-height: calc(26px * var(--scalar, 1)) !important;
-  max-width: calc(26px * var(--scalar, 1)) !important;
-}
+  :where(.phone-number-input-phone-book) {
+    border-start-start-radius: 0px;
+    border-end-start-radius: 0px;
+    height: calc(26px * var(--scalar, 1)) !important;
+    width: calc(26px * var(--scalar, 1)) !important;
+    min-height: calc(26px * var(--scalar, 1)) !important;
+    min-width: calc(26px * var(--scalar, 1)) !important;
+    max-height: calc(26px * var(--scalar, 1)) !important;
+    max-width: calc(26px * var(--scalar, 1)) !important;
+  }
 
-.phone-number-input-obfuscated {
-  user-select: none;
-  -webkit-user-select: none;
-  cursor: default;
-  width: 100%;
-  height: 100%;
-}
+  :where(.phone-number-input-obfuscated) {
+    user-select: none;
+    -webkit-user-select: none;
+    cursor: default;
+    width: 100%;
+    height: 100%;
+  }
 
-.phone-number-input-obfuscated::selection {
-  background: transparent;
+  :where(.phone-number-input-obfuscated::selection) {
+    background: transparent;
+  }
 }

package/src/inputs/phone_number_input/phone_number_input.tsx

@@ -328,12 +328,15 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
   return (
     <HStack
       ref={ref}
-      className={clsx(styles['phone-number-input'], 'phone-number-input')}
+      className={clsx(styles['phone-number-input'], 'tcn-phone-number-input')}
       height="auto"
       {...props}
     >
       <Select
-        className={clsx(styles['phone-number-input-select'], 'phone-number-input-select')}
+        className={clsx(
+          styles['phone-number-input-select'],
+          'tcn-phone-number-input-select'
+        )}
         ref={countryRef}
         width="auto"
         value={obfuscateValue ? '' : countryCode}
@@ -345,7 +348,13 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
       >
         {countryOptions}
       </Select>
-      <HStack width="flex" className={clsx(styles['phone-number-input-container'])}>
+      <HStack
+        width="flex"
+        className={clsx(
+          styles['phone-number-input-container'],
+          'tcn-phone-number-input-container'
+        )}
+      >
         {obfuscateValue ? (
           <MaskInput
             key="obfuscated"
@@ -362,7 +371,7 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
             className={clsx(
               styles['phone-number-input'],
               styles['phone-number-input-obfuscated'],
-              'phone-number-input'
+              'tcn-phone-number-input'
             )}
             preparePasteValue={() => ''}
             prepareCopyValue={() => ''}
@@ -381,7 +390,7 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
             data-is-disabled={disabled}
             data-has-phone-book={showPhoneBook}
             data-is-obfuscated={false}
-            className={clsx(styles['phone-number-input'], 'phone-number-input')}
+            className={clsx(styles['phone-number-input'], 'tcn-phone-number-input')}
             preparePasteValue={preparePasteValue}
           />
         )}
@@ -392,7 +401,7 @@ export const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(
             disabled={disabled}
             className={clsx(
               styles['phone-number-input-phone-book'],
-              'phone-number-input-phone-book'
+              'tcn-phone-number-input-phone-book'
             )}
             onClick={togglePhoneBook}
             size="md"