@mich8060/unified-design-system 0.1.10

package/src/ui/Playground/Playground.scss

@@ -0,0 +1,310 @@
+@use "../../styles/typography" as *;
+
+.playground {
+  background: white;
+  border: var(--uds-border-width-1) solid var(--uds-border-primary);
+  border-radius: var(--uds-radius-8);
+  margin-bottom: var(--uds-spacing-48);
+  overflow: hidden;
+
+  &__container {
+    display: flex;
+    min-height: 600px;
+  }
+
+  // Canvas (Left Side)
+  &__canvas {
+    flex: 1 0 0;
+    background: var(--uds-surface-tertiary);
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--uds-spacing-48);
+    min-height: 600px;
+  }
+
+  &__canvas-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+  }
+
+  // Floating Action Bar
+  &__actions {
+    position: absolute;
+    bottom: var(--uds-spacing-24);
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    gap: var(--uds-gap-8);
+    background: white;
+    border: var(--uds-border-width-1) solid var(--uds-border-primary);
+    border-radius: var(--uds-radius-9999);
+    padding: var(--uds-spacing-13) var(--uds-spacing-25);
+    box-shadow: var(--uds-shadow-lg);
+  }
+
+  &__actions-divider {
+    width: 1px;
+    height: 32px;
+    background: var(--uds-border-primary);
+  }
+
+  // Panel (Right Side)
+  &__panel {
+    width: 360px;
+    border-left: var(--uds-border-width-1) solid var(--uds-border-primary);
+    display: flex;
+    flex-direction: column;
+    background: white;
+  }
+
+  &__panel-header {
+    border-bottom: var(--uds-border-width-1) solid var(--uds-border-primary);
+    padding: var(--uds-spacing-16);
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--uds-gap-16);
+  }
+
+  &__panel-header-content {
+    flex: 1 0 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  &__panel-title-row {
+    display: flex;
+    align-items: center;
+    gap: var(--uds-gap-8);
+    margin-bottom: 0;
+  }
+
+  &__panel-title {
+    @include uds-heading-20-semibold;
+    margin: 0;
+    color: var(--uds-text-primary);
+    flex: 1 0 0;
+  }
+
+  &__panel-subtitle {
+    @include uds-body-12;
+    margin: 0;
+    color: var(--uds-text-secondary);
+  }
+
+  &__panel-content {
+    flex: 1 0 0;
+    padding: var(--uds-spacing-16);
+    overflow-y: auto;
+  }
+
+  // Sections
+  &__section {
+    margin-bottom: var(--uds-gap-24);
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__section-title {
+    @include uds-body-14-semibold;
+    display: flex;
+    align-items: center;
+    gap: var(--uds-gap-4);
+    color: var(--uds-text-primary);
+    margin-bottom: var(--uds-gap-16);
+    height: 20px;
+  }
+
+  &__section-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--uds-gap-16);
+  }
+
+  // Fields
+  &__field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--uds-gap-4);
+  }
+
+  &__field-head {
+    display: flex;
+    align-items: center;
+    padding-bottom: var(--uds-spacing-4);
+  }
+
+  &__field-label {
+    @include uds-body-12-medium;
+    color: var(--uds-text-primary);
+    margin: 0;
+  }
+
+  &__field-body {
+    display: flex;
+    flex-direction: column;
+    max-height: 400px;
+  }
+
+  &__input {
+    @include uds-body-14;
+    background: var(--uds-input-surface, #f9fafc);
+    border: var(--uds-border-width-1) solid var(--uds-input-border, #d2d5dc);
+    border-radius: var(--uds-radius-4);
+    padding: var(--uds-spacing-8) var(--uds-spacing-14);
+    color: var(--uds-text-primary);
+    width: 100%;
+      transition: all var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+
+    &:focus {
+      outline: none;
+      border-color: var(--uds-border-brand-primary);
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+
+    &:hover:not(:disabled) {
+      border-color: var(--uds-border-brand-primary);
+    }
+  }
+
+  &__select-trigger {
+    @include uds-body-14;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--uds-gap-8);
+    background: var(--uds-input-surface, #f9fafc);
+    border: var(--uds-border-width-1) solid var(--uds-input-border, #d2d5dc);
+    border-radius: var(--uds-radius-4);
+    padding: var(--uds-spacing-8) var(--uds-spacing-14);
+    color: var(--uds-text-primary);
+    width: 100%;
+    cursor: pointer;
+    text-align: left;
+      transition: all var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+
+    &:focus {
+      outline: none;
+      border-color: var(--uds-border-brand-primary);
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+    }
+
+    &:hover:not(:disabled) {
+      border-color: var(--uds-border-brand-primary);
+    }
+  }
+
+  &__select-value {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // States
+  &__states-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--uds-gap-12);
+  }
+
+  &__state-item {
+    background: var(--uds-surface-secondary);
+    border: var(--uds-border-width-1) solid var(--uds-border-primary);
+    border-radius: var(--uds-radius-4);
+    padding: var(--uds-spacing-1) var(--uds-spacing-13);
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &__state-label {
+    @include uds-body-14-medium;
+    color: var(--uds-text-primary);
+    margin: 0;
+  }
+
+  &__checkbox {
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    accent-color: var(--uds-surface-brand-primary);
+  }
+
+  // Code View
+  &__code-container {
+    flex: 1 0 0;
+    position: relative;
+    background: linear-gradient(
+      129.403deg,
+      rgb(16, 24, 40) 0%,
+      rgb(30, 41, 57) 100%
+    );
+    padding: var(--uds-spacing-24);
+    overflow-y: auto;
+  }
+
+  &__code-block {
+    height: 273px;
+    overflow-y: auto;
+  }
+
+  &__code-pre {
+    @include uds-body-14;
+    margin: 0;
+    font-family: "Menlo", "Monaco", "Ubuntu Mono", monospace;
+    line-height: 20px;
+    color: var(--uds-text-inverse);
+  }
+
+  &__code {
+    font-family: inherit;
+    color: var(--uds-text-inverse);
+    white-space: pre;
+
+    // Inline styles handle syntax highlighting
+    span {
+      font-family: inherit;
+    }
+  }
+
+  // Pro Tips
+  &__pro-tips {
+    background: var(--uds-surface-secondary);
+    border-top: var(--uds-border-width-1) solid var(--uds-border-primary);
+    padding: var(--uds-spacing-17) var(--uds-spacing-16) var(--uds-spacing-0);
+    height: 113px;
+  }
+
+  &__pro-tips-title {
+    @include uds-body-12-semibold;
+    color: var(--uds-text-primary);
+    margin: 0 0 var(--uds-gap-4) 0;
+  }
+
+  &__pro-tips-list {
+    @include uds-body-12;
+    color: var(--uds-text-secondary);
+    margin: 0;
+    padding-left: var(--uds-spacing-18);
+    list-style: disc;
+
+    li {
+      margin-bottom: var(--uds-gap-4);
+      line-height: 16px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

package/src/ui/Playground/Playground.spec.ts

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

package/src/ui/Playground/Playground.stories.jsx

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

package/src/ui/Playground/Playground.stories.tsx

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

package/src/ui/Playground/Playground.test.tsx

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

package/src/ui/Playground/Playground.tsx

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

package/src/ui/Playground/Playground.types.ts

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

package/src/ui/Playground/index.js

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

package/src/ui/ProgressCircle/ProgressCircle.ai.md

@@ -0,0 +1,36 @@
+# ProgressCircle
+
+Circular progress indicator showing percentage completion.
+
+## When to Use
+- Upload progress, loading states
+- Skill/score displays, dashboards
+- Any circular completion visualization
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `number` | `0` | Progress percentage (0–100) |
+| `size` | `number` | `80` | Circle diameter in pixels |
+| `strokeWidth` | `number` | `8` | Stroke width in pixels |
+| `color` | `string` | `"blue"` | Track color |
+| `showValue` | `boolean` | `true` | Show percentage text in center |
+| `className` | `string` | `""` | Additional CSS classes |
+
+## Examples
+
+```jsx
+<ProgressCircle value={75} />
+<ProgressCircle value={100} color="green" />
+<ProgressCircle value={30} size={48} strokeWidth={4} />
+```
+
+### Dashboard widget
+```jsx
+<Flex gap="24">
+  <ProgressCircle value={metrics.completion} color="green" />
+  <ProgressCircle value={metrics.quality} color="blue" />
+  <ProgressCircle value={metrics.speed} color="orange" />
+</Flex>
+```

package/src/ui/ProgressCircle/ProgressCircle.jsx

@@ -0,0 +1,147 @@
+import React from "react";
+import "./ProgressCircle.scss";
+
+const BASE_CLASS = "uds-progress-circle";
+
+const sizeClassMap = {
+  xxs: "xxs",
+  xs: "xs",
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+};
+
+const shapeClassMap = {
+  circle: "circle",
+  "half-circle": "half-circle",
+};
+
+/**
+ * ProgressCircle component for displaying circular progress indicators
+ * @param {number} value - Progress value (0-100)
+ * @param {number} max - Maximum value (default: 100)
+ * @param {string} size - Size variant: 'xxs', 'xs', 'sm', 'md', or 'lg'
+ * @param {string} shape - Shape variant: 'circle' (full circle) or 'half-circle' (semi-circle)
+ * @param {string} label - Optional label text to display
+ * @param {boolean} showLabel - Whether to show the label (if provided)
+ * @param {string} className - Additional CSS classes
+ * @param {string} 'aria-label' - Accessible label for screen readers
+ * @param {object} props - Additional props to pass to the progress element
+ */
+export default function ProgressCircle({
+  value = 40,
+  max = 100,
+  size = "md",
+  shape = "circle",
+  label,
+  showLabel = true,
+  className = "",
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+  const displayValue = Math.round(percentage);
+
+  // Calculate SVG properties based on size
+  const sizeConfig = {
+    xxs: { size: 64, strokeWidth: 3, fontSize: 14, labelFontSize: 12 },
+    xs: { size: 160, strokeWidth: 8, fontSize: 24, labelFontSize: 12 },
+    sm: { size: 200, strokeWidth: 10, fontSize: 32, labelFontSize: 12 },
+    md: { size: 240, strokeWidth: 12, fontSize: 36, labelFontSize: 12 },
+    lg: { size: 280, strokeWidth: 14, fontSize: 48, labelFontSize: 12 },
+  };
+
+  const config = sizeConfig[size] || sizeConfig.md;
+  const radius = (config.size - config.strokeWidth) / 2;
+  const circumference =
+    shape === "half-circle"
+      ? Math.PI * radius // Half circle
+      : 2 * Math.PI * radius; // Full circle
+  const offset = circumference - (percentage / 100) * circumference;
+
+  const classNames = [
+    BASE_CLASS,
+    sizeClassMap[size] && `${BASE_CLASS}--${sizeClassMap[size]}`,
+    shapeClassMap[shape] && `${BASE_CLASS}--${shapeClassMap[shape]}`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const progressId = `progress-circle-${Math.random().toString(36).substr(2, 9)}`;
+  const labelId = label ? `${progressId}-label` : undefined;
+
+  // SVG viewBox and dimensions
+  const viewBoxSize = config.size;
+  const centerX = viewBoxSize / 2;
+  const centerY = viewBoxSize / 2;
+
+  // For half-circle, we need to adjust the SVG
+  const svgHeight = shape === "half-circle" ? viewBoxSize / 2 : viewBoxSize;
+  const svgCenterY = shape === "half-circle" ? viewBoxSize : centerY;
+
+  return (
+    <div
+      className={classNames}
+      role="progressbar"
+      aria-valuenow={value}
+      aria-valuemin={0}
+      aria-valuemax={max}
+      aria-label={ariaLabel || label || `Progress: ${displayValue}%`}
+      aria-labelledby={labelId}
+      {...props}
+    >
+      <svg
+        className={`${BASE_CLASS}__svg`}
+        width={config.size}
+        height={svgHeight}
+        viewBox={`0 ${shape === "half-circle" ? viewBoxSize / 2 : 0} ${viewBoxSize} ${svgHeight}`}
+      >
+        {/* Background track */}
+        <circle
+          className={`${BASE_CLASS}__track`}
+          cx={centerX}
+          cy={svgCenterY}
+          r={radius}
+          fill="none"
+          strokeWidth={config.strokeWidth}
+          strokeDasharray={circumference}
+          strokeDashoffset={shape === "half-circle" ? circumference / 2 : 0}
+          pathLength={circumference}
+        />
+
+        {/* Progress fill */}
+        <circle
+          className={`${BASE_CLASS}__fill`}
+          cx={centerX}
+          cy={svgCenterY}
+          r={radius}
+          fill="none"
+          strokeWidth={config.strokeWidth}
+          strokeDasharray={circumference}
+          strokeDashoffset={
+            shape === "half-circle" ? circumference / 2 + offset : offset
+          }
+          pathLength={circumference}
+          strokeLinecap="round"
+          transform={`rotate(-90 ${centerX} ${svgCenterY})`}
+        />
+      </svg>
+
+      {/* Content overlay */}
+      <div className={`${BASE_CLASS}__content`}>
+        {label && showLabel && (
+          <span id={labelId} className={`${BASE_CLASS}__label`}>
+            {label}
+          </span>
+        )}
+        <span
+          className={`${BASE_CLASS}__value`}
+          style={{ fontSize: `${config.fontSize}px` }}
+        >
+          {displayValue}%
+        </span>
+      </div>
+    </div>
+  );
+}

package/src/ui/ProgressCircle/ProgressCircle.scss

@@ -0,0 +1,143 @@
+@use "../../styles/typography" as *;
+
+.uds-progress-circle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &__svg {
+    display: block;
+  }
+
+  &__track {
+    stroke: #e6e7eb; // Light gray track
+    transition: stroke-dashoffset var(--uds-animation-duration-300)
+      var(--uds-animation-ease-standard);
+  }
+
+  &__fill {
+    stroke: var(--uds-surface-brand-primary, #0c6bb0); // Brand blue
+    transition: stroke-dashoffset var(--uds-animation-duration-300)
+      var(--uds-animation-ease-standard);
+  }
+
+  &__content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    gap: var(--uds-gap-4);
+  }
+
+  &__label {
+    @include uds-body-12-medium;
+    color: var(--uds-text-tertiary, #6b7380);
+    white-space: nowrap;
+  }
+
+  &__value {
+    @include uds-body-14-semibold;
+    color: var(--uds-text-primary, #202938);
+    font-weight: 600;
+    line-height: 1;
+    white-space: nowrap;
+  }
+
+  // Size variants
+  &--xxs {
+    width: 64px;
+    height: 64px;
+
+    .uds-progress-circle__value {
+      font-size: 14px;
+      line-height: 20px;
+      color: var(--uds-text-secondary, #4c5564);
+    }
+
+    .uds-progress-circle__label {
+      font-size: 12px;
+      line-height: 18px;
+    }
+
+    &.uds-progress-circle--half-circle {
+      height: 36px;
+    }
+  }
+
+  &--xs {
+    width: 160px;
+    height: 160px;
+
+    .uds-progress-circle__value {
+      font-size: 24px;
+      line-height: 32px;
+    }
+
+    &.uds-progress-circle--half-circle {
+      height: 88px;
+    }
+  }
+
+  &--sm {
+    width: 200px;
+    height: 200px;
+
+    .uds-progress-circle__value {
+      font-size: 32px;
+      line-height: 40px;
+    }
+
+    &.uds-progress-circle--half-circle {
+      height: 110px;
+    }
+  }
+
+  &--md {
+    width: 240px;
+    height: 240px;
+
+    .uds-progress-circle__value {
+      font-size: 36px;
+      line-height: 44px;
+      letter-spacing: -0.72px;
+    }
+
+    &.uds-progress-circle--half-circle {
+      height: 132px;
+    }
+  }
+
+  &--lg {
+    width: 280px;
+    height: 280px;
+
+    .uds-progress-circle__value {
+      font-size: 48px;
+      line-height: 60px;
+      letter-spacing: -0.96px;
+    }
+
+    &.uds-progress-circle--half-circle {
+      height: 154px;
+    }
+  }
+
+  // Half circle adjustments
+  &--half-circle {
+    .uds-progress-circle__content {
+      top: auto;
+      bottom: 0;
+      transform: translateX(-50%);
+    }
+
+    .uds-progress-circle__svg {
+      overflow: visible;
+    }
+  }
+}

package/src/ui/ProgressCircle/ProgressCircle.spec.ts

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