@usefragments/ui 1.0.2 → 1.2.0

package/dist/components/Cloud/PullRequestsPrototypes.detail.d.ts

@@ -1,3 +0,0 @@
-export declare function PullRequestDecisionActions(): import("react/jsx-runtime").JSX.Element;
-export declare function PullRequestDetail(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=PullRequestsPrototypes.detail.d.ts.map

package/dist/components/Cloud/PullRequestsPrototypes.detail.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PullRequestsPrototypes.detail.d.ts","sourceRoot":"","sources":["../../../src/components/Cloud/PullRequestsPrototypes.detail.tsx"],"names":[],"mappings":"AAgCA,wBAAgB,0BAA0B,4CAuBzC;AAED,wBAAgB,iBAAiB,4CA2BhC"}

package/dist/components/Cloud/PullRequestsPrototypes.id-data.d.ts

@@ -1,86 +0,0 @@
-import type { StateVariant } from "./DashboardLayoutPrototypes.shared";
-export type CheckState = "failed" | "passed" | "warning";
-export type GithubCheck = {
-    name: string;
-    state: CheckState;
-    label: string;
-    variant: StateVariant;
-    summary: string;
-    duration: string;
-};
-export type GithubComment = {
-    id: string;
-    author: string;
-    status: string;
-    variant: StateVariant;
-    file: string;
-    line: number;
-    body: string;
-    designerSignal: string;
-};
-export type ImpactArea = {
-    area: string;
-    criticality: string;
-    coverage: string;
-    findings: string;
-    owner: string;
-    review: string;
-    variant: StateVariant;
-};
-export type FindingSeverity = "Blocking" | "Safe fix" | "Review";
-/** How a finding can be remediated — drives the per-row action verb. */
-export type FixKind = "Deterministic" | "Proposed" | "Manual";
-export type PrFinding = {
-    id: string;
-    /** Versioned diagnostic code (FUI####). */
-    code: string;
-    /** Rule family the finding belongs to. */
-    rule: string;
-    severity: FindingSeverity;
-    variant: StateVariant;
-    /** Introduced by this PR (gates merge) vs. pre-existing legacy debt (never gates). */
-    origin: "Introduced" | "Legacy";
-    file: string;
-    line: number;
-    area: string;
-    /** Call-sites this single finding-family touches in the PR — the bulk-action rationale. */
-    occurrences: number;
-    fix: FixKind;
-    suggestion: string;
-    body: string;
-    designerSignal?: string;
-    /** Surfaced as a human-readable review thread in the Conversation tab. */
-    thread?: boolean;
-};
-export type Reviewer = {
-    name: string;
-    status: string;
-    variant: StateVariant;
-};
-export type ChangedFile = {
-    path: string;
-    area: string;
-    additions: number;
-    deletions: number;
-    findings: number;
-};
-export declare const prIdPagePullRequest: {
-    number: number;
-    title: string;
-    branch: string;
-    author: string;
-    coverageBefore: number;
-    coverageAfter: number;
-    comments: number;
-    safeFixes: number;
-};
-export declare const githubChecks: GithubCheck[];
-export declare const impactAreas: ImpactArea[];
-export declare const prFindings: PrFinding[];
-export declare const blockingFindings: PrFinding[];
-export declare const introducedFindings: PrFinding[];
-export declare const threadFindings: PrFinding[];
-export declare const githubComments: GithubComment[];
-export declare const reviewers: Reviewer[];
-export declare const changedFiles: ChangedFile[];
-//# sourceMappingURL=PullRequestsPrototypes.id-data.d.ts.map

package/dist/components/Cloud/PullRequestsPrototypes.id-data.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PullRequestsPrototypes.id-data.d.ts","sourceRoot":"","sources":["../../../src/components/Cloud/PullRequestsPrototypes.id-data.ts"],"names":[],"mappings":"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"}

package/dist/components/Cloud/PullRequestsPrototypes.id-page.d.ts

@@ -1,2 +0,0 @@
-export declare function PullRequestIdPage(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=PullRequestsPrototypes.id-page.d.ts.map

package/dist/components/Cloud/PullRequestsPrototypes.id-page.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PullRequestsPrototypes.id-page.d.ts","sourceRoot":"","sources":["../../../src/components/Cloud/PullRequestsPrototypes.id-page.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,iBAAiB,4CAWhC"}

package/src/components/Accordion/Accordion.stories.tsx

@@ -1,106 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Accordion } from '.';
-
-/**
- * Accordion presents vertically stacked, collapsible content sections for
- * progressive disclosure. It is a compound component: compose Accordion.Item,
- * Accordion.Trigger, and Accordion.Content inside the root.
- */
-const meta = {
-  title: 'Layout/Accordion',
-  component: Accordion,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Vertically stacked, collapsible content sections for progressive disclosure.',
-      },
-    },
-  },
-  argTypes: {
-    type: {
-      control: 'select',
-      options: ['single', 'multiple'],
-      description: 'Whether one or multiple items can be open',
-    },
-    collapsible: {
-      control: 'boolean',
-      description: 'Whether all items can be closed (single mode only)',
-    },
-    headingLevel: {
-      control: 'select',
-      options: ['2', '3', '4', '5', '6'],
-      description: 'Semantic heading level for accordion triggers',
-    },
-  },
-  args: {
-    type: 'single',
-    collapsible: true,
-    children: (
-      <Accordion.Item value="item-1">
-        <Accordion.Trigger>Section</Accordion.Trigger>
-        <Accordion.Content>Collapsible content.</Accordion.Content>
-      </Accordion.Item>
-    ),
-  },
-} satisfies Meta<typeof Accordion>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Single: Story = {
-  render: () => (
-    <Accordion type="single" collapsible defaultValue="item-1">
-      <Accordion.Item value="item-1">
-        <Accordion.Trigger>What is Fragments UI?</Accordion.Trigger>
-        <Accordion.Content>
-          A React component library built on Base UI primitives.
-        </Accordion.Content>
-      </Accordion.Item>
-      <Accordion.Item value="item-2">
-        <Accordion.Trigger>How do I install it?</Accordion.Trigger>
-        <Accordion.Content>Install via pnpm add @usefragments/ui.</Accordion.Content>
-      </Accordion.Item>
-      <Accordion.Item value="item-3">
-        <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
-        <Accordion.Content>Yes, all components follow WAI-ARIA guidelines.</Accordion.Content>
-      </Accordion.Item>
-    </Accordion>
-  ),
-};
-
-export const Multiple: Story = {
-  render: () => (
-    <Accordion type="multiple" defaultValue={['features', 'pricing']}>
-      <Accordion.Item value="features">
-        <Accordion.Trigger>Features</Accordion.Trigger>
-        <Accordion.Content>Comprehensive components with theming support.</Accordion.Content>
-      </Accordion.Item>
-      <Accordion.Item value="pricing">
-        <Accordion.Trigger>Pricing</Accordion.Trigger>
-        <Accordion.Content>Free and open source, MIT licensed.</Accordion.Content>
-      </Accordion.Item>
-      <Accordion.Item value="support">
-        <Accordion.Trigger>Support</Accordion.Trigger>
-        <Accordion.Content>Community support via GitHub.</Accordion.Content>
-      </Accordion.Item>
-    </Accordion>
-  ),
-};
-
-export const WithDisabledItem: Story = {
-  render: () => (
-    <Accordion type="single" collapsible>
-      <Accordion.Item value="available">
-        <Accordion.Trigger>Available Section</Accordion.Trigger>
-        <Accordion.Content>This section can be expanded and collapsed.</Accordion.Content>
-      </Accordion.Item>
-      <Accordion.Item value="disabled" disabled>
-        <Accordion.Trigger>Disabled Section</Accordion.Trigger>
-        <Accordion.Content>This content is not accessible.</Accordion.Content>
-      </Accordion.Item>
-    </Accordion>
-  ),
-};

package/src/components/Alert/Alert.stories.tsx

@@ -1,119 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Alert } from '.';
-
-/**
- * Alert surfaces contextual feedback messages tied to user actions or system
- * status. It is a compound component: compose Alert.Icon, Alert.Body,
- * Alert.Title, Alert.Content, Alert.Actions, Alert.Action, and Alert.Close.
- */
-const meta = {
-  title: 'Feedback/Alert',
-  component: Alert,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Contextual feedback messages for user actions or system status with severity levels.',
-      },
-    },
-  },
-  argTypes: {
-    severity: {
-      control: 'select',
-      options: ['info', 'success', 'warning', 'error'],
-      description: 'Visual severity level',
-    },
-  },
-  args: {
-    severity: 'info',
-    children: (
-      <>
-        <Alert.Icon />
-        <Alert.Body>
-          <Alert.Content>Your session will expire in 15 minutes.</Alert.Content>
-        </Alert.Body>
-      </>
-    ),
-  },
-} satisfies Meta<typeof Alert>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Info: Story = {
-  render: () => (
-    <Alert severity="info">
-      <Alert.Icon />
-      <Alert.Body>
-        <Alert.Content>
-          Your session will expire in 15 minutes. Save your work to avoid losing changes.
-        </Alert.Content>
-      </Alert.Body>
-    </Alert>
-  ),
-};
-
-export const Success: Story = {
-  render: () => (
-    <Alert severity="success">
-      <Alert.Icon />
-      <Alert.Body>
-        <Alert.Title>Payment processed</Alert.Title>
-        <Alert.Content>Your order #12345 has been confirmed.</Alert.Content>
-      </Alert.Body>
-    </Alert>
-  ),
-};
-
-export const Warning: Story = {
-  render: () => (
-    <Alert severity="warning">
-      <Alert.Icon />
-      <Alert.Body>
-        <Alert.Title>Storage almost full</Alert.Title>
-        <Alert.Content>You have used 90% of your storage quota.</Alert.Content>
-      </Alert.Body>
-    </Alert>
-  ),
-};
-
-export const Error: Story = {
-  render: () => (
-    <Alert severity="error">
-      <Alert.Icon />
-      <Alert.Body>
-        <Alert.Title>Upload failed</Alert.Title>
-        <Alert.Content>The file could not be uploaded. Try again.</Alert.Content>
-      </Alert.Body>
-    </Alert>
-  ),
-};
-
-export const WithAction: Story = {
-  render: () => (
-    <Alert severity="warning">
-      <Alert.Icon />
-      <Alert.Body>
-        <Alert.Title>Update available</Alert.Title>
-        <Alert.Content>A new version is available with security fixes.</Alert.Content>
-        <Alert.Actions>
-          <Alert.Action onClick={() => {}}>Update now</Alert.Action>
-        </Alert.Actions>
-      </Alert.Body>
-    </Alert>
-  ),
-};
-
-export const Dismissible: Story = {
-  render: () => (
-    <Alert severity="info">
-      <Alert.Icon />
-      <Alert.Body>
-        <Alert.Content>You can customize notification preferences in Settings.</Alert.Content>
-      </Alert.Body>
-      <Alert.Close />
-    </Alert>
-  ),
-};

package/src/components/AppShell/AppShell.stories.tsx

@@ -1,156 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { AppShell } from ".";
-import { Header } from "../Header";
-import { Sidebar } from "../Sidebar";
-
-/**
- * AppShell is the full application layout wrapper integrating header, sidebar,
- * main content, and an optional aside panel. It is a compound component:
- * compose AppShell.Header, AppShell.Sidebar, AppShell.Main, and AppShell.Aside.
- */
-const meta = {
-  title: "Layout/AppShell",
-  component: AppShell,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Full layout wrapper integrating sidebar, header, main content, and optional aside panel.",
-      },
-    },
-  },
-  argTypes: {
-    layout: {
-      control: "select",
-      options: ["default", "sidebar", "sidebar-floating", "floating"],
-      description: "Structural layout for CSS grid areas",
-    },
-    bg: {
-      control: "text",
-      description: "Background color override for the shell container",
-    },
-  },
-  args: {
-    layout: "default",
-    children: (
-      <>
-        <AppShell.Header>
-          <Header>
-            <Header.Brand>MyApp</Header.Brand>
-          </Header>
-        </AppShell.Header>
-        <AppShell.Sidebar width="200px">
-          <Sidebar.Nav>
-            <Sidebar.Section label="Menu">
-              <Sidebar.Item active>Home</Sidebar.Item>
-            </Sidebar.Section>
-          </Sidebar.Nav>
-        </AppShell.Sidebar>
-        <AppShell.Main padding="md">Content</AppShell.Main>
-      </>
-    ),
-  },
-} satisfies Meta<typeof AppShell>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const DefaultLayout: Story = {
-  render: () => (
-    <div style={{ height: "360px", overflow: "hidden" }}>
-      <AppShell layout="default">
-        <AppShell.Header>
-          <Header>
-            <Header.Brand>MyApp</Header.Brand>
-          </Header>
-        </AppShell.Header>
-        <AppShell.Sidebar width="200px" collapsible="offcanvas">
-          <Sidebar.Nav>
-            <Sidebar.Section label="Menu">
-              <Sidebar.Item active>Home</Sidebar.Item>
-              <Sidebar.Item>Analytics</Sidebar.Item>
-              <Sidebar.Item>Settings</Sidebar.Item>
-            </Sidebar.Section>
-          </Sidebar.Nav>
-        </AppShell.Sidebar>
-        <AppShell.Main padding="md">Header spans full width. Logo is in the header.</AppShell.Main>
-      </AppShell>
-    </div>
-  ),
-};
-
-export const SidebarLayout: Story = {
-  render: () => (
-    <div style={{ height: "360px", overflow: "hidden" }}>
-      <AppShell layout="sidebar">
-        <AppShell.Header>
-          <Header>
-            <Header.Trigger />
-          </Header>
-        </AppShell.Header>
-        <AppShell.Sidebar width="200px" collapsible="offcanvas">
-          <Sidebar.Header>MyApp</Sidebar.Header>
-          <Sidebar.Nav>
-            <Sidebar.Section label="Menu">
-              <Sidebar.Item active>Home</Sidebar.Item>
-              <Sidebar.Item>Analytics</Sidebar.Item>
-            </Sidebar.Section>
-          </Sidebar.Nav>
-        </AppShell.Sidebar>
-        <AppShell.Main padding="md">Sidebar is full height. Logo is in the sidebar.</AppShell.Main>
-      </AppShell>
-    </div>
-  ),
-};
-
-export const WithAside: Story = {
-  render: () => (
-    <div style={{ height: "360px", overflow: "hidden" }}>
-      <AppShell layout="default">
-        <AppShell.Header>
-          <Header>
-            <Header.Brand>App</Header.Brand>
-          </Header>
-        </AppShell.Header>
-        <AppShell.Sidebar width="180px" collapsible="offcanvas">
-          <Sidebar.Nav>
-            <Sidebar.Section>
-              <Sidebar.Item active>Home</Sidebar.Item>
-            </Sidebar.Section>
-          </Sidebar.Nav>
-        </AppShell.Sidebar>
-        <AppShell.Main padding="md">Content with an aside panel on the right.</AppShell.Main>
-        <AppShell.Aside width="180px">
-          Additional context, filters, or quick actions.
-        </AppShell.Aside>
-      </AppShell>
-    </div>
-  ),
-};
-
-export const FloatingMain: Story = {
-  render: () => (
-    <div style={{ height: "360px", overflow: "hidden" }}>
-      <AppShell layout="sidebar">
-        <AppShell.Header>
-          <Header>
-            <Header.Trigger />
-          </Header>
-        </AppShell.Header>
-        <AppShell.Sidebar width="200px" collapsible="offcanvas" variant="floating">
-          <Sidebar.Header>MyApp</Sidebar.Header>
-          <Sidebar.Nav>
-            <Sidebar.Section label="Menu">
-              <Sidebar.Item active>Home</Sidebar.Item>
-            </Sidebar.Section>
-          </Sidebar.Nav>
-        </AppShell.Sidebar>
-        <AppShell.Main padding="md" variant="floating">
-          Main content has rounded corners and visual separation from the sidebar.
-        </AppShell.Main>
-      </AppShell>
-    </div>
-  ),
-};

package/src/components/Avatar/Avatar.stories.tsx

@@ -1,74 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Avatar } from '.';
-
-/**
- * Avatar is the visual representation of a user or entity. It renders an image
- * when available and falls back to initials or a placeholder icon. Use
- * Avatar.Group to stack multiple avatars in a row.
- */
-const meta = {
-  title: 'Display/Avatar',
-  component: Avatar,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: { component: 'Visual representation of a user or entity.' },
-    },
-  },
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['xs', 'sm', 'md', 'lg', 'xl'],
-      description: 'Size variant',
-    },
-    shape: {
-      control: 'select',
-      options: ['circle', 'square'],
-      description: 'Shape variant',
-    },
-    src: { control: 'text', description: 'Image source URL' },
-    name: { control: 'text', description: 'Full name - used to generate initials' },
-    initials: { control: 'text', description: 'Fallback initials (1-2 characters)' },
-  },
-  args: {
-    name: 'Jane Doe',
-    size: 'md',
-    shape: 'circle',
-  },
-} satisfies Meta<typeof Avatar>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const WithImage: Story = {
-  args: {
-    src: 'https://i.pravatar.cc/150?u=jane',
-    alt: 'Jane Doe',
-    name: 'Jane Doe',
-  },
-};
-
-export const WithInitials: Story = {
-  args: { name: 'John Smith' },
-};
-
-export const Large: Story = {
-  args: { name: 'Conan McNicholl', size: 'xl' },
-};
-
-export const Square: Story = {
-  args: { name: 'App', shape: 'square' },
-};
-
-export const Group: Story = {
-  render: () => (
-    <Avatar.Group max={3} size="md">
-      <Avatar name="Alice Johnson" />
-      <Avatar name="Bob Smith" />
-      <Avatar name="Carol Williams" />
-      <Avatar name="David Brown" />
-      <Avatar name="Eve Davis" />
-    </Avatar.Group>
-  ),
-};

package/src/components/Badge/Badge.stories.tsx

@@ -1,92 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Badge } from ".";
-
-/**
- * Badge is a compact label for status, counts, or categorization. It draws
- * attention to metadata without dominating the layout and supports semantic
- * variants, an optional status dot, and a removable affordance.
- */
-const meta = {
-  title: "Display/Badge",
-  component: Badge,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: "Compact label for status, counts, or categorization.",
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["default", "success", "warning", "error", "info", "outline"],
-      description: "Visual style indicating severity or category",
-    },
-    size: {
-      control: "select",
-      options: ["sm", "md", "lg"],
-      description: "Badge size",
-    },
-    dot: {
-      control: "boolean",
-      description: "Show a colored dot indicator before the label",
-    },
-    announce: {
-      control: "boolean",
-      description: 'Opt into role="status" live announcement semantics',
-    },
-  },
-  args: {
-    variant: "default",
-    size: "md",
-    children: "Default",
-  },
-} satisfies Meta<typeof Badge>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { variant: "default", children: "Default" },
-};
-
-export const Success: Story = {
-  args: { variant: "success", children: "Active" },
-};
-
-export const Error: Story = {
-  args: { variant: "error", children: "Failed" },
-};
-
-export const SemanticStatus: Story = {
-  render: () => (
-    <div style={{ display: "flex", gap: "var(--fui-space-2)", alignItems: "center" }}>
-      <Badge variant="success" size="lg">
-        Delivered
-      </Badge>
-      <Badge variant="error" size="lg">
-        Bounced
-      </Badge>
-      <Badge variant="warning" size="lg">
-        Delayed
-      </Badge>
-      <Badge variant="info" size="lg">
-        Queued
-      </Badge>
-    </div>
-  ),
-};
-
-export const WithDot: Story = {
-  args: { variant: "success", dot: true, children: "Online" },
-};
-
-export const Outline: Story = {
-  args: { variant: "outline", children: "Outline" },
-};
-
-export const Removable: Story = {
-  args: { variant: "info", children: "React", onRemove: () => {} },
-};