@syscore/ui-library 1.27.3 → 2.0.0-beta-publish-workflow-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syscore/ui-library",
-  "version": "1.27.3",
+  "version": "2.0.0-beta-publish-workflow-beta.2",
   "description": "A comprehensive React component library built with Radix UI, Tailwind CSS, and TypeScript",
   "private": false,
   "type": "module",

package/client/components/ui/badge.tsx

@@ -1,33 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const badgeVariants = cva(
-  "badge",
-  {
-    variants: {
-      variant: {
-        default: "badge--default",
-        secondary: "badge--secondary",
-        destructive: "badge--destructive",
-        outline: "badge--outline",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
-}
-
-export { Badge, badgeVariants };

package/client/components/ui/sonner.tsx

@@ -1,26 +0,0 @@
-import { useTheme } from "next-themes";
-import { Toaster as Sonner } from "sonner";
-
-type ToasterProps = React.ComponentProps<typeof Sonner>;
-
-const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme();
-
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster"
-      toastOptions={{
-        classNames: {
-          toast: "toast",
-          description: "toast-description",
-          actionButton: "toast-action",
-          cancelButton: "toast-cancel",
-        },
-      }}
-      {...props}
-    />
-  );
-};
-
-export { Toaster };

package/client/components/ui/toggle-group.tsx

@@ -1,76 +0,0 @@
-import * as React from "react";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
-
-const toggleVariants = cva(
-  "toggle-group-item",
-  {
-    variants: {
-      variant: {
-        default: "toggle-group-item--default",
-      },
-      size: {
-        default: "toggle-group-item--size-default",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants>
->({
-  size: "default",
-  variant: "default",
-});
-
-const ToggleGroup = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
-    VariantProps<typeof toggleVariants>
->(({ className, variant, size, children, ...props }, ref) => (
-  <ToggleGroupPrimitive.Root
-    ref={ref}
-    className={cn("toggle-group", className)}
-    {...props}
-  >
-    <ToggleGroupContext.Provider value={{ variant, size }}>
-      {children}
-    </ToggleGroupContext.Provider>
-  </ToggleGroupPrimitive.Root>
-));
-
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-
-const ToggleGroupItem = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-    VariantProps<typeof toggleVariants>
->(({ className, children, variant, size, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext);
-
-  return (
-    <ToggleGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  );
-});
-
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
-
-export { ToggleGroup, ToggleGroupItem };

package/client/ui/Alert/Alert.stories.tsx

@@ -1,82 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Alert, AlertTitle, AlertDescription } from "../../components/ui/alert";
-import { AlertCircle, Terminal, CheckCircle2 } from "lucide-react";
-
-const meta = {
-  title: "UI/Alert",
-  component: Alert,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "padded",
-  },
-} satisfies Meta<typeof Alert>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <Alert>
-      <Terminal className="h-4 w-4" />
-      <AlertTitle>Heads up!</AlertTitle>
-      <AlertDescription>
-        You can add components to your app using the code below.
-      </AlertDescription>
-    </Alert>
-  ),
-};
-
-export const Destructive: Story = {
-  render: () => (
-    <Alert variant="destructive">
-      <AlertCircle className="h-4 w-4" />
-      <AlertTitle>Error</AlertTitle>
-      <AlertDescription>
-        Your session has expired. Please log in again.
-      </AlertDescription>
-    </Alert>
-  ),
-};
-
-export const Success: Story = {
-  render: () => (
-    <Alert>
-      <CheckCircle2 className="h-4 w-4" />
-      <AlertTitle>Success</AlertTitle>
-      <AlertDescription>
-        Your changes have been saved successfully.
-      </AlertDescription>
-    </Alert>
-  ),
-};
-
-export const AllVariants: Story = {
-  render: () => (
-    <div className="space-y-4 max-w-md">
-      <Alert>
-        <Terminal className="h-4 w-4" />
-        <AlertTitle>Heads up!</AlertTitle>
-        <AlertDescription>
-          You can add components to your app using the code below.
-        </AlertDescription>
-      </Alert>
-
-      <Alert variant="destructive">
-        <AlertCircle className="h-4 w-4" />
-        <AlertTitle>Error</AlertTitle>
-        <AlertDescription>
-          Your session has expired. Please log in again.
-        </AlertDescription>
-      </Alert>
-
-      <Alert>
-        <CheckCircle2 className="h-4 w-4" />
-        <AlertTitle>Success</AlertTitle>
-        <AlertDescription>
-          Your changes have been saved successfully.
-        </AlertDescription>
-      </Alert>
-    </div>
-  ),
-};

package/client/ui/AlertDialog/AlertDialog.stories.tsx

@@ -1,106 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import {
-  AlertDialog,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogAction,
-  AlertDialogCancel,
-} from "../../components/ui/alert-dialog";
-import { Button } from "../../components/ui/button";
-import { useState } from "react";
-
-const meta = {
-  title: "UI/AlertDialog",
-  component: AlertDialog,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof AlertDialog>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false);
-    return (
-      <AlertDialog open={open} onOpenChange={setOpen}>
-        <AlertDialogTrigger asChild>
-          <Button>Open Alert</Button>
-        </AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Confirm Action</AlertDialogTitle>
-            <AlertDialogDescription>
-              Are you sure you want to proceed with this action?
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction>Continue</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    );
-  },
-};
-
-export const Delete: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false);
-    return (
-      <AlertDialog open={open} onOpenChange={setOpen}>
-        <AlertDialogTrigger asChild>
-          <Button variant="destructive">Delete Item</Button>
-        </AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
-            <AlertDialogDescription>
-              This action cannot be undone. This will permanently delete the
-              item.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
-              Delete
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    );
-  },
-};
-
-export const Warning: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false);
-    return (
-      <AlertDialog open={open} onOpenChange={setOpen}>
-        <AlertDialogTrigger asChild>
-          <Button variant="outline">Show Warning</Button>
-        </AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Warning</AlertDialogTitle>
-            <AlertDialogDescription>
-              This action will have significant consequences. Please confirm
-              that you understand the risks.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction>I Understand</AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    );
-  },
-};

package/client/ui/Avatar/Avatar.stories.tsx

@@ -1,94 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import {
-  Avatar,
-  AvatarImage,
-  AvatarFallback,
-} from "../../components/ui/avatar";
-
-const meta = {
-  title: "UI/Avatar",
-  component: Avatar,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-  },
-} satisfies Meta<typeof Avatar>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <Avatar>
-      <AvatarImage src="https://github.com/shadcn.png" />
-      <AvatarFallback>CN</AvatarFallback>
-    </Avatar>
-  ),
-};
-
-export const Fallback: Story = {
-  render: () => (
-    <Avatar>
-      <AvatarImage src="" />
-      <AvatarFallback>JD</AvatarFallback>
-    </Avatar>
-  ),
-};
-
-export const Multiple: Story = {
-  render: () => (
-    <div className="flex gap-4">
-      <Avatar>
-        <AvatarImage src="https://github.com/shadcn.png" />
-        <AvatarFallback>CN</AvatarFallback>
-      </Avatar>
-      <Avatar>
-        <AvatarImage src="" />
-        <AvatarFallback>JD</AvatarFallback>
-      </Avatar>
-      <Avatar>
-        <AvatarImage src="" />
-        <AvatarFallback>AB</AvatarFallback>
-      </Avatar>
-      <Avatar>
-        <AvatarImage src="" />
-        <AvatarFallback>XY</AvatarFallback>
-      </Avatar>
-    </div>
-  ),
-};
-
-export const WithUser: Story = {
-  render: () => (
-    <div className="flex items-center gap-3">
-      <Avatar>
-        <AvatarImage src="" />
-        <AvatarFallback>JD</AvatarFallback>
-      </Avatar>
-      <div>
-        <p className="text-sm font-semibold">John Doe</p>
-        <p className="text-xs text-gray-600">john@example.com</p>
-      </div>
-    </div>
-  ),
-};
-
-export const Sizes: Story = {
-  render: () => (
-    <div className="flex items-center gap-4">
-      <Avatar className="h-8 w-8">
-        <AvatarImage src="" />
-        <AvatarFallback>CN</AvatarFallback>
-      </Avatar>
-      <Avatar>
-        <AvatarImage src="" />
-        <AvatarFallback>CN</AvatarFallback>
-      </Avatar>
-      <Avatar className="h-16 w-16">
-        <AvatarImage src="" />
-        <AvatarFallback>CN</AvatarFallback>
-      </Avatar>
-    </div>
-  ),
-};

package/client/ui/Badge/Badge.stories.tsx

@@ -1,60 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Badge } from "../../components/ui/badge";
-
-const meta = {
-  title: "UI/Badge",
-  component: Badge,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "centered",
-  },
-  argTypes: {
-    variant: {
-      control: { type: "select" },
-      options: ["default", "secondary", "destructive", "outline-solid"],
-    },
-  },
-} satisfies Meta<typeof Badge>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: "Default",
-    variant: "default",
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    children: "Secondary",
-    variant: "secondary",
-  },
-};
-
-export const Destructive: Story = {
-  args: {
-    children: "Destructive",
-    variant: "destructive",
-  },
-};
-
-export const Outline: Story = {
-  args: {
-    children: "Outline",
-    variant: "outline",
-  },
-};
-
-export const AllVariants: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-4">
-      <Badge variant="default">Default</Badge>
-      <Badge variant="secondary">Secondary</Badge>
-      <Badge variant="destructive">Destructive</Badge>
-      <Badge variant="outline">Outline</Badge>
-    </div>
-  ),
-};

package/client/ui/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,97 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "../../components/ui/breadcrumb";
-import { ChevronRight } from "lucide-react";
-
-const meta = {
-  title: "UI/Breadcrumb",
-  component: Breadcrumb,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "padded",
-  },
-} satisfies Meta<typeof Breadcrumb>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/docs">Documentation</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbPage>Getting Started</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  ),
-};
-
-export const WithCustomSeparator: Story = {
-  render: () => (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <ChevronRight className="h-4 w-4" />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/products">Products</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator>
-          <ChevronRight className="h-4 w-4" />
-        </BreadcrumbSeparator>
-        <BreadcrumbItem>
-          <BreadcrumbPage>Product Details</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  ),
-};
-
-export const Long: Story = {
-  render: () => (
-    <Breadcrumb>
-      <BreadcrumbList>
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbLink href="/docs/components/breadcrumb">
-            Breadcrumb
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        <BreadcrumbSeparator />
-        <BreadcrumbItem>
-          <BreadcrumbPage>Implementation</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
-  ),
-};