@dalexto/lexsys-registry 0.0.2

package/templates/templates/DashboardShell/DashboardShell.tsx

@@ -0,0 +1,124 @@
+/**
+ * DashboardShell.tsx
+ *
+ * Reference DashboardShell template — compound layout shell.
+ */
+
+import type {
+  DashboardShellHeaderProps,
+  DashboardShellMainProps,
+  DashboardShellProps,
+  DashboardShellSidebarProps,
+  DashboardShellBodyProps,
+} from "./DashboardShell.types"
+import {
+  dashboardShellContentVariants,
+  dashboardShellHeaderVariants,
+  dashboardShellMainVariants,
+  dashboardShellSidebarVariants,
+  dashboardShellVariants,
+} from "./DashboardShell.variants"
+import { cn } from "@/lib/utils"
+
+const DashboardShell = ({
+  ref,
+  className,
+  children,
+  ...props
+}: DashboardShellProps) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(dashboardShellVariants(), className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+DashboardShell.displayName = "DashboardShell"
+
+const DashboardShellSidebar = ({
+  ref,
+  className,
+  children,
+  ...props
+}: DashboardShellSidebarProps) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(dashboardShellSidebarVariants(), className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+DashboardShellSidebar.displayName = "DashboardShellSidebar"
+
+const DashboardShellHeader = ({
+  ref,
+  className,
+  children,
+  ...props
+}: DashboardShellHeaderProps) => {
+  return (
+    <header
+      ref={ref}
+      className={cn(dashboardShellHeaderVariants(), className)}
+      {...props}
+    >
+      {children}
+    </header>
+  )
+}
+
+DashboardShellHeader.displayName = "DashboardShellHeader"
+
+const DashboardShellMain = ({
+  ref,
+  className,
+  children,
+  ...props
+}: DashboardShellMainProps) => {
+  return (
+    <main
+      ref={ref}
+      className={cn(dashboardShellContentVariants(), className)}
+      {...props}
+    >
+      {children}
+    </main>
+  )
+}
+
+DashboardShellMain.displayName = "DashboardShellMain"
+
+const DashboardShellBody = ({
+  ref,
+  className,
+  children,
+  ...props
+}: DashboardShellBodyProps) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(dashboardShellMainVariants(), className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+DashboardShellBody.displayName = "DashboardShellBody"
+
+export {
+  DashboardShell,
+  DashboardShellSidebar,
+  DashboardShellHeader,
+  DashboardShellMain,
+  DashboardShellBody,
+}

package/templates/templates/DashboardShell/DashboardShell.types.ts

@@ -0,0 +1,37 @@
+/**
+ * DashboardShell.types.ts
+ *
+ * Public types for the DashboardShell template.
+ */
+
+import type { HTMLAttributes, ReactNode, Ref } from "react"
+
+export interface DashboardShellProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface DashboardShellSidebarProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface DashboardShellHeaderProps extends HTMLAttributes<HTMLElement> {
+  ref?: Ref<HTMLElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface DashboardShellMainProps extends HTMLAttributes<HTMLElement> {
+  ref?: Ref<HTMLElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface DashboardShellBodyProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+  children?: ReactNode
+}

package/templates/templates/DashboardShell/DashboardShell.variants.ts

@@ -0,0 +1,25 @@
+/**
+ * DashboardShell.variants.ts
+ *
+ * Variant classes for the DashboardShell template.
+ */
+
+export const dashboardShellVariants = (): string => {
+  return "lsys-dashboard-shell flex min-h-full flex-col bg-[var(--lsys-color-background-base)] text-[var(--lsys-color-text-primary)] md:flex-row"
+}
+
+export const dashboardShellSidebarVariants = (): string => {
+  return "lsys-dashboard-shell__sidebar shrink-0"
+}
+
+export const dashboardShellMainVariants = (): string => {
+  return "lsys-dashboard-shell__main flex min-h-full flex-1 flex-col bg-[var(--lsys-color-background-base)]"
+}
+
+export const dashboardShellHeaderVariants = (): string => {
+  return "lsys-dashboard-shell__header border-b border-[var(--lsys-border-default)] bg-[var(--lsys-color-background-base)] px-[var(--lsys-space-4)] py-[var(--lsys-space-3)]"
+}
+
+export const dashboardShellContentVariants = (): string => {
+  return "lsys-dashboard-shell__content flex-1 bg-[var(--lsys-color-background-base)] p-[var(--lsys-space-4)]"
+}

package/templates/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "noCheck": true
+  }
+}