@fragments-sdk/ui 0.1.0

package/src/components/Dialog/Dialog.module.scss

@@ -0,0 +1,158 @@
+@use '../../tokens/variables' as *;
+@use '../../tokens/mixins' as *;
+
+// Backdrop overlay
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: var(--fui-backdrop, $fui-backdrop);
+  z-index: 50;
+
+  // Animation
+  opacity: 0;
+  transition: opacity var(--fui-transition-normal, $fui-transition-normal);
+
+  &[data-open] {
+    opacity: 1;
+  }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+  }
+}
+
+// Positioner centers the popup
+.positioner {
+  position: fixed;
+  inset: 0;
+  z-index: 51;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--fui-space-4, $fui-space-4);
+  overflow-y: auto;
+}
+
+// The popup container
+.popup {
+  @include surface-elevated;
+  @include text-base;
+
+  position: relative;
+  width: 100%;
+  max-width: 28rem; // 448px
+  max-height: calc(100vh - var(--fui-space-8, $fui-space-8));
+  overflow-y: auto;
+  box-shadow: var(--fui-shadow-md, $fui-shadow-md);
+
+  // Animation
+  opacity: 0;
+  transform: scale(0.95) translateY(-8px);
+  transition:
+    opacity var(--fui-transition-normal, $fui-transition-normal),
+    transform var(--fui-transition-normal, $fui-transition-normal);
+
+  &[data-open] {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+
+  &[data-starting-style] {
+    opacity: 0;
+    transform: scale(0.95) translateY(-8px);
+  }
+
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.95) translateY(8px);
+  }
+}
+
+// Size variants
+.sm {
+  max-width: 24rem; // 384px
+}
+
+.md {
+  max-width: 28rem; // 448px - default
+}
+
+.lg {
+  max-width: 36rem; // 576px
+}
+
+.xl {
+  max-width: 48rem; // 768px
+}
+
+.full {
+  max-width: calc(100vw - var(--fui-space-8, $fui-space-8));
+}
+
+// Header area
+.header {
+  padding: var(--fui-space-5, $fui-space-5) var(--fui-space-6, $fui-space-6);
+  padding-bottom: 0;
+}
+
+// Title
+.title {
+  margin: 0;
+  font-size: var(--fui-font-size-lg, $fui-font-size-lg);
+  font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
+  color: var(--fui-text-primary, $fui-text-primary);
+  line-height: var(--fui-line-height-tight, $fui-line-height-tight);
+}
+
+// Description
+.description {
+  margin: var(--fui-space-1, $fui-space-1) 0 0;
+  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  color: var(--fui-text-secondary, $fui-text-secondary);
+  line-height: var(--fui-line-height-normal, $fui-line-height-normal);
+}
+
+// Body content
+.body {
+  padding: var(--fui-space-5, $fui-space-5) var(--fui-space-6, $fui-space-6);
+}
+
+// Footer for actions
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--fui-space-3, $fui-space-3);
+  padding: var(--fui-space-4, $fui-space-4) var(--fui-space-6, $fui-space-6);
+  border-top: 1px solid var(--fui-border, $fui-border);
+  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+  border-radius: 0 0 var(--fui-radius-lg, $fui-radius-lg) var(--fui-radius-lg, $fui-radius-lg);
+}
+
+// Close button (X in corner)
+.close {
+  @include button-reset;
+  @include interactive-base;
+
+  position: absolute;
+  top: var(--fui-space-3, $fui-space-3);
+  right: var(--fui-space-3, $fui-space-3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--fui-radius-md, $fui-radius-md);
+  color: var(--fui-text-secondary, $fui-text-secondary);
+
+  &:hover {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+    color: var(--fui-text-primary, $fui-text-primary);
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}

package/src/components/Dialog/index.tsx

@@ -0,0 +1,230 @@
+import * as React from 'react';
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import styles from './Dialog.module.scss';
+// Import globals to ensure CSS variables are defined
+import '../../styles/globals.scss';
+
+// ============================================
+// Types
+// ============================================
+
+export interface DialogProps {
+  children: React.ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  modal?: boolean;
+}
+
+export interface DialogContentProps {
+  children: React.ReactNode;
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+  className?: string;
+}
+
+export interface DialogTitleProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export interface DialogDescriptionProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export interface DialogHeaderProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export interface DialogBodyProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export interface DialogFooterProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export interface DialogTriggerProps {
+  children: React.ReactNode;
+  asChild?: boolean;
+  className?: string;
+}
+
+export interface DialogCloseProps {
+  children?: React.ReactNode;
+  asChild?: boolean;
+  className?: string;
+}
+
+// ============================================
+// Close Icon
+// ============================================
+
+function CloseIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
+    </svg>
+  );
+}
+
+// ============================================
+// Components
+// ============================================
+
+function DialogRoot({
+  children,
+  open,
+  defaultOpen,
+  onOpenChange,
+  modal = true,
+}: DialogProps) {
+  return (
+    <BaseDialog.Root
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+      modal={modal}
+    >
+      {children}
+    </BaseDialog.Root>
+  );
+}
+
+function DialogTrigger({
+  children,
+  asChild,
+  className,
+}: DialogTriggerProps) {
+  if (asChild) {
+    return (
+      <BaseDialog.Trigger className={className} render={children as React.ReactElement}>
+        {null}
+      </BaseDialog.Trigger>
+    );
+  }
+
+  return (
+    <BaseDialog.Trigger className={className}>
+      {children}
+    </BaseDialog.Trigger>
+  );
+}
+
+function DialogContent({
+  children,
+  size = 'md',
+  className,
+}: DialogContentProps) {
+  const popupClasses = [styles.popup, styles[size], className]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <BaseDialog.Portal>
+      <BaseDialog.Backdrop className={styles.backdrop} />
+      <div className={styles.positioner}>
+        <BaseDialog.Popup className={popupClasses}>
+          {children}
+        </BaseDialog.Popup>
+      </div>
+    </BaseDialog.Portal>
+  );
+}
+
+function DialogHeader({ children, className }: DialogHeaderProps) {
+  const classes = [styles.header, className].filter(Boolean).join(' ');
+  return <div className={classes}>{children}</div>;
+}
+
+function DialogTitle({ children, className }: DialogTitleProps) {
+  const classes = [styles.title, className].filter(Boolean).join(' ');
+  return <BaseDialog.Title className={classes}>{children}</BaseDialog.Title>;
+}
+
+function DialogDescription({ children, className }: DialogDescriptionProps) {
+  const classes = [styles.description, className].filter(Boolean).join(' ');
+  return (
+    <BaseDialog.Description className={classes}>
+      {children}
+    </BaseDialog.Description>
+  );
+}
+
+function DialogBody({ children, className }: DialogBodyProps) {
+  const classes = [styles.body, className].filter(Boolean).join(' ');
+  return <div className={classes}>{children}</div>;
+}
+
+function DialogFooter({ children, className }: DialogFooterProps) {
+  const classes = [styles.footer, className].filter(Boolean).join(' ');
+  return <div className={classes}>{children}</div>;
+}
+
+function DialogClose({ children, asChild, className }: DialogCloseProps) {
+  // If no children, render the default X close button
+  if (!children) {
+    return (
+      <BaseDialog.Close className={[styles.close, className].filter(Boolean).join(' ')}>
+        <CloseIcon />
+      </BaseDialog.Close>
+    );
+  }
+
+  if (asChild) {
+    return (
+      <BaseDialog.Close className={className} render={children as React.ReactElement}>
+        {null}
+      </BaseDialog.Close>
+    );
+  }
+
+  return (
+    <BaseDialog.Close className={className}>
+      {children}
+    </BaseDialog.Close>
+  );
+}
+
+// ============================================
+// Export compound component
+// ============================================
+
+export const Dialog = Object.assign(DialogRoot, {
+  Trigger: DialogTrigger,
+  Content: DialogContent,
+  Header: DialogHeader,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Body: DialogBody,
+  Footer: DialogFooter,
+  Close: DialogClose,
+});
+
+// Re-export individual components for tree-shaking
+export {
+  DialogRoot,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogBody,
+  DialogFooter,
+  DialogClose,
+};

package/src/components/EmptyState/EmptyState.fragment.tsx

@@ -0,0 +1,222 @@
+import React from 'react';
+import { defineSegment } from '@fragments/core';
+import { EmptyState } from './index.js';
+
+// Simple placeholder icon
+const FolderIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="48"
+    height="48"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+  </svg>
+);
+
+const SearchIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="48"
+    height="48"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <circle cx="11" cy="11" r="8" />
+    <line x1="21" y1="21" x2="16.65" y2="16.65" />
+  </svg>
+);
+
+const InboxIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="48"
+    height="48"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
+    <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
+  </svg>
+);
+
+export default defineSegment({
+  component: EmptyState,
+
+  meta: {
+    name: 'EmptyState',
+    description: 'Placeholder for empty content areas. Provides context, guidance, and actions when no data is available.',
+    category: 'feedback',
+    status: 'stable',
+    tags: ['empty', 'placeholder', 'no-data', 'zero-state', 'blank-slate'],
+    since: '0.1.0',
+  },
+
+  usage: {
+    when: [
+      'Empty lists, tables, or search results',
+      'New user onboarding (no content yet)',
+      'Filtered views with no matches',
+      'Error states where content failed to load',
+    ],
+    whenNot: [
+      'Loading states (use skeleton or spinner)',
+      'Error messages with retry (use Alert)',
+      'Temporary messages (use Toast)',
+    ],
+    guidelines: [
+      'Always explain why the area is empty',
+      'Provide a clear action to resolve the empty state',
+      'Use appropriate icons to reinforce the message',
+      'Keep messaging positive and actionable',
+    ],
+    accessibility: [
+      'Empty state content is accessible to screen readers',
+      'Action buttons follow button accessibility guidelines',
+    ],
+  },
+
+  props: {
+    title: {
+      type: 'string',
+      description: 'Main heading text',
+      required: true,
+    },
+    description: {
+      type: 'string',
+      description: 'Supporting description text',
+    },
+    icon: {
+      type: 'node',
+      description: 'Optional icon element',
+    },
+    action: {
+      type: 'object',
+      description: 'Primary action button: { label, onClick, variant? }',
+    },
+    secondaryAction: {
+      type: 'object',
+      description: 'Secondary action button: { label, onClick, variant? }',
+    },
+    size: {
+      type: 'enum',
+      description: 'Size variant',
+      values: ['sm', 'md', 'lg'],
+      default: 'md',
+    },
+  },
+
+  relations: [
+    { component: 'Alert', relationship: 'alternative', note: 'Use Alert for error states with retry' },
+    { component: 'Progress', relationship: 'alternative', note: 'Use Progress/Spinner for loading states' },
+  ],
+
+  contract: {
+    propsSummary: [
+      'title: string - main heading (required)',
+      'description: string - supporting text',
+      'icon: ReactNode - illustrative icon',
+      'action: { label, onClick } - primary CTA',
+      'secondaryAction: { label, onClick } - secondary CTA',
+    ],
+    scenarioTags: [
+      'feedback.empty',
+      'onboarding.start',
+      'search.no-results',
+    ],
+    a11yRules: ['A11Y_EMPTY_STATE_CONTENT'],
+  },
+
+  variants: [
+    {
+      name: 'Default',
+      description: 'Basic empty state with action',
+      render: () => (
+        <EmptyState
+          icon={<FolderIcon />}
+          title="No projects yet"
+          description="Get started by creating your first project."
+          action={{
+            label: 'Create Project',
+            onClick: () => {},
+          }}
+        />
+      ),
+    },
+    {
+      name: 'No Results',
+      description: 'Empty search results',
+      render: () => (
+        <EmptyState
+          icon={<SearchIcon />}
+          title="No results found"
+          description="Try adjusting your search terms or filters."
+          action={{
+            label: 'Clear Filters',
+            onClick: () => {},
+            variant: 'secondary',
+          }}
+        />
+      ),
+    },
+    {
+      name: 'With Secondary Action',
+      description: 'Empty state with two actions',
+      render: () => (
+        <EmptyState
+          icon={<InboxIcon />}
+          title="Inbox is empty"
+          description="You have no new messages."
+          action={{
+            label: 'Compose Message',
+            onClick: () => {},
+          }}
+          secondaryAction={{
+            label: 'View Archive',
+            onClick: () => {},
+          }}
+        />
+      ),
+    },
+    {
+      name: 'Small',
+      description: 'Compact empty state for inline use',
+      render: () => (
+        <EmptyState
+          size="sm"
+          title="No items"
+          description="Add items to see them here."
+        />
+      ),
+    },
+    {
+      name: 'Large',
+      description: 'Prominent empty state for full-page use',
+      render: () => (
+        <EmptyState
+          size="lg"
+          icon={<FolderIcon />}
+          title="Welcome to your workspace"
+          description="This is where your projects will appear. Create your first project to get started."
+          action={{
+            label: 'Create Your First Project',
+            onClick: () => {},
+          }}
+        />
+      ),
+    },
+  ],
+});