@tcn/ui 0.3.0 → 0.3.2

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"

package/src/inputs/radio/radio.module.css

@@ -1,43 +1,44 @@
 /* Reset the appearance of the radio button */
-.radio {
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  min-width: 16px;
-  min-height: 16px;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  outline: none;
-  outline-offset: 0;
-  cursor: pointer;
-  margin: 0;
-  margin-inline-end: 6px;
-  background-color: white;
-  border: 1px solid var(--accent-color);
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: transparent;
-}
+@layer tcn-system {
+  :where(.radio) {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    min-width: 16px;
+    min-height: 16px;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    outline: none;
+    outline-offset: 0;
+    cursor: pointer;
+    margin: 0;
+    margin-inline-end: 6px;
+    background-color: white;
+    border: 1px solid var(--accent-color);
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+  }
 
-.radio[data-is-disabled="true"] {
-  background-color: rgba(0, 0, 0, 0.05);
-  cursor: not-allowed;
-  opacity: 0.5;
-}
+  :where(.radio[data-is-disabled="true"]) {
+    background-color: rgba(0, 0, 0, 0.05);
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
 
-/* Style for when the radio button is checked */
-.radio:checked,
-.radio[data-checked="true"] {
-  border: 5px solid var(--accent-color);
-  background-color: white;
-}
+  /* Style for when the radio button is checked */
+  :where(.radio:checked),
+  :where(.radio[data-checked="true"]) {
+    border: 5px solid var(--accent-color);
+    background-color: white;
+  }
 
-.radio:focus {
-  outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
-}
+  :where(.radio:focus) {
+    outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
+  }
 
-/* Simulate the dot of a radio button when checked */
-/* .radio:checked::after,
+  /* Simulate the dot of a radio button when checked */
+  /* .radio:checked::after,
 .radio[data-checked="true"]::after {
   content: "";
   position: absolute;
@@ -52,36 +53,17 @@
   border: none;
 } */
 
-.radio + label {
-  font-size: 14px;
-  user-select: none;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.radio[data-is-disabled="true"] + label {
-  font-size: 14px;
-  user-select: none;
-  cursor: pointer;
-  opacity: 0.5;
-}
-
-:global(.small-text) .radio + label {
-  font-size: 12px;
-}
-
-:global(.medium-small-text) .radio + label {
-  font-size: 14px;
-}
-
-:global(.medium-text).radio + label {
-  font-size: 16px;
-}
-
-:global(.medium-large-text) .radio + label {
-  font-size: 18px;
-}
+  :where(.radio + label) {
+    font-size: 14px;
+    user-select: none;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
 
-:global(.large-text) .radio + label {
-  font-size: 18px;
+  :where(.radio[data-is-disabled="true"] + label) {
+    font-size: 14px;
+    user-select: none;
+    cursor: pointer;
+    opacity: 0.5;
+  }
 }

package/src/inputs/radio/radio.tsx

@@ -39,7 +39,7 @@ export const Radio = React.forwardRef(function Radio(
     <HStack inline width="auto">
       <input
         ref={ref}
-        className={clsx(className, styles.radio, 'radio')}
+        className={clsx(className, styles.radio, 'tcn-radio')}
         type="radio"
         id={finalId}
         name={name}
@@ -56,7 +56,7 @@ export const Radio = React.forwardRef(function Radio(
       />
       {label && (
         <label
-          className="radio-label"
+          className="tcn-radio-label"
           style={{ pointerEvents: props.disabled ? 'none' : 'auto' }}
           htmlFor={finalId}
         >

package/src/inputs/select/select.module.css

@@ -1,66 +1,64 @@
-.select {
-  position: relative;
-  box-sizing: border-box;
-  padding-inline-end: calc(
-    24px *
-    var(--scalar, 1)
-  ); /* Add padding to prevent text overlap with chevron */
-}
-
-.select[data-hierarchy="secondary"] {
-  border: 1px solid #aaa;
-  color: var(--font-color);
-}
+@layer tcn-system {
+  .select {
+    position: relative;
+    box-sizing: border-box;
+    padding-inline-end: calc(
+      24px *
+      var(--scalar, 1)
+    ); /* Add padding to prevent text overlap with chevron */
+  }
 
-.select:focus {
-  outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
-}
+  .select {
+    border: 1px solid #aaa;
+    color: currentColor;
+  }
 
-.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: #808080;
-  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 */
-}
+  .select:focus {
+    outline: 3px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
+  }
 
-.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: #808080;
-  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 */
-}
+  .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 */
+  }
 
-.select:hover::after {
-  background-color: var(--accent-color);
-}
+  .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 */
+  }
 
-.select[data-hierarchy="secondary"]:hover {
-  color: var(--accent-color);
-  border-color: var(--accent-color);
-  background-color: transparent;
-}
+  .select:hover {
+    color: var(--accent-color);
+    border-color: var(--accent-color);
+    background-color: transparent;
+  }
 
-.selectedLabel {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-align: start;
+  .selectedLabel {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: start;
+  }
 }

package/src/inputs/select/select.tsx

@@ -130,7 +130,7 @@ export const Select = React.forwardRef(function Select(
     <>
       <Button
         ref={forkedRef}
-        className={clsx(className, 'select', styles.select)}
+        className={clsx(className, 'tcn-select', styles.select)}
         width="100%"
         {...props}
         hAlign="start"
@@ -140,7 +140,9 @@ export const Select = React.forwardRef(function Select(
         onMouseDown={handlMouseDown}
         onMouseUp={handleMouseUp}
       >
-        <span className={styles.selectedLabel}>{selectedLabel}</span>
+        <span className={clsx(styles.selectedLabel, 'tcn-select-selected-label')}>
+          {selectedLabel}
+        </span>
       </Button>
       {isSuggestionsOpen && (
         <SuggestionList