@mostrom/app-shell 0.1.1 → 0.1.3

package/src/components/ui/button.tsx

@@ -19,6 +19,10 @@ const buttonVariants = cva(
         ghost:
           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
+        // Semantic variants
+        primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+        normal:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
       },
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -43,10 +47,12 @@ function Button({
   variant = "default",
   size = "default",
   asChild = false,
+  fullWidth = false,
   ...props
 }: React.ComponentProps<"button"> &
   VariantProps<typeof buttonVariants> & {
     asChild?: boolean
+    fullWidth?: boolean
   }) {
   const Comp = asChild ? Slot.Root : "button"
 
@@ -55,7 +61,7 @@ function Button({
       data-slot="button"
       data-variant={variant}
       data-size={size}
-      className={cn(buttonVariants({ variant, size, className }))}
+      className={cn(buttonVariants({ variant, size, className }), fullWidth && "w-full")}
       {...props}
     />
   )

package/src/components/ui/index.ts

@@ -1,5 +1,6 @@
 // UI Components (shadcn/ui + reui)
 export * from "./avatar";
+export * from "./badge";
 export * from "./breadcrumb";
 export * from "./button";
 export * from "./button-group";
@@ -24,6 +25,7 @@ export * from "./scroll-area";
 export * from "./select";
 export * from "./separator";
 export * from "./sheet";
+export * from "./space-between";
 export * from "./sidebar";
 export * from "./skeleton";
 export * from "./sonner";

package/src/components/ui/space-between.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const spaceBetweenVariants = cva("flex", {
+  variants: {
+    direction: {
+      vertical: "flex-col",
+      horizontal: "flex-row",
+    },
+    size: {
+      xxxs: "gap-0.5",  // 2px
+      xxs: "gap-1",     // 4px
+      xs: "gap-2",      // 8px
+      s: "gap-3",       // 12px
+      m: "gap-4",       // 16px
+      l: "gap-6",       // 24px
+      xl: "gap-8",      // 32px
+      xxl: "gap-10",    // 40px
+    },
+    alignItems: {
+      center: "items-center",
+      start: "items-start",
+      end: "items-end",
+      baseline: "items-baseline",
+      stretch: "items-stretch",
+    },
+  },
+  defaultVariants: {
+    direction: "vertical",
+    size: "m",
+    alignItems: "stretch",
+  },
+})
+
+export interface SpaceBetweenProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof spaceBetweenVariants> {}
+
+function SpaceBetween({
+  className,
+  direction,
+  size,
+  alignItems,
+  children,
+  ...props
+}: SpaceBetweenProps) {
+  return (
+    <div
+      data-slot="space-between"
+      className={cn(spaceBetweenVariants({ direction, size, alignItems }), className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+export { SpaceBetween, spaceBetweenVariants }

package/src/index.ts

@@ -39,7 +39,7 @@ export type {
 export { AppLayout } from "./components/layout/AppLayout";
 export type { AppLayoutProps } from "./components/layout/AppLayout";
 
-// Flashbar components (replaces Cloudscape Flashbar)
+// Flashbar components
 export { AppFlashbar } from "./components/layout/AppFlashbar";
 export type { AppFlashbarProps, FlashbarMessage } from "./components/layout/AppFlashbar";