@fragments-sdk/ui 0.9.0 → 0.9.2

package/src/blocks/components/LoginForm.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import * as React from 'react';
+import { Card } from '../../components/Card';
+import { Stack } from '../../components/Stack';
+import { Input } from '../../components/Input';
+import { Button } from '../../components/Button';
+import { Text } from '../../components/Text';
+
+// ============================================
+// Types
+// ============================================
+
+export interface LoginFormProps {
+  /** Called with email/password when the form is submitted */
+  onSubmit?: (data: { email: string; password: string }) => void;
+  /** Shows a loading state on the submit button */
+  loading?: boolean;
+  /** Error message displayed above the form fields */
+  error?: string;
+  /** Additional CSS class name */
+  className?: string;
+}
+
+// ============================================
+// Component
+// ============================================
+
+export const LoginForm = React.forwardRef<HTMLFormElement, LoginFormProps>(
+  function LoginForm({ onSubmit, loading = false, error, className }, ref) {
+    const [email, setEmail] = React.useState('');
+    const [password, setPassword] = React.useState('');
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      onSubmit?.({ email, password });
+    };
+
+    return (
+      <Card variant="elevated" className={className}>
+        <Card.Header>
+          <Card.Title>Sign In</Card.Title>
+          <Card.Description>
+            Welcome back! Please enter your details.
+          </Card.Description>
+        </Card.Header>
+        <Card.Body>
+          <form ref={ref} onSubmit={handleSubmit}>
+            <Stack gap="md">
+              {error && (
+                <div
+                  role="alert"
+                  style={{
+                    padding: 'var(--fui-space-2) var(--fui-space-3)',
+                    borderRadius: 'var(--fui-radius-md)',
+                    backgroundColor: 'var(--fui-color-danger-bg)',
+                    color: 'var(--fui-color-danger-text)',
+                    fontSize: 'var(--fui-font-size-sm)',
+                  }}
+                >
+                  {error}
+                </div>
+              )}
+              <Input
+                label="Email"
+                type="email"
+                placeholder="Enter your email"
+                value={email}
+                onChange={setEmail}
+                disabled={loading}
+              />
+              <Input
+                label="Password"
+                type="password"
+                placeholder="Enter your password"
+                value={password}
+                onChange={setPassword}
+                disabled={loading}
+              />
+              <div style={{ textAlign: 'right' }}>
+                <Text
+                  as="span"
+                  size="sm"
+                  color="secondary"
+                  style={{ cursor: 'pointer', textDecoration: 'underline' }}
+                >
+                  Forgot password?
+                </Text>
+              </div>
+              <Button
+                variant="primary"
+                fullWidth
+                type="submit"
+                disabled={loading}
+              >
+                {loading ? 'Signing in...' : 'Sign In'}
+              </Button>
+            </Stack>
+          </form>
+        </Card.Body>
+        <Card.Footer>
+          <Text size="sm" color="tertiary">
+            Don't have an account?{' '}
+            <Text
+              as="span"
+              size="sm"
+              style={{
+                color: 'var(--fui-color-accent)',
+                cursor: 'pointer',
+                textDecoration: 'underline',
+              }}
+            >
+              Sign up
+            </Text>
+          </Text>
+        </Card.Footer>
+      </Card>
+    );
+  }
+);

package/src/blocks/components/StatsCard.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import * as React from 'react';
+import { Card } from '../../components/Card';
+import { Stack } from '../../components/Stack';
+import { Text } from '../../components/Text';
+import { Badge } from '../../components/Badge';
+
+// ============================================
+// Types
+// ============================================
+
+export interface StatsCardProps {
+  /** Metric label displayed above the value */
+  title: string;
+  /** The primary metric value */
+  value: string | number;
+  /** Change indicator text (e.g., "+12.5%") */
+  change?: string;
+  /** Semantic variant for the change badge */
+  changeVariant?: 'success' | 'warning' | 'error';
+  /** Optional icon rendered in the top-right corner */
+  icon?: React.ReactNode;
+  /** Additional CSS class name */
+  className?: string;
+}
+
+// ============================================
+// Component
+// ============================================
+
+export const StatsCard = React.forwardRef<HTMLDivElement, StatsCardProps>(
+  function StatsCard(
+    { title, value, change, changeVariant = 'success', icon, className },
+    ref
+  ) {
+    return (
+      <Card className={className}>
+        <Card.Body>
+          <div ref={ref} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+            <Stack gap="xs">
+              <Text size="sm" color="tertiary">
+                {title}
+              </Text>
+              <Text as="p" size="2xl" weight="semibold">
+                {value}
+              </Text>
+              {change && (
+                <Stack direction="row" gap="xs" align="center">
+                  <Badge variant={changeVariant} size="sm">
+                    {change}
+                  </Badge>
+                </Stack>
+              )}
+            </Stack>
+            {icon && (
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  width: 40,
+                  height: 40,
+                  borderRadius: 'var(--fui-radius-md)',
+                  backgroundColor: 'var(--fui-bg-secondary)',
+                  color: 'var(--fui-text-secondary)',
+                  flexShrink: 0,
+                }}
+              >
+                {icon}
+              </div>
+            )}
+          </div>
+        </Card.Body>
+      </Card>
+    );
+  }
+);

package/src/blocks/components/index.ts

@@ -0,0 +1,14 @@
+export { StatsCard } from './StatsCard';
+export type { StatsCardProps } from './StatsCard';
+
+export { LoginForm } from './LoginForm';
+export type { LoginFormProps } from './LoginForm';
+
+export { ActivityFeed } from './ActivityFeed';
+export type { ActivityFeedProps, ActivityFeedItem } from './ActivityFeed';
+
+export { DashboardLayout } from './DashboardLayout';
+export type { DashboardLayoutProps } from './DashboardLayout';
+
+export { DataTable } from './DataTable';
+export type { DataTableProps, DataTableColumn } from './DataTable';

package/src/components/Accordion/index.tsx

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';
 import styles from './Accordion.module.scss';
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Alert/index.tsx

@@ -3,8 +3,6 @@
 import * as React from 'react';
 import { Button as BaseButton } from '@base-ui/react/button';
 import styles from './Alert.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/AppShell/index.tsx

@@ -8,8 +8,6 @@ import {
   useSidebar,
   type SidebarCollapsible,
 } from '../Sidebar';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Avatar/index.tsx

@@ -2,8 +2,6 @@
 
 import * as React from 'react';
 import styles from './Avatar.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Badge/Badge.module.scss

@@ -4,6 +4,7 @@
 .badge {
   display: inline-flex;
   align-items: center;
+  width: max-content;
   gap: var(--fui-space-1, $fui-space-1);
   border-radius: var(--fui-radius-full, $fui-radius-full);
   font-family: var(--fui-font-sans, $fui-font-sans);
@@ -23,6 +24,11 @@
   font-size: var(--fui-font-size-xs, $fui-font-size-xs);
 }
 
+.lg {
+  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-2, $fui-space-2);
+  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+}
+
 // Variants
 .default {
   background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);

package/src/components/Badge/index.tsx

@@ -3,13 +3,11 @@
 import * as React from 'react';
 import { Button as BaseButton } from '@base-ui/react/button';
 import styles from './Badge.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
   children: React.ReactNode;
   variant?: 'default' | 'success' | 'warning' | 'error' | 'info' | 'outline';
-  size?: 'sm' | 'md';
+  size?: 'sm' | 'md' | 'lg';
   dot?: boolean;
   icon?: React.ReactNode;
   onRemove?: () => void;

package/src/components/BentoGrid/index.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import styles from './BentoGrid.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Box/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import styles from './Box.module.scss';
-import '../../styles/globals.scss';
 
 export interface BoxProps {
   children?: React.ReactNode;

package/src/components/Breadcrumbs/index.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import styles from './Breadcrumbs.module.scss';
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Button/Button.module.scss

@@ -96,6 +96,21 @@
   }
 }
 
+.outlined {
+  background-color: transparent;
+  color: var(--fui-text-primary, $fui-text-primary);
+  border: 1px solid var(--fui-border-strong, $fui-border-strong);
+
+  &:hover:not(:disabled) {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+  }
+
+  &:active:not(:disabled),
+  &[data-pressed] {
+    background-color: var(--fui-bg-active, $fui-bg-active);
+  }
+}
+
 // Icon-only button (square aspect ratio)
 .icon {
   aspect-ratio: 1;
@@ -129,6 +144,11 @@
     border-color: var(--fui-text-primary, $fui-text-primary);
   }
 
+  .outlined {
+    border-width: 2px;
+    border-color: var(--fui-text-primary, $fui-text-primary);
+  }
+
   .ghost {
     border-width: 2px;
 

package/src/components/Button/index.tsx

@@ -3,12 +3,10 @@
 import * as React from 'react';
 import { Button as BaseButton } from '@base-ui/react/button';
 import styles from './Button.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 type ButtonBaseProps = {
   children: React.ReactNode;
-  variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+  variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'outlined';
   size?: 'sm' | 'md' | 'lg';
   /** Render as icon-only button (square aspect ratio) */
   icon?: boolean;

package/src/components/ButtonGroup/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import styles from './ButtonGroup.module.scss';
-import '../../styles/globals.scss';
 
 export interface ButtonGroupProps {
   children: React.ReactNode;

package/src/components/Card/index.tsx

@@ -2,8 +2,6 @@
 
 import * as React from 'react';
 import styles from './Card.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Checkbox/index.tsx

@@ -3,8 +3,6 @@
 import * as React from 'react';
 import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
 import styles from './Checkbox.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Chip/Chip.module.scss

@@ -34,6 +34,12 @@
   font-size: var(--fui-font-size-sm, $fui-font-size-sm);
 }
 
+.lg {
+  height: var(--fui-button-height-lg, $fui-button-height-lg);
+  padding: 0 var(--fui-space-4, $fui-space-4);
+  font-size: var(--fui-font-size-base, $fui-font-size-base);
+}
+
 // Variants
 .filled {
   background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);

package/src/components/Chip/index.tsx

@@ -2,14 +2,13 @@
 
 import * as React from 'react';
 import styles from './Chip.module.scss';
-import '../../styles/globals.scss';
 
 export interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
   children: React.ReactNode;
   /** Visual style variant */
   variant?: 'filled' | 'outlined' | 'soft';
   /** Size of the chip */
-  size?: 'sm' | 'md';
+  size?: 'sm' | 'md' | 'lg';
   /** Whether the chip is selected */
   selected?: boolean;
   /** Icon element rendered before the label */

package/src/components/ColorPicker/ColorPicker.module.scss

@@ -31,6 +31,25 @@
   // Default size - no overrides needed
 }
 
+.sizeLg {
+  .inputWrapper {
+    gap: var(--fui-space-3, $fui-space-3);
+  }
+
+  .swatch {
+    width: 48px;
+    height: var(--fui-input-height-lg, $fui-input-height-lg);
+  }
+
+  .hexInput {
+    min-width: 120px;
+  }
+
+  .label {
+    font-size: var(--fui-font-size-base, $fui-font-size-base);
+  }
+}
+
 .label {
   @include label-text;
   margin-bottom: var(--fui-space-1, $fui-space-1);

package/src/components/ColorPicker/index.tsx

@@ -41,7 +41,7 @@ export interface ColorPickerProps extends Omit<React.HTMLAttributes<HTMLDivEleme
   /** Disable the color picker */
   disabled?: boolean;
   /** Size variant */
-  size?: 'sm' | 'md';
+  size?: 'sm' | 'md' | 'lg';
   /** Show the hex input field */
   showInput?: boolean;
 }

package/src/components/Combobox/index.tsx

@@ -3,8 +3,6 @@
 import * as React from 'react';
 import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
 import styles from './Combobox.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Command/index.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import styles from './Command.module.scss';
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/ConversationList/index.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import styles from './ConversationList.module.scss';
-import '../../styles/globals.scss';
 import { Loading } from '../Loading';
 
 // ============================================

package/src/components/Dialog/index.tsx

@@ -3,8 +3,6 @@
 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

package/src/components/Drawer/index.tsx

@@ -3,8 +3,6 @@
 import * as React from 'react';
 import { Dialog as BaseDialog } from '@base-ui/react/dialog';
 import styles from './Drawer.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/EmptyState/index.tsx

@@ -2,8 +2,6 @@
 
 import * as React from 'react';
 import styles from './EmptyState.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Field/index.tsx

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { Field as BaseField, type FieldValidityState } from '@base-ui/react/field';
 import styles from './Field.module.scss';
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Fieldset/index.tsx

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { Fieldset as BaseFieldset } from '@base-ui/react/fieldset';
 import styles from './Fieldset.module.scss';
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Form/index.tsx

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { Form as BaseForm } from '@base-ui/react/form';
 import styles from './Form.module.scss';
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Grid/index.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import styles from './Grid.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Header/index.tsx

@@ -5,8 +5,6 @@ import { Menu as BaseMenu } from '@base-ui/react/menu';
 import { CaretDown, List, X } from '@phosphor-icons/react';
 import styles from './Header.module.scss';
 import { useSidebar } from '../Sidebar';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Icon/index.tsx

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import type { IconProps as PhosphorIconProps } from '@phosphor-icons/react';
 import styles from './Icon.module.scss';
-import '../../styles/globals.scss';
 
 export interface IconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {
   /** The Phosphor icon component to render */

package/src/components/Image/index.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import styles from './Image.module.scss';
-import '../../styles/globals.scss';
 
 export interface ImageProps {
   /** Image source URL */

package/src/components/Input/index.tsx

@@ -3,8 +3,6 @@
 import * as React from 'react';
 import { Field } from '@base-ui/react/field';
 import styles from './Input.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 export interface InputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'defaultValue'> {
   value?: string;

package/src/components/Link/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import styles from './Link.module.scss';
-import '../../styles/globals.scss';
 
 export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   children: React.ReactNode;

package/src/components/List/index.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import styles from './List.module.scss';
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Listbox/index.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import styles from './Listbox.module.scss';
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Loading/Loading.fragment.tsx

@@ -144,7 +144,7 @@ export default defineFragment({
       name: 'Screen',
       description: 'Full-screen loading state with optional label',
       render: () => (
-        <div style={{ position: 'relative', width: '300px', height: '200px', border: '1px solid #ccc', borderRadius: '8px', overflow: 'hidden' }}>
+        <div style={{ position: 'relative', width: '300px', height: '200px', border: '1px solid #ccc', borderRadius: '8px', overflow: 'hidden', transform: 'scale(1)' }}>
           <Loading.Screen size="lg" label="Loading application..." showLabel />
         </div>
       ),

package/src/components/Loading/index.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import styles from './Loading.module.scss';
-import '../../styles/globals.scss';
 
 // ============================================
 // Types

package/src/components/Menu/index.tsx

@@ -3,8 +3,6 @@
 import * as React from 'react';
 import { Menu as BaseMenu } from '@base-ui/react/menu';
 import styles from './Menu.module.scss';
-// Import globals to ensure CSS variables are defined
-import '../../styles/globals.scss';
 
 // ============================================
 // Types