@fragments-sdk/ui 0.3.0 → 0.5.0

package/src/components/Tabs/Tabs.fragment.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { defineSegment } from '@fragments/core';
-import { Tabs } from './index.js';
+import { Tabs } from '.';
 
 export default defineSegment({
   component: Tabs,
@@ -87,6 +87,15 @@ export default defineSegment({
     a11yRules: ['A11Y_TABS_KEYBOARD', 'A11Y_TABS_LABELS'],
   },
 
+  ai: {
+    compositionPattern: 'compound',
+    subComponents: ['List', 'Tab', 'Panel'],
+    requiredChildren: ['List', 'Panel'],
+    commonPatterns: [
+      '<Tabs defaultValue="tab1"><Tabs.List><Tabs.Tab value="tab1">{label1}</Tabs.Tab><Tabs.Tab value="tab2">{label2}</Tabs.Tab></Tabs.List><Tabs.Panel value="tab1">{content1}</Tabs.Panel><Tabs.Panel value="tab2">{content2}</Tabs.Panel></Tabs>',
+    ],
+  },
+
   variants: [
     {
       name: 'Underline',

package/src/components/Tabs/Tabs.module.scss

@@ -30,12 +30,14 @@
   }
 }
 
-// Variant: pills (no border, background tabs)
+// Variant: pills (shadcn-style with background container)
 .listPills {
   border-bottom: none;
-  background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
-  border-radius: var(--fui-radius-md, $fui-radius-md);
-  padding: var(--fui-space-1, $fui-space-1);
+  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
+  border-radius: var(--fui-radius-lg, $fui-radius-lg);
+  padding: var(--fui-space-0-75, $fui-space-0-75);
+  gap: var(--fui-space-0-75, $fui-space-0-75);
+  width: fit-content;
 }
 
 // Variant: underline (default, with indicator line)
@@ -53,7 +55,7 @@
   align-items: center;
   justify-content: center;
   gap: var(--fui-space-2, $fui-space-2);
-  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
+  padding: var(--fui-padding-item-sm, $fui-padding-item-sm) var(--fui-padding-item-md, $fui-padding-item-md);
   font-size: var(--fui-font-size-sm, $fui-font-size-sm);
   font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
   color: var(--fui-text-secondary, $fui-text-secondary);
@@ -78,18 +80,31 @@
 .tabUnderline {
   border-radius: 0;
   margin-bottom: -1px;
-  padding-bottom: calc(var(--fui-space-2, $fui-space-2) + 1px);
+  padding-bottom: calc(var(--fui-padding-item-sm, $fui-padding-item-sm) + 1px);
 
   &:hover:not([data-disabled]) {
     background-color: transparent;
   }
 }
 
-// Tab in pills variant
+// Tab in pills variant (shadcn-style)
 .tabPills {
+  border-radius: var(--fui-radius-md, $fui-radius-md);
+  transition: all 0.15s ease;
+  padding: var(--fui-space-1-5, 6px) var(--fui-space-3, $fui-space-3);
+  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+
+  &:hover:not([data-disabled]):not([data-active]) {
+    background-color: transparent;
+    color: var(--fui-text-primary, $fui-text-primary);
+  }
+
   &[data-active] {
-    background-color: var(--fui-bg-elevated, $fui-bg-elevated);
-    box-shadow: var(--fui-shadow-sm, $fui-shadow-sm);
+    background-color: var(--fui-bg-primary, $fui-bg-primary);
+    color: var(--fui-text-primary, $fui-text-primary);
+    box-shadow:
+      0 1px 3px 0 rgba(0, 0, 0, 0.1),
+      0 1px 2px -1px rgba(0, 0, 0, 0.1);
   }
 }
 
@@ -122,7 +137,7 @@
 
 // Tab panel content
 .panel {
-  padding: var(--fui-space-4, $fui-space-4) 0;
+  padding: var(--fui-padding-item-lg, $fui-padding-item-lg) 0;
   outline: none;
 
   &[data-hidden] {

package/src/components/Tabs/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { Tabs as BaseTabs } from '@base-ui/react/tabs';
 import styles from './Tabs.module.scss';
@@ -10,19 +12,17 @@ import '../../styles/globals.scss';
 
 export type TabValue = string | number;
 
-export interface TabsProps {
+export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue'> {
   children: React.ReactNode;
   defaultValue?: TabValue;
   value?: TabValue;
   onValueChange?: (value: TabValue) => void;
   orientation?: 'horizontal' | 'vertical';
-  className?: string;
 }
 
-export interface TabsListProps {
+export interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   variant?: 'underline' | 'pills';
-  className?: string;
 }
 
 export interface TabProps {
@@ -32,12 +32,11 @@ export interface TabProps {
   className?: string;
 }
 
-export interface TabsPanelProps {
+export interface TabsPanelProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   value: TabValue;
   keepMounted?: boolean;
   flush?: boolean;
-  className?: string;
 }
 
 // ============================================
@@ -57,11 +56,13 @@ function TabsRoot({
   onValueChange,
   orientation = 'horizontal',
   className,
+  ...htmlProps
 }: TabsProps) {
   const classes = [styles.root, className].filter(Boolean).join(' ');
 
   return (
     <BaseTabs.Root
+      {...htmlProps}
       defaultValue={defaultValue}
       value={value}
       onValueChange={onValueChange}
@@ -77,13 +78,14 @@ function TabsList({
   children,
   variant = 'underline',
   className,
+  ...htmlProps
 }: TabsListProps) {
   const variantClass = variant === 'pills' ? styles.listPills : styles.listUnderline;
   const classes = [styles.list, variantClass, className].filter(Boolean).join(' ');
 
   return (
     <TabsVariantContext.Provider value={variant}>
-      <BaseTabs.List className={classes}>
+      <BaseTabs.List {...htmlProps} className={classes}>
         {children}
         {variant === 'underline' && <BaseTabs.Indicator className={styles.indicator} />}
       </BaseTabs.List>
@@ -114,6 +116,7 @@ function TabsPanel({
   keepMounted = false,
   flush = false,
   className,
+  ...htmlProps
 }: TabsPanelProps) {
   const classes = [
     styles.panel,
@@ -122,7 +125,7 @@ function TabsPanel({
   ].filter(Boolean).join(' ');
 
   return (
-    <BaseTabs.Panel value={value} keepMounted={keepMounted} className={classes}>
+    <BaseTabs.Panel {...htmlProps} value={value} keepMounted={keepMounted} className={classes}>
       {children}
     </BaseTabs.Panel>
   );

package/src/components/Text/Text.fragment.tsx

@@ -0,0 +1,188 @@
+import React from 'react';
+import { defineSegment } from '@fragments/core';
+import { Text } from '.';
+
+export default defineSegment({
+  component: Text,
+
+  meta: {
+    name: 'Text',
+    description: 'Typography component for rendering text with consistent styling. Supports various sizes, weights, colors, and semantic elements.',
+    category: 'display',
+    status: 'stable',
+    tags: ['text', 'typography', 'heading', 'paragraph', 'font'],
+    since: '0.2.0',
+  },
+
+  usage: {
+    when: [
+      'Displaying text with specific typography styles',
+      'Creating headings, paragraphs, or labels',
+      'Text that needs truncation or line clamping',
+      'Consistent typography across the application',
+    ],
+    whenNot: [
+      'Complex rich text (use a rich text editor)',
+      'Code display (use CodeBlock)',
+      'Interactive text (use Link or Button)',
+    ],
+    guidelines: [
+      'Use semantic elements (h1-h6, p) via the "as" prop',
+      'Maintain heading hierarchy for accessibility',
+      'Use color variants sparingly for visual hierarchy',
+      'Consider truncation for user-generated content',
+    ],
+    accessibility: [
+      'Use proper heading levels (h1-h6) for document structure',
+      'Semantic elements convey meaning to screen readers',
+      'Truncated text should have full content in title/tooltip',
+    ],
+  },
+
+  props: {
+    children: {
+      type: 'node',
+      description: 'Text content',
+      required: true,
+    },
+    as: {
+      type: 'enum',
+      description: 'HTML element to render',
+      values: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'label', 'div', 'strong', 'em', 'small', 'code'],
+      default: 'span',
+    },
+    size: {
+      type: 'enum',
+      description: 'Font size',
+      values: ['2xs', 'xs', 'sm', 'base', 'lg', 'xl', '2xl'],
+    },
+    weight: {
+      type: 'enum',
+      description: 'Font weight',
+      values: ['normal', 'medium', 'semibold'],
+    },
+    color: {
+      type: 'enum',
+      description: 'Text color',
+      values: ['primary', 'secondary', 'tertiary'],
+    },
+    font: {
+      type: 'enum',
+      description: 'Font family',
+      values: ['sans', 'mono'],
+      default: 'sans',
+    },
+    truncate: {
+      type: 'boolean',
+      description: 'Truncate with ellipsis on overflow',
+    },
+    lineClamp: {
+      type: 'number',
+      description: 'Number of lines before truncating (requires truncate)',
+    },
+  },
+
+  relations: [
+    { component: 'Link', relationship: 'sibling', note: 'Use Link for clickable text' },
+    { component: 'CodeBlock', relationship: 'alternative', note: 'Use CodeBlock for code display' },
+    { component: 'Badge', relationship: 'sibling', note: 'Use Badge for labels/tags' },
+  ],
+
+  contract: {
+    propsSummary: [
+      'as: string - HTML element',
+      'size: 2xs|xs|sm|base|lg|xl|2xl - font size',
+      'weight: normal|medium|semibold - font weight',
+      'color: primary|secondary|tertiary - text color',
+      'font: sans|mono - font family',
+      'truncate: boolean - enable truncation',
+      'lineClamp: number - max lines',
+    ],
+    scenarioTags: [
+      'typography.text',
+      'display.content',
+      'semantic.elements',
+    ],
+    a11yRules: ['A11Y_HEADING_HIERARCHY', 'A11Y_SEMANTIC_ELEMENTS'],
+  },
+
+  variants: [
+    {
+      name: 'Sizes',
+      description: 'Different text sizes',
+      render: () => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          <Text size="2xs">Extra extra small (2xs)</Text>
+          <Text size="xs">Extra small (xs)</Text>
+          <Text size="sm">Small (sm)</Text>
+          <Text size="base">Base size</Text>
+          <Text size="lg">Large (lg)</Text>
+          <Text size="xl">Extra large (xl)</Text>
+          <Text size="2xl">Extra extra large (2xl)</Text>
+        </div>
+      ),
+    },
+    {
+      name: 'Weights',
+      description: 'Different font weights',
+      render: () => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          <Text weight="normal">Normal weight</Text>
+          <Text weight="medium">Medium weight</Text>
+          <Text weight="semibold">Semibold weight</Text>
+        </div>
+      ),
+    },
+    {
+      name: 'Colors',
+      description: 'Different text colors',
+      render: () => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          <Text color="primary">Primary color (default)</Text>
+          <Text color="secondary">Secondary color</Text>
+          <Text color="tertiary">Tertiary color</Text>
+        </div>
+      ),
+    },
+    {
+      name: 'Semantic Elements',
+      description: 'Using appropriate HTML elements',
+      render: () => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+          <Text as="h1" size="2xl" weight="semibold">Heading 1</Text>
+          <Text as="h2" size="xl" weight="semibold">Heading 2</Text>
+          <Text as="h3" size="lg" weight="medium">Heading 3</Text>
+          <Text as="p" color="secondary">
+            This is a paragraph of text that demonstrates the Text component
+            with semantic paragraph element.
+          </Text>
+        </div>
+      ),
+    },
+    {
+      name: 'Monospace',
+      description: 'Monospace font for code-like text',
+      render: () => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          <Text font="mono" size="sm">const greeting = "Hello, World!";</Text>
+          <Text font="mono" size="sm" color="secondary">npm install @fragments-sdk/ui</Text>
+        </div>
+      ),
+    },
+    {
+      name: 'Truncation',
+      description: 'Text truncation with ellipsis',
+      render: () => (
+        <div style={{ width: '200px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
+          <Text truncate>
+            This is a very long text that will be truncated with an ellipsis when it overflows.
+          </Text>
+          <Text truncate lineClamp={2}>
+            This text will be clamped to two lines. Any content beyond two lines
+            will be hidden and replaced with an ellipsis at the end.
+          </Text>
+        </div>
+      ),
+    },
+  ],
+});

package/src/components/Text/Text.module.scss

@@ -0,0 +1,82 @@
+@use '../../tokens/variables' as *;
+
+.text {
+  font-family: var(--fui-font-sans, $fui-font-sans);
+  margin: 0;
+}
+
+// Font sizes
+.size-2xs {
+  font-size: var(--fui-font-size-2xs, $fui-font-size-2xs);
+}
+
+.size-xs {
+  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+}
+
+.size-sm {
+  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+}
+
+.size-base {
+  font-size: var(--fui-font-size-base, $fui-font-size-base);
+}
+
+.size-lg {
+  font-size: var(--fui-font-size-lg, $fui-font-size-lg);
+}
+
+.size-xl {
+  font-size: var(--fui-font-size-xl, $fui-font-size-xl);
+}
+
+.size-2xl {
+  font-size: var(--fui-font-size-2xl, $fui-font-size-2xl);
+}
+
+// Font weights
+.weight-normal {
+  font-weight: var(--fui-font-weight-normal, $fui-font-weight-normal);
+}
+
+.weight-medium {
+  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+}
+
+.weight-semibold {
+  font-weight: var(--fui-font-weight-semibold, $fui-font-weight-semibold);
+}
+
+// Text colors
+.color-primary {
+  color: var(--fui-text-primary, $fui-text-primary);
+}
+
+.color-secondary {
+  color: var(--fui-text-secondary, $fui-text-secondary);
+}
+
+.color-tertiary {
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
+}
+
+// Font family
+.mono {
+  font-family: var(--fui-font-mono, $fui-font-mono);
+}
+
+// Truncation
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Line clamp (multi-line truncation)
+.lineClamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--fui-line-clamp, 2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/src/components/Text/index.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import styles from './Text.module.scss';
+import '../../styles/globals.scss';
+
+export interface TextProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'> {
+  children: React.ReactNode;
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'label' | 'div' | 'strong' | 'em' | 'small' | 'mark' | 'del' | 'ins' | 'sub' | 'sup' | 'time' | 'address' | 'blockquote' | 'cite' | 'code' | 'abbr';
+  size?: '2xs' | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl';
+  weight?: 'normal' | 'medium' | 'semibold';
+  color?: 'primary' | 'secondary' | 'tertiary';
+  font?: 'sans' | 'mono';
+  /** Truncate text with ellipsis when it overflows */
+  truncate?: boolean;
+  /** Number of lines before truncating (requires truncate=true) */
+  lineClamp?: number;
+}
+
+export const Text = React.forwardRef<HTMLElement, TextProps>(
+  function Text(
+    {
+      children,
+      as: Component = 'span',
+      size,
+      weight,
+      color,
+      font = 'sans',
+      truncate,
+      lineClamp,
+      className,
+      style,
+      ...htmlProps
+    },
+    ref
+  ) {
+    const classes = [
+      styles.text,
+      size && styles[`size-${size}`],
+      weight && styles[`weight-${weight}`],
+      color && styles[`color-${color}`],
+      font === 'mono' && styles.mono,
+      truncate && styles.truncate,
+      lineClamp && styles.lineClamp,
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    const lineClampStyle = lineClamp
+      ? { '--fui-line-clamp': lineClamp, ...style } as React.CSSProperties
+      : style;
+
+    return (
+      <Component ref={ref as React.Ref<never>} className={classes} style={lineClampStyle} {...htmlProps}>
+        {children}
+      </Component>
+    );
+  }
+);

package/src/components/Textarea/Textarea.fragment.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { defineSegment } from '@fragments/core';
-import { Textarea } from './index.js';
+import { Textarea } from '.';
 
 export default defineSegment({
   component: Textarea,

package/src/components/Textarea/index.tsx

@@ -3,7 +3,7 @@ import styles from './Textarea.module.scss';
 // Import globals to ensure CSS variables are defined
 import '../../styles/globals.scss';
 
-export interface TextareaProps {
+export interface TextareaProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur' | 'defaultValue'> {
   /** Controlled value */
   value?: string;
   /** Default value for uncontrolled usage */
@@ -30,12 +30,8 @@ export interface TextareaProps {
   onChange?: (value: string) => void;
   /** Called when textarea loses focus */
   onBlur?: () => void;
-  /** Additional class name */
-  className?: string;
   /** Form field name */
   name?: string;
-  /** Element ID */
-  id?: string;
   /** Maximum character length */
   maxLength?: number;
   /** Required field */
@@ -63,6 +59,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       id,
       maxLength,
       required = false,
+      ...htmlProps
     },
     ref
   ) {
@@ -73,7 +70,6 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       styles.textarea,
       error && styles.error,
       styles[`resize-${resize}`],
-      className,
     ]
       .filter(Boolean)
       .join(' ');
@@ -92,7 +88,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     }
 
     return (
-      <div className={styles.wrapper}>
+      <div {...htmlProps} className={[styles.wrapper, className].filter(Boolean).join(' ')}>
         {label && (
           <label htmlFor={textareaId} className={styles.label}>
             {label}