@mich8060/unified-design-system 0.1.10

package/src/ui/EventCard/EventCard.scss

@@ -0,0 +1,186 @@
+@use "../../styles/typography" as *;
+
+.uds-event-card {
+  all: unset;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--uds-spacing-2) var(--uds-spacing-4);
+  cursor: default;
+  min-width: 0;
+
+  // ── Clickable ───────────────────────────────────────────────────
+  &--clickable {
+    cursor: pointer;
+
+    &:hover .uds-event-card__container {
+      filter: brightness(0.93);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--uds-border-focus);
+      outline-offset: 0;
+      border-radius: var(--uds-radius-4);
+    }
+  }
+
+  // ── Cap Variations ────────────────────────────────────────────
+  &--no-start-cap {
+    padding-left: 0;
+  }
+
+  &--no-end-cap {
+    padding-right: 0;
+  }
+
+  &--no-start-cap.uds-event-card--no-end-cap {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  // ── Container ─────────────────────────────────────────────────
+  &__container {
+    display: flex;
+    flex: 1 0 0;
+    align-items: center;
+    min-height: 1px;
+    min-width: 1px;
+    padding: var(--uds-spacing-4) var(--uds-spacing-8);
+    border-radius: var(--uds-radius-4);
+    gap: var(--uds-spacing-8);
+    position: relative;
+    overflow: hidden;
+    transition: filter var(--uds-animation-duration-150) var(--uds-animation-ease-standard);
+  }
+
+  // Container cap radius overrides
+  &--no-end-cap &__container {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &--no-start-cap &__container {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  // Bar-only mode (no content, no startCap, no icon/badge)
+  &--bar-only &__container {
+    height: 20px;
+    padding: 0;
+    gap: 0;
+  }
+
+  // ── Content ───────────────────────────────────────────────────
+  &__content {
+    display: flex;
+    flex: 1 0 0;
+    align-items: center;
+    min-height: 1px;
+    min-width: 1px;
+    gap: var(--uds-spacing-8);
+    position: relative;
+    z-index: 1;
+  }
+
+  &__title {
+    @include uds-body-12-medium;
+    color: inherit;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+    flex-shrink: 0;
+  }
+
+  &__icon {
+    flex-shrink: 0;
+    position: relative;
+    z-index: 1;
+    color: inherit;
+  }
+
+  // ── Pending Stripe Pattern ────────────────────────────────────
+  &__pattern {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: repeating-linear-gradient(
+      -45deg,
+      transparent,
+      transparent 5px,
+      var(--_stripe-color) 5px,
+      var(--_stripe-color) 6px
+    );
+  }
+
+  // ════════════════════════════════════════════════════════════════
+  // TYPE × STATUS Color Matrix
+  // ════════════════════════════════════════════════════════════════
+
+  // ── Travel ──────────────────────────────────────────────────────
+  &--travel {
+    &.uds-event-card--active .uds-event-card__container {
+      background-color: var(--uds-color-primary-500);
+      color: var(--uds-text-inverse);
+    }
+
+    &.uds-event-card--past .uds-event-card__container {
+      background-color: var(--uds-color-neutrals-100);
+      color: var(--uds-text-primary);
+    }
+
+    &.uds-event-card--pending .uds-event-card__container {
+      background-color: var(--uds-color-accent-cyan-50);
+      border-left: 4px solid var(--uds-color-accent-cyan-200);
+      color: var(--uds-text-primary);
+      --_stripe-color: var(--uds-color-accent-cyan-200);
+    }
+  }
+
+  // ── Assignment ─────────────────────────────────────────────────
+  &--assignment {
+    &.uds-event-card--active .uds-event-card__container {
+      background-color: var(--uds-color-secondary-500);
+      color: var(--uds-text-inverse);
+    }
+
+    &.uds-event-card--past .uds-event-card__container {
+      background-color: var(--uds-color-neutrals-100);
+      color: var(--uds-text-primary);
+    }
+
+    &.uds-event-card--pending .uds-event-card__container {
+      background-color: var(--uds-color-accent-aqua-50);
+      border-left: 4px solid var(--uds-color-accent-aqua-200);
+      color: var(--uds-text-primary);
+      --_stripe-color: var(--uds-color-accent-aqua-200);
+    }
+  }
+
+  // ── Unassigned ─────────────────────────────────────────────────
+  &--unassigned {
+    &.uds-event-card--active .uds-event-card__container {
+      background-color: var(--uds-color-neutrals-500);
+      color: var(--uds-text-inverse);
+    }
+
+    &.uds-event-card--past .uds-event-card__container {
+      background-color: var(--uds-color-neutrals-100);
+      color: var(--uds-text-primary);
+    }
+
+    &.uds-event-card--pending .uds-event-card__container {
+      background-color: var(--uds-color-neutrals-50);
+      border-left: 4px solid var(--uds-color-neutrals-500);
+      color: var(--uds-text-primary);
+      --_stripe-color: var(--uds-color-neutrals-200);
+    }
+  }
+
+  // ── Pending: Remove left border when no startCap ──────────────
+  &--pending.uds-event-card--no-start-cap .uds-event-card__container {
+    border-left: none;
+  }
+}

package/src/ui/EventCard/EventCard.spec.ts

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

package/src/ui/EventCard/EventCard.stories.jsx

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

package/src/ui/EventCard/EventCard.stories.tsx

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

package/src/ui/EventCard/EventCard.test.tsx

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

package/src/ui/EventCard/EventCard.tsx

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

package/src/ui/EventCard/EventCard.types.ts

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

package/src/ui/EventCard/index.js

@@ -0,0 +1 @@
+export { default } from "./EventCard";

package/src/ui/Field/Field.ai.md

@@ -0,0 +1,69 @@
+# Field
+
+Form field wrapper providing label, helper text, error messages, and required indicator.
+
+## When to Use
+- Wrapping any form input (Input, Textarea, Dropdown, Datepicker, etc.)
+- Any place you need a labeled form field with validation feedback
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | — | Field label text |
+| `htmlFor` | `string` | — | Associates label with input (matches input `id`) |
+| `required` | `boolean` | `false` | Shows required asterisk |
+| `helperText` | `string` | — | Help text below the input |
+| `error` | `string` | — | Error message (overrides helperText when present) |
+| `children` | `ReactNode` | — | Form input component |
+| `className` | `string` | `""` | Additional CSS classes |
+
+## Examples
+
+### Basic form field
+```jsx
+<Field label="Email" htmlFor="email" required>
+  <Input id="email" type="email" placeholder="you@example.com" />
+</Field>
+```
+
+### With error
+```jsx
+<Field label="Password" error={errors.password} required>
+  <Input type="password" state={errors.password ? "error" : "default"} />
+</Field>
+```
+
+### With helper text
+```jsx
+<Field label="Username" helperText="Must be 3-20 characters, letters and numbers only">
+  <Input value={username} onChange={e => setUsername(e.target.value)} />
+</Field>
+```
+
+### Complete form
+```jsx
+<Flex direction="column" gap="16">
+  <Field label="Name" required>
+    <Input value={name} onChange={e => setName(e.target.value)} />
+  </Field>
+  <Field label="Role">
+    <Dropdown options={roles} value={role} onChange={setRole} />
+  </Field>
+  <Field label="Bio" helperText="Tell us about yourself">
+    <Textarea value={bio} onChange={e => setBio(e.target.value)} maxLength={500} />
+  </Field>
+  <Flex justifyContent="flex-end" gap="8">
+    <Button label="Cancel" appearance="outline" />
+    <Button label="Save" />
+  </Flex>
+</Flex>
+```
+
+## Do's and Don'ts
+
+✅ **Do**: Always wrap form inputs with `Field` for consistent layout
+✅ **Do**: Use `htmlFor` matching the input's `id` for accessibility
+
+❌ **Don't**: Use `Field` for non-form content
+❌ **Don't**: Put multiple inputs inside a single `Field`

package/src/ui/Field/Field.jsx

@@ -0,0 +1,89 @@
+import React from "react";
+import Icon from "../Icon/Icon";
+import "./Field.scss";
+
+const BASE_CLASS = "uds-field";
+
+/**
+ * Field component for form input fields with label, helper text, and optional features
+ * @param {string} label - Label text for the field
+ * @param {boolean} required - Whether the field is required (adds asterisk to label)
+ * @param {string} helperMessage - Helper text displayed below the input
+ * @param {string} infoIcon - Icon name for info icon (e.g., "Info")
+ * @param {function} onInfoClick - Callback when info icon is clicked
+ * @param {number} maxLength - Maximum character length (enables character count)
+ * @param {number|string} value - Current value (for character count calculation)
+ * @param {string} id - Unique identifier for the field
+ * @param {string} className - Additional CSS classes
+ * @param {React.ReactNode} children - The input element to wrap
+ * @param {object} props - Additional props to pass to the field wrapper
+ */
+export default function Field({
+  label,
+  required = false,
+  helperMessage,
+  infoIcon,
+  onInfoClick,
+  maxLength,
+  value,
+  id,
+  className = "",
+  children,
+  ...props
+}) {
+  const fieldId = id || `field-${Math.random().toString(36).substr(2, 9)}`;
+
+  // Calculate character count if maxLength is provided
+  const currentLength = value ? String(value).length : 0;
+  const showCharacterCount = maxLength !== undefined && maxLength !== null;
+
+  const classNames = [BASE_CLASS, className].filter(Boolean).join(" ");
+
+  return (
+    <div className={classNames} {...props}>
+      {/* Label Row */}
+      {(label || infoIcon) && (
+        <div className={`${BASE_CLASS}__label-row`}>
+          {label && (
+            <label htmlFor={fieldId} className={`${BASE_CLASS}__label`}>
+              {label}
+              {required && <span className={`${BASE_CLASS}__required`}>*</span>}
+            </label>
+          )}
+          {infoIcon && (
+            <button
+              type="button"
+              className={`${BASE_CLASS}__info-icon`}
+              onClick={onInfoClick}
+              aria-label="More information"
+              tabIndex={0}
+            >
+              <Icon name={infoIcon} size={16} appearance="regular" />
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* Input Slot */}
+      <div className={`${BASE_CLASS}__input-wrapper`}>
+        {React.isValidElement(children) && fieldId
+          ? React.cloneElement(children, {
+              id: fieldId,
+              maxLength: maxLength || children.props.maxLength,
+              ...children.props,
+            })
+          : children}
+        {showCharacterCount && (
+          <span className={`${BASE_CLASS}__character-count`}>
+            {currentLength}/{maxLength}
+          </span>
+        )}
+      </div>
+
+      {/* Helper Message */}
+      {helperMessage && (
+        <div className={`${BASE_CLASS}__helper`}>{helperMessage}</div>
+      )}
+    </div>
+  );
+}

package/src/ui/Field/Field.scss

@@ -0,0 +1,76 @@
+@use "../../styles/typography" as *;
+
+.uds-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--uds-gap-8);
+  width: 100%;
+
+  &__label-row {
+    display: flex;
+    align-items: center;
+    gap: var(--uds-gap-8);
+    justify-content: space-between;
+  }
+
+  &__label {
+    @include uds-body-14-medium;
+    color: var(--uds-text-primary);
+    display: inline-block;
+    line-height: 20px;
+  }
+
+  &__required {
+    color: var(--uds-text-error, #ef4444);
+    margin-left: 2px;
+  }
+
+  &__info-icon {
+    all: unset;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: var(--uds-surface-tertiary);
+    color: var(--uds-text-secondary);
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: all var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+
+    &:hover {
+      background-color: var(--uds-surface-quaternary);
+      color: var(--uds-text-primary);
+    }
+
+    &:focus-visible {
+      outline: solid var(--uds-focus-ring-width) var(--uds-focus-ring-border);
+      outline-offset: var(--uds-focus-ring-offset);
+    }
+  }
+
+  &__input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+  }
+
+  &__character-count {
+    @include uds-body-12;
+    position: absolute;
+    bottom: var(--uds-spacing-8);
+    right: var(--uds-spacing-12);
+    color: var(--uds-text-secondary);
+    pointer-events: none;
+    line-height: 1;
+  }
+
+  &__helper {
+    @include uds-body-14;
+    color: var(--uds-text-secondary);
+    line-height: 20px;
+    margin-top: calc(var(--uds-gap-8) * -1);
+  }
+}

package/src/ui/Field/Field.spec.ts

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

package/src/ui/Field/Field.stories.jsx

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

package/src/ui/Field/Field.stories.tsx

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

package/src/ui/Field/Field.test.tsx

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

package/src/ui/Field/Field.tsx

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

package/src/ui/Field/Field.types.ts

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

package/src/ui/Field/index.js

@@ -0,0 +1 @@
+export { default } from "./Field";

package/src/ui/FileUpload/FileUpload.ai.md

@@ -0,0 +1,38 @@
+# FileUpload
+
+Drag-and-drop file upload component with preview and validation.
+
+## When to Use
+- File attachment fields in forms
+- Document/image upload interfaces
+- Any file input that needs drag-and-drop support
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onUpload` | `function` | — | Callback `(files: File[]) => void` |
+| `accept` | `string` | — | Accepted file types (e.g., `.jpg,.png,.pdf`) |
+| `multiple` | `boolean` | `false` | Allow multiple files |
+| `maxSize` | `number` | — | Max file size in bytes |
+| `disabled` | `boolean` | `false` | Disabled state |
+| `label` | `string` | `"Drop files here or click to upload"` | Upload area text |
+| `className` | `string` | `""` | Additional CSS classes |
+
+## Examples
+
+```jsx
+<FileUpload onUpload={handleFiles} accept=".jpg,.png,.gif" multiple />
+```
+
+### Single document upload
+```jsx
+<Field label="Resume">
+  <FileUpload
+    onUpload={([file]) => setResume(file)}
+    accept=".pdf,.doc,.docx"
+    maxSize={5 * 1024 * 1024}
+    label="Drop your resume here"
+  />
+</Field>
+```

package/src/ui/FileUpload/FileUpload.figma.tsx

@@ -0,0 +1,28 @@
+import FileUpload from './FileUpload';
+import { code } from '@figma/code-connect';
+
+export default code.connect(
+    FileUpload,
+    'https://www.figma.com/design/LkIyThUA0oVNsDEAyOF7ER/Design-System--Components',
+    {
+        props: {
+            instructionText: code.string('instructionText'),
+            acceptText: code.string('acceptText'),
+            maxSize: code.number('maxSize'),
+            accept: code.array('accept'),
+            multiple: code.boolean('multiple'),
+            disabled: code.boolean('disabled'),
+        },
+        example: ({ instructionText, acceptText, maxSize, accept, multiple, disabled }) => (
+            <FileUpload
+                instructionText={instructionText}
+                acceptText={acceptText}
+                maxSize={maxSize}
+                accept={accept}
+                multiple={multiple}
+                disabled={disabled}
+                onFileSelect={(files) => console.log('Files selected:', files)}
+            />
+        ),
+    }
+);