@mich8060/unified-design-system 0.1.10

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,258 @@
+.uds-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+  border: var(--uds-border-width-1) solid transparent;
+  box-sizing: border-box;
+  min-width: 24px;
+  white-space: nowrap;
+  width: fit-content;
+  height: fit-content;
+  user-select: none;
+
+  // When used as button, remove default button styles
+  &:is(button) {
+    background: none;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+  }
+
+  // ── Size: Compact (16px tall) ──────────────────────────────────────
+  &--compact {
+    font-size: 10px;
+    font-weight: var(--uds-font-weight-semibold);
+    line-height: 12px;
+    padding: var(--uds-spacing-2) var(--uds-spacing-4);
+  }
+
+  // ── Size: Default (24px tall) ──────────────────────────────────────
+  &--default {
+    font-size: var(--uds-font-size-12);
+    font-weight: var(--uds-font-weight-semibold);
+    line-height: var(--uds-line-16);
+    padding: var(--uds-spacing-4) var(--uds-spacing-8);
+  }
+
+  // ── Icon-left: compact gets slightly wider outer padding ───────────
+  &--icon-left.uds-tag--compact {
+    padding-inline: var(--uds-spacing-6);
+  }
+
+  // ── 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 ──────────────────────────────────────────────────────────
+  &__label {
+    display: inline-block;
+    white-space: nowrap;
+    text-align: center;
+    padding-inline: var(--uds-spacing-4);
+  }
+
+  // Icon-left compact: tighter inner label padding
+  &--icon-left.uds-tag--compact &__label {
+    padding-inline: var(--uds-spacing-2);
+  }
+
+  // ── 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-color: var(--uds-border-primary);
+    color: var(--uds-text-primary);
+  }
+
+  &--neutral.uds-tag--solid {
+    background-color: var(--uds-surface-primary);
+    border-color: var(--uds-border-primary);
+    color: var(--uds-text-primary);
+  }
+
+  &--red.uds-tag--solid {
+    background-color: var(--uds-color-accent-red-600);
+    border-color: transparent;
+    color: var(--uds-text-inverse);
+  }
+
+  &--orange.uds-tag--solid {
+    background-color: var(--uds-color-accent-orange-600);
+    border-color: transparent;
+    color: var(--uds-text-inverse);
+  }
+
+  &--yellow.uds-tag--solid {
+    background-color: var(--uds-color-accent-yellow-600);
+    border-color: transparent;
+    color: var(--uds-text-inverse);
+  }
+
+  &--emerald.uds-tag--solid {
+    background-color: var(--uds-color-accent-emerald-600);
+    border-color: transparent;
+    color: var(--uds-text-inverse);
+  }
+
+  &--green.uds-tag--solid {
+    background-color: var(--uds-color-accent-green-600);
+    border-color: transparent;
+    color: var(--uds-text-inverse);
+  }
+
+  &--sky.uds-tag--solid {
+    background-color: var(--uds-color-accent-sky-600);
+    border-color: transparent;
+    color: var(--uds-text-inverse);
+  }
+
+  &--cyan.uds-tag--solid {
+    background-color: var(--uds-color-accent-cyan-600);
+    border-color: transparent;
+    color: var(--uds-text-inverse);
+  }
+
+  &--blue.uds-tag--solid {
+    background-color: var(--uds-color-accent-blue-600);
+    border-color: transparent;
+    color: var(--uds-text-inverse);
+  }
+
+  &--indigo.uds-tag--solid {
+    background-color: var(--uds-color-accent-indigo-600);
+    border-color: transparent;
+    color: var(--uds-text-inverse);
+  }
+
+  &--purple.uds-tag--solid {
+    background-color: var(--uds-color-accent-purple-600);
+    border-color: transparent;
+    color: var(--uds-text-inverse);
+  }
+
+  &--fuchsia.uds-tag--solid {
+    background-color: var(--uds-color-accent-fuchsia-600);
+    border-color: transparent;
+    color: var(--uds-text-inverse);
+  }
+
+  &--magenta.uds-tag--solid {
+    background-color: var(--uds-color-accent-magenta-600);
+    border-color: transparent;
+    color: var(--uds-text-inverse);
+  }
+
+  &--inverse.uds-tag--solid {
+    background-color: var(--uds-surface-inverse);
+    border-color: transparent;
+    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/Tag.spec.ts

@@ -0,0 +1,12 @@
+export const TAG_DEFAULTS = {
+  className: "",
+} as const;
+
+export const TAG_STORY_SPEC = {
+  defaults: {
+    className: TAG_DEFAULTS.className,
+  },
+  stories: {
+    default: {},
+  },
+} as const;

package/src/ui/Tag/Tag.stories.jsx

@@ -0,0 +1,14 @@
+import Tag from "./Tag";
+
+export default {
+  title: "Components/Tag",
+  component: Tag,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Tag/Tag.stories.tsx

@@ -0,0 +1,14 @@
+import Tag from "./Tag.jsx";
+
+export default {
+  title: "Components/Tag",
+  component: Tag,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Tag/Tag.test.tsx

@@ -0,0 +1 @@
+export {};

package/src/ui/Tag/Tag.tsx

@@ -0,0 +1,6 @@
+import type { ComponentType } from "react";
+import LegacyTag from "./Tag.jsx";
+
+const Tag = LegacyTag as ComponentType<any>;
+
+export default Tag;

package/src/ui/Tag/Tag.types.ts

@@ -0,0 +1,3 @@
+export interface TagProps {
+  className?: string;
+}

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.ai.md

@@ -0,0 +1,40 @@
+# Textarea
+
+Multi-line text input component with resize options and character counting.
+
+## When to Use
+- Multi-line text fields (descriptions, comments, messages)
+- Form fields that need more than one line of input
+
+## Props
+
+| Prop | Type | Default | Values | Description |
+|------|------|---------|--------|-------------|
+| `value` | `string` | — | — | Textarea value (controlled) |
+| `onChange` | `function` | — | `(event) => void` | Change handler |
+| `placeholder` | `string` | — | — | Placeholder text |
+| `rows` | `number` | `4` | — | Initial visible rows |
+| `resize` | `string` | `"vertical"` | `"none"`, `"vertical"`, `"horizontal"`, `"both"` | Resize behavior |
+| `maxLength` | `number` | — | — | Max characters (shows counter) |
+| `state` | `string` | `"default"` | `"default"`, `"focused"`, `"error"`, `"disabled"` | Visual state |
+| `disabled` | `boolean` | `false` | — | Disabled state |
+| `className` | `string` | `""` | — | Additional CSS classes |
+
+## Examples
+
+```jsx
+<Textarea placeholder="Enter description..." value={desc} onChange={e => setDesc(e.target.value)} />
+<Textarea placeholder="Comment" maxLength={500} rows={6} />
+```
+
+### In a form
+```jsx
+<Field label="Description" helperText="Provide a detailed description">
+  <Textarea
+    value={description}
+    onChange={e => setDescription(e.target.value)}
+    maxLength={1000}
+    placeholder="Enter description..."
+  />
+</Field>
+```

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,71 @@
+@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-input-border);
+  border-radius: var(--uds-radius-4);
+  background-color: var(--uds-input-surface);
+  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
+
+
+  &--default {
+    min-height: 120px;
+  }
+
+  &--compact {
+    min-height: 80px;
+  }
+
+  // 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/Textarea.spec.ts

@@ -0,0 +1,12 @@
+export const TEXTAREA_DEFAULTS = {
+  className: "",
+} as const;
+
+export const TEXTAREA_STORY_SPEC = {
+  defaults: {
+    className: TEXTAREA_DEFAULTS.className,
+  },
+  stories: {
+    default: {},
+  },
+} as const;

package/src/ui/Textarea/Textarea.stories.jsx

@@ -0,0 +1,14 @@
+import Textarea from "./Textarea";
+
+export default {
+  title: "Components/Textarea",
+  component: Textarea,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Textarea/Textarea.stories.tsx

@@ -0,0 +1,14 @@
+import Textarea from "./Textarea.jsx";
+
+export default {
+  title: "Components/Textarea",
+  component: Textarea,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Textarea/Textarea.test.tsx

@@ -0,0 +1 @@
+export {};

package/src/ui/Textarea/Textarea.tsx

@@ -0,0 +1,6 @@
+import type { ComponentType } from "react";
+import LegacyTextarea from "./Textarea.jsx";
+
+const Textarea = LegacyTextarea as ComponentType<any>;
+
+export default Textarea;

package/src/ui/Textarea/Textarea.types.ts

@@ -0,0 +1,3 @@
+export interface TextareaProps {
+  className?: string;
+}

package/src/ui/Textarea/index.js

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