@mich8060/chg-design-system 0.1.0

package/src/ui/Tabs/Tabs.scss

@@ -0,0 +1,164 @@
+@use "../../styles/typography" as *;
+
+.uds {
+  &-tabs {
+    all: unset;
+    display: flex;
+    gap: 0;
+    width: 100%;
+    position: relative;
+    overflow-y: hidden;
+
+    &__list {
+      all: unset;
+      display: flex;
+      gap: 0;
+      width: 100%;
+      scroll-behavior: smooth;
+      overflow-y: hidden;
+      scrollbar-width: none; // Firefox
+      -ms-overflow-style: none; // IE and Edge
+
+      &::-webkit-scrollbar {
+        display: none; // Chrome, Safari, Opera
+      }
+    }
+
+    &--scrollable {
+      display: flex;
+      align-items: center;
+      gap: var(--uds-gap-4);
+      position: relative;
+
+      .uds-tabs__list {
+        flex: 1;
+        min-width: 0; // Allows flex item to shrink below content size
+      }
+    }
+
+    &__scroll-button {
+      flex-shrink: 0;
+      z-index: 1;
+      position: relative;
+    }
+
+    &-item {
+        @include uds-body-14-semibold;
+      all: unset;
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--uds-gap-8);
+      cursor: pointer;
+      position: relative;
+      user-select: none;
+      transition: all var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+      white-space: nowrap;
+      flex-shrink: 0; // Prevent tabs from shrinking
+    }
+
+    &--block {
+      border-radius: var(--uds-radius-4);
+      border: var(--uds-border-width-1) solid var(--uds-border-primary);
+      padding: var(--uds-spacing-4);
+
+      button {
+        padding: var(--uds-spacing-8) var(--uds-spacing-12);
+        @include uds-body-14-medium;
+
+        &.active {
+          background-color: var(--uds-surface-brand-tertiary);
+          border-radius: var(--uds-radius-4);
+          color: var(--uds-text-inverse);
+          @include uds-body-14-semibold;
+        }
+      }
+    }
+
+    &--block-inverted {
+      border-radius: var(--uds-radius-4);
+      border: var(--uds-border-width-1) solid var(--uds-border-primary);
+      padding: var(--uds-spacing-4);
+
+      button {
+        padding: var(--uds-spacing-8) var(--uds-spacing-12);
+        @include uds-body-14-medium;
+
+        &.active {
+          background-color: var(--uds-surface-primary);
+          border: var(--uds-border-width-1) solid var(--uds-border-primary);
+          color: var(--uds-icon-brand-tertiary);
+          @include uds-body-14-semibold;
+        }
+      }
+    }
+
+    &--underline {
+      border-bottom: solid var(--uds-border-width-1) var(--uds-border-primary);
+
+      button {
+        margin-bottom: -1px;
+        padding: var(--uds-spacing-12) var(--uds-spacing-24);
+
+        &.active {
+          border-bottom: solid 2px var(--uds-border-brand-tertiary);
+        }
+      }
+    }
+
+    // Overflow menu container
+    &__overflow-menu {
+      display: inline-flex;
+      align-items: center;
+      flex-shrink: 0;
+      position: relative;
+      left: 0;
+      z-index: 1;
+    }
+
+    // Style overflow button for underline appearance
+    &--underline {
+      .uds-tabs__overflow-menu button {
+        margin-bottom: -1px;
+        padding: var(--uds-spacing-12) var(--uds-spacing-24);
+        @include uds-body-16;
+
+        &.active {
+          border-bottom: solid 2px var(--uds-border-brand-tertiary);
+          @include uds-body-14-semibold;
+        }
+      }
+    }
+
+    // Style overflow button for block appearance
+    &--block {
+      .uds-tabs__overflow-menu button {
+        padding: var(--uds-spacing-8) var(--uds-spacing-12);
+        @include uds-body-14-medium;
+
+        &.active {
+          background-color: var(--uds-surface-brand-tertiary);
+          border-radius: var(--uds-radius-4);
+          color: var(--uds-text-inverse);
+          @include uds-body-14-semibold;
+        }
+      }
+    }
+
+    // Style overflow button for block-inverted appearance
+    &--block-inverted {
+      .uds-tabs__overflow-menu button {
+        padding: var(--uds-spacing-8) var(--uds-spacing-12);
+        @include uds-body-14-medium;
+
+        &.active {
+          background-color: var(--uds-surface-primary);
+          border: var(--uds-border-width-1) solid var(--uds-border-primary);
+          color: var(--uds-icon-brand-tertiary);
+          @include uds-body-14-semibold;
+        }
+      }
+    }
+  }
+}

package/src/ui/Tabs/Untitled

@@ -0,0 +1 @@
+more

package/src/ui/Tabs/index.js

@@ -0,0 +1,3 @@
+export { default as Tabs } from "./Tabs";
+export { default as TabItem } from "./TabItem";
+export { default } from "./Tabs";

package/src/ui/Tag/Tag.figma.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Tag from './Tag';
+
+/**
+ * Figma Code Connect for Tag component
+ * 
+ * Simple execution version of tag with various configurations
+ */
+export default function TagFigma({
+    label = 'Label',
+    appearance = 'label-only',
+    size = 'compact',
+    color = 'transparent',
+    rounded = true,
+    solid = false,
+    icon,
+}) {
+    return (
+        <Tag
+            label={label}
+            appearance={appearance}
+            size={size}
+            color={color}
+            rounded={rounded}
+            solid={solid}
+            icon={icon}
+        />
+    );
+}

package/src/ui/Tag/Tag.jsx

@@ -0,0 +1,93 @@
+import React from "react";
+import Icon from "../Icon/Icon";
+import "./Tag.scss";
+
+const BASE_CLASS = "uds-tag";
+
+const appearanceClassMap = {
+  "label-only": "label-only",
+  "icon-left": "icon-left",
+};
+
+const sizeClassMap = {
+  compact: "compact",
+  default: "default",
+};
+
+const colorClassMap = {
+  transparent: "transparent",
+  neutral: "neutral",
+  red: "red",
+  orange: "orange",
+  yellow: "yellow",
+  emerald: "emerald",
+  green: "green",
+  sky: "sky",
+  cyan: "cyan",
+  blue: "blue",
+  indigo: "indigo",
+  purple: "purple",
+  fuchsia: "fuchsia",
+  magenta: "magenta",
+  inverse: "inverse",
+};
+
+/**
+ * Tag component for displaying labels with optional icons
+ *
+ * @param {string} label - The text content of the tag
+ * @param {string} appearance - Visual style variant: 'label-only' or 'icon-left'
+ * @param {string} size - Size variant: 'compact' or 'default'
+ * @param {string} color - Color variant: 'transparent', 'neutral', 'red', 'orange', 'yellow', 'emerald', 'green', 'sky', 'cyan', 'blue', 'indigo', 'purple', 'fuchsia', 'magenta', 'inverse'
+ * @param {boolean} rounded - Whether to use rounded corners (default: true)
+ * @param {boolean} solid - Whether to use solid background (default: false)
+ * @param {string|boolean} icon - Icon name to display (when appearance is 'icon-left')
+ * @param {string} className - Additional CSS classes
+ * @param {function} onClick - Click handler function
+ * @param {object} props - Additional props to pass to the tag element
+ */
+export default function Tag({
+  label = "Label",
+  appearance = "label-only",
+  size = "compact",
+  color = "transparent",
+  rounded = true,
+  solid = false,
+  icon,
+  className = "",
+  onClick,
+  ...props
+}) {
+  const classNames = [
+    BASE_CLASS,
+    appearanceClassMap[appearance] &&
+      `${BASE_CLASS}--${appearanceClassMap[appearance]}`,
+    sizeClassMap[size] && `${BASE_CLASS}--${sizeClassMap[size]}`,
+    colorClassMap[color] && `${BASE_CLASS}--${colorClassMap[color]}`,
+    rounded && `${BASE_CLASS}--rounded`,
+    solid && `${BASE_CLASS}--solid`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const Element = onClick ? "button" : "span";
+  const hasIcon = appearance === "icon-left" && icon;
+
+  return (
+    <Element className={classNames} onClick={onClick} {...props}>
+      {hasIcon && typeof icon === "string" && (
+        <Icon
+          name={icon}
+          size={size === "compact" ? 10 : 12}
+          appearance="regular"
+          className={`${BASE_CLASS}__icon`}
+        />
+      )}
+      {hasIcon && typeof icon !== "string" && (
+        <span className={`${BASE_CLASS}__icon`}>{icon}</span>
+      )}
+      {label && <span className={`${BASE_CLASS}__label`}>{label}</span>}
+    </Element>
+  );
+}

package/src/ui/Tag/Tag.scss

@@ -0,0 +1,229 @@
+@use "../../styles/typography" as *;
+
+.uds-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--uds-gap-0);
+  padding-inline: var(--uds-spacing-4);
+  padding-block: var(--uds-spacing-0);
+  box-sizing: border-box;
+  white-space: nowrap;
+  width: fit-content;
+  height: fit-content;
+  user-select: none;
+
+  // When used as button, remove default button styles
+  &:is(button) {
+    all: unset;
+    display: inline-flex;
+    cursor: pointer;
+  }
+
+  // Size variants
+  &--compact {
+    @include uds-body-12-semibold;
+    font-size: 10px;
+    line-height: 12px;
+  }
+
+  &--default {
+    @include uds-body-12-semibold;
+  }
+
+  // Rounded variant
+  &--rounded {
+    border-radius: 9999px;
+  }
+
+  &:not(&--rounded) {
+    border-radius: 0;
+  }
+
+  // Icon
+  &__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    line-height: 0;
+
+    svg {
+      width: 10px;
+      height: 10px;
+    }
+
+    .uds-tag--default & {
+      svg {
+        width: 12px;
+        height: 12px;
+      }
+    }
+  }
+
+  &__label {
+    display: inline-block;
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  // Color variants (non-solid)
+  &--transparent:not(&--solid) {
+    background-color: transparent;
+    color: var(--uds-text-primary);
+  }
+
+  &--neutral:not(&--solid) {
+    background-color: transparent;
+    color: var(--uds-text-primary);
+  }
+
+  &--red:not(&--solid) {
+    background-color: transparent;
+    color: var(--uds-color-accent-red-600);
+  }
+
+  &--orange:not(&--solid) {
+    background-color: transparent;
+    color: var(--uds-color-accent-orange-600);
+  }
+
+  &--yellow:not(&--solid) {
+    background-color: transparent;
+    color: var(--uds-color-accent-yellow-600);
+  }
+
+  &--emerald:not(&--solid) {
+    background-color: transparent;
+    color: var(--uds-color-accent-emerald-600);
+  }
+
+  &--green:not(&--solid) {
+    background-color: transparent;
+    color: var(--uds-color-accent-green-600);
+  }
+
+  &--sky:not(&--solid) {
+    background-color: transparent;
+    color: var(--uds-color-accent-sky-600);
+  }
+
+  &--cyan:not(&--solid) {
+    background-color: transparent;
+    color: var(--uds-color-accent-cyan-600);
+  }
+
+  &--blue:not(&--solid) {
+    background-color: transparent;
+    color: var(--uds-color-accent-blue-600);
+  }
+
+  &--indigo:not(&--solid) {
+    background-color: transparent;
+    color: var(--uds-color-accent-indigo-600);
+  }
+
+  &--purple:not(&--solid) {
+    background-color: transparent;
+    color: var(--uds-color-accent-purple-600);
+  }
+
+  &--fuchsia:not(&--solid) {
+    background-color: transparent;
+    color: var(--uds-color-accent-fuchsia-600);
+  }
+
+  &--magenta:not(&--solid) {
+    background-color: transparent;
+    color: var(--uds-color-accent-magenta-600);
+  }
+
+  &--inverse:not(&--solid) {
+    background-color: transparent;
+    color: var(--uds-text-inverse);
+  }
+
+  // Color variants (solid)
+  &--transparent.uds-tag--solid {
+    background-color: var(--uds-surface-primary);
+    border: var(--uds-border-width-1) solid var(--uds-border-primary);
+    color: var(--uds-text-primary);
+  }
+
+  &--neutral.uds-tag--solid {
+    background-color: var(--uds-surface-primary);
+    border: var(--uds-border-width-1) solid var(--uds-border-primary);
+    color: var(--uds-text-primary);
+  }
+
+  &--red.uds-tag--solid {
+    background-color: var(--uds-color-accent-red-600);
+    color: var(--uds-text-inverse);
+  }
+
+  &--orange.uds-tag--solid {
+    background-color: var(--uds-color-accent-orange-600);
+    color: var(--uds-text-inverse);
+  }
+
+  &--yellow.uds-tag--solid {
+    background-color: var(--uds-color-accent-yellow-600);
+    color: var(--uds-text-inverse);
+  }
+
+  &--emerald.uds-tag--solid {
+    background-color: var(--uds-color-accent-emerald-600);
+    color: var(--uds-text-inverse);
+  }
+
+  &--green.uds-tag--solid {
+    background-color: var(--uds-color-accent-green-600);
+    color: var(--uds-text-inverse);
+  }
+
+  &--sky.uds-tag--solid {
+    background-color: var(--uds-color-accent-sky-600);
+    color: var(--uds-text-inverse);
+  }
+
+  &--cyan.uds-tag--solid {
+    background-color: var(--uds-color-accent-cyan-600);
+    color: var(--uds-text-inverse);
+  }
+
+  &--blue.uds-tag--solid {
+    background-color: var(--uds-color-accent-blue-600);
+    color: var(--uds-text-inverse);
+  }
+
+  &--indigo.uds-tag--solid {
+    background-color: var(--uds-color-accent-indigo-600);
+    color: var(--uds-text-inverse);
+  }
+
+  &--purple.uds-tag--solid {
+    background-color: var(--uds-color-accent-purple-600);
+    color: var(--uds-text-inverse);
+  }
+
+  &--fuchsia.uds-tag--solid {
+    background-color: var(--uds-color-accent-fuchsia-600);
+    color: var(--uds-text-inverse);
+  }
+
+  &--magenta.uds-tag--solid {
+    background-color: var(--uds-color-accent-magenta-600);
+    color: var(--uds-text-inverse);
+  }
+
+  &--inverse.uds-tag--solid {
+    background-color: var(--uds-surface-inverse);
+    color: var(--uds-text-inverse);
+  }
+
+  // Focus state
+  &:focus-visible {
+    outline: solid var(--uds-focus-ring-width) var(--uds-focus-ring-border);
+    outline-offset: var(--uds-focus-ring-offset);
+  }
+}

package/src/ui/Tag/index.js

@@ -0,0 +1,2 @@
+export { default as Tag } from "./Tag";
+export { default } from "./Tag";

package/src/ui/Textarea/Textarea.figma.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import Textarea from './Textarea';
+
+/**
+ * Figma Code Connect for Textarea component
+ * 
+ * Simple execution version of textarea with various configurations
+ */
+export default function TextareaFigma({
+    value,
+    placeholderText = 'Placeholder',
+    size = 'default',
+    state = 'default',
+    placeholder = false,
+    scrollbar = 'false',
+    resize = true,
+}) {
+    const [internalValue, setInternalValue] = useState(value || '');
+
+    const handleChange = (e) => {
+        setInternalValue(e.target.value);
+    };
+
+    return (
+        <Textarea
+            value={placeholder ? '' : (value || internalValue)}
+            onChange={handleChange}
+            placeholder={placeholder ? placeholderText : undefined}
+            size={size.toLowerCase()}
+            state={state.toLowerCase()}
+            resize={resize}
+            disabled={state === 'disabled'}
+        />
+    );
+}

package/src/ui/Textarea/Textarea.jsx

@@ -0,0 +1,68 @@
+import React from "react";
+import "./Textarea.scss";
+
+const BASE_CLASS = "uds-textarea";
+
+const sizeClassMap = {
+  compact: "compact",
+  default: "default",
+};
+
+const stateClassMap = {
+  default: "default",
+  focused: "focused",
+  error: "error",
+  disabled: "disabled",
+};
+
+/**
+ * Textarea component for multi-line text input
+ *
+ * @param {string} value - The value of the textarea
+ * @param {function} onChange - Callback function when value changes
+ * @param {string} placeholder - Placeholder text
+ * @param {string} size - Size variant: 'compact' (80px min-height) or 'default' (120px min-height)
+ * @param {string} state - State variant: 'default', 'focused', 'error', or 'disabled'
+ * @param {boolean} resize - Whether the textarea can be resized (default: true)
+ * @param {boolean} disabled - Whether the textarea is disabled (overrides state)
+ * @param {string} id - Unique identifier for the textarea
+ * @param {string} className - Additional CSS classes
+ * @param {object} props - Additional props to pass to the textarea element
+ */
+export default function Textarea({
+  value,
+  onChange,
+  placeholder,
+  size = "default",
+  state = "default",
+  resize = true,
+  disabled = false,
+  id,
+  className = "",
+  ...props
+}) {
+  const effectiveState = disabled ? "disabled" : state;
+
+  const classNames = [
+    BASE_CLASS,
+    sizeClassMap[size] && `${BASE_CLASS}--${sizeClassMap[size]}`,
+    stateClassMap[effectiveState] &&
+      `${BASE_CLASS}--${stateClassMap[effectiveState]}`,
+    !resize && `${BASE_CLASS}--no-resize`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <textarea
+      id={id}
+      className={classNames}
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      disabled={disabled || effectiveState === "disabled"}
+      {...props}
+    />
+  );
+}

package/src/ui/Textarea/Textarea.scss

@@ -0,0 +1,69 @@
+@use "../../styles/typography" as *;
+
+.uds-textarea {
+  @include uds-body-16;
+  width: 100%;
+  padding: var(--uds-spacing-10) var(--uds-spacing-12);
+  border: var(--uds-border-width-1) solid var(--uds-border-primary);
+  border-radius: var(--uds-radius-4);
+  background-color: var(--uds-surface-primary);
+  color: var(--uds-text-primary);
+  transition: all var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+  box-sizing: border-box;
+  font-family: var(--uds-font-family);
+  resize: vertical;
+  align-self: stretch;
+  overflow-y: auto;
+
+  &::placeholder {
+    color: var(--uds-text-placeholder);
+  }
+
+  // Size variants
+  &--compact {
+    min-height: 80px;
+  }
+
+  &--default {
+    min-height: 120px;
+  }
+
+  // No resize variant
+  &--no-resize {
+    resize: none;
+  }
+
+  // Default state (border color)
+  border-color: var(--uds-border-primary);
+
+  // State: Focused
+  &--focused {
+    border-color: var(--uds-border-brand-primary);
+  }
+
+  // State: Error
+  &--error {
+    border-color: var(--uds-text-error, #ef4444);
+  }
+
+  // State: Disabled
+  &--disabled,
+  &:disabled {
+    background-color: var(--uds-surface-tertiary);
+    color: var(--uds-text-secondary);
+    cursor: not-allowed;
+    opacity: 0.6;
+    border-color: var(--uds-border-primary);
+  }
+
+  // Focus state (applies to all states except disabled)
+  &:focus:not(:disabled) {
+    outline: none;
+    border-color: var(--uds-border-brand-primary);
+  }
+
+  // Remove default textarea styling that might interfere
+  &:focus-visible {
+    outline: none;
+  }
+}

package/src/ui/Textarea/index.js

@@ -0,0 +1,2 @@
+export { default as Textarea } from "./Textarea";
+export { default } from "./Textarea";