@dalexto/lexsys-registry 0.0.2

package/templates/blocks/SettingsPanel/SettingsPanel.tsx

@@ -0,0 +1,104 @@
+/**
+ * SettingsPanel.tsx
+ *
+ * Reference SettingsPanel block — compound Card settings section.
+ */
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../../primitives/Card/Card"
+import type {
+  SettingsPanelContentProps,
+  SettingsPanelDescriptionProps,
+  SettingsPanelFooterProps,
+  SettingsPanelHeaderProps,
+  SettingsPanelProps,
+  SettingsPanelTitleProps,
+} from "./SettingsPanel.types"
+import { settingsPanelVariants } from "./SettingsPanel.variants"
+import { cn } from "@/lib/utils"
+
+const SettingsPanel = ({
+  ref,
+  variant,
+  className,
+  children,
+  ...cardProps
+}: SettingsPanelProps) => {
+  return (
+    <Card
+      ref={ref}
+      variant={variant}
+      className={cn(settingsPanelVariants(), className)}
+      {...cardProps}
+    >
+      {children}
+    </Card>
+  )
+}
+
+SettingsPanel.displayName = "SettingsPanel"
+
+const SettingsPanelHeader = ({
+  ref,
+  className,
+  ...props
+}: SettingsPanelHeaderProps) => {
+  return <CardHeader ref={ref} className={className} {...props} />
+}
+
+SettingsPanelHeader.displayName = "SettingsPanelHeader"
+
+const SettingsPanelTitle = ({
+  ref,
+  className,
+  ...props
+}: SettingsPanelTitleProps) => {
+  return <CardTitle ref={ref} className={className} {...props} />
+}
+
+SettingsPanelTitle.displayName = "SettingsPanelTitle"
+
+const SettingsPanelDescription = ({
+  ref,
+  className,
+  ...props
+}: SettingsPanelDescriptionProps) => {
+  return <CardDescription ref={ref} className={className} {...props} />
+}
+
+SettingsPanelDescription.displayName = "SettingsPanelDescription"
+
+const SettingsPanelContent = ({
+  ref,
+  className,
+  ...props
+}: SettingsPanelContentProps) => {
+  return <CardContent ref={ref} className={className} {...props} />
+}
+
+SettingsPanelContent.displayName = "SettingsPanelContent"
+
+const SettingsPanelFooter = ({
+  ref,
+  className,
+  ...props
+}: SettingsPanelFooterProps) => {
+  return <CardFooter ref={ref} className={className} {...props} />
+}
+
+SettingsPanelFooter.displayName = "SettingsPanelFooter"
+
+export {
+  SettingsPanel,
+  SettingsPanelHeader,
+  SettingsPanelTitle,
+  SettingsPanelDescription,
+  SettingsPanelContent,
+  SettingsPanelFooter,
+}

package/templates/blocks/SettingsPanel/SettingsPanel.types.ts

@@ -0,0 +1,31 @@
+/**
+ * SettingsPanel.types.ts
+ *
+ * Public types for the SettingsPanel block.
+ */
+
+import type { ReactNode, Ref } from "react"
+import type {
+  CardContentProps,
+  CardDescriptionProps,
+  CardFooterProps,
+  CardHeaderProps,
+  CardProps,
+  CardTitleProps,
+} from "../../primitives/Card/Card.types"
+
+export interface SettingsPanelProps extends Omit<CardProps, "children"> {
+  ref?: Ref<HTMLDivElement>
+  className?: CardProps["className"]
+  children?: ReactNode
+}
+
+export type SettingsPanelHeaderProps = CardHeaderProps
+
+export type SettingsPanelTitleProps = CardTitleProps
+
+export type SettingsPanelDescriptionProps = CardDescriptionProps
+
+export type SettingsPanelContentProps = CardContentProps
+
+export type SettingsPanelFooterProps = CardFooterProps

package/templates/blocks/SettingsPanel/SettingsPanel.variants.ts

@@ -0,0 +1,9 @@
+/**
+ * SettingsPanel.variants.ts
+ *
+ * Variant classes for the SettingsPanel block.
+ */
+
+export const settingsPanelVariants = (): string => {
+  return "lsys-settings-panel w-full text-(--lsys-color-text-primary)"
+}

package/templates/blocks/Sidebar/Sidebar.tsx

@@ -0,0 +1,414 @@
+/**
+ * Sidebar.tsx
+ *
+ * Reference Sidebar block — compound navigation shell with desktop and mobile drawer.
+ */
+
+import { createContext, useContext } from "react"
+import { Button } from "../../primitives/Button/Button"
+import {
+  Drawer,
+  DrawerBackdrop,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerPopup,
+  DrawerPortal,
+  DrawerTitle,
+  DrawerTrigger,
+  DrawerViewport,
+} from "../../primitives/Drawer/Drawer"
+import {
+  ScrollArea,
+  ScrollAreaContent,
+  ScrollAreaViewport,
+} from "../../primitives/ScrollArea/ScrollArea"
+import type {
+  SidebarContentProps,
+  SidebarFooterProps,
+  SidebarGroupContentProps,
+  SidebarGroupLabelProps,
+  SidebarGroupProps,
+  SidebarHeaderProps,
+  SidebarItemButtonProps,
+  SidebarItemLinkProps,
+  SidebarItemProps,
+  SidebarItemSize,
+  SidebarItemVariant,
+  SidebarListProps,
+  SidebarMobileHeaderProps,
+  SidebarProps,
+  SidebarTriggerProps,
+} from "./Sidebar.types"
+import {
+  sidebarBrandVariants,
+  sidebarDesktopVariants,
+  sidebarDrawerFooterVariants,
+  sidebarFooterVariants,
+  sidebarGroupContentVariants,
+  sidebarGroupLabelVariants,
+  sidebarGroupVariants,
+  sidebarMainVariants,
+  sidebarMobileHeaderVariants,
+  sidebarMobileTriggerVariants,
+  sidebarNavItemVariants,
+  sidebarNavListVariants,
+  sidebarNavVariants,
+  sidebarRootVariants,
+} from "./Sidebar.variants"
+import { cn } from "@/lib/utils"
+
+interface SidebarContextValue {
+  itemVariant: SidebarItemVariant
+  itemSize: SidebarItemSize
+}
+
+interface SidebarMobileContextValue {
+  closeOnSelect: boolean
+}
+
+const SidebarContext = createContext<SidebarContextValue>({
+  itemVariant: "ghost",
+  itemSize: "sm",
+})
+
+const SidebarMobileContext = createContext<SidebarMobileContextValue>({
+  closeOnSelect: false,
+})
+
+const useSidebarMobileContext = () => useContext(SidebarMobileContext)
+
+const Sidebar = ({
+  ref,
+  className,
+  itemVariant = "ghost",
+  itemSize = "sm",
+  children,
+  ...props
+}: SidebarProps) => {
+  const sidebarBody = (
+    <SidebarMobileContext.Provider value={{ closeOnSelect: false }}>
+      {children}
+    </SidebarMobileContext.Provider>
+  )
+
+  const drawerBody = (
+    <SidebarMobileContext.Provider value={{ closeOnSelect: true }}>
+      {children}
+      <div className={sidebarDrawerFooterVariants()}>
+        <DrawerClose render={<Button variant="secondary" size="sm" />}>
+          Close
+        </DrawerClose>
+      </div>
+    </SidebarMobileContext.Provider>
+  )
+
+  return (
+    <SidebarContext.Provider value={{ itemVariant, itemSize }}>
+      <aside
+        ref={ref}
+        className={cn(sidebarRootVariants(), className)}
+        {...props}
+      >
+        <div className={sidebarDesktopVariants()}>{sidebarBody}</div>
+
+        <div className={sidebarMobileTriggerVariants()}>
+          <Drawer swipeDirection="left">
+            <DrawerTrigger render={<Button variant="secondary" size="sm" />}>
+              Open navigation
+            </DrawerTrigger>
+            <DrawerPortal>
+              <DrawerBackdrop />
+              <DrawerViewport side="left">
+                <DrawerPopup side="left" size="sm">
+                  <DrawerClose aria-label="Close navigation" />
+                  <DrawerContent className={sidebarMainVariants()}>
+                    <DrawerTitle className="sr-only">Navigation</DrawerTitle>
+                    <DrawerDescription className="sr-only">
+                      Application navigation links
+                    </DrawerDescription>
+                    {drawerBody}
+                  </DrawerContent>
+                </DrawerPopup>
+              </DrawerViewport>
+            </DrawerPortal>
+          </Drawer>
+        </div>
+      </aside>
+    </SidebarContext.Provider>
+  )
+}
+
+Sidebar.displayName = "Sidebar"
+
+const SidebarHeader = ({
+  ref,
+  className,
+  children,
+  ...props
+}: SidebarHeaderProps) => {
+  return (
+    <div ref={ref} className={cn(sidebarBrandVariants(), className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+SidebarHeader.displayName = "SidebarHeader"
+
+const SidebarContent = ({
+  ref,
+  className,
+  children,
+  ...props
+}: SidebarContentProps) => {
+  return (
+    <ScrollArea className={sidebarNavVariants()}>
+      <ScrollAreaViewport>
+        <ScrollAreaContent>
+          <nav
+            ref={ref}
+            aria-label="Application navigation"
+            className={className}
+            {...props}
+          >
+            {children}
+          </nav>
+        </ScrollAreaContent>
+      </ScrollAreaViewport>
+    </ScrollArea>
+  )
+}
+
+SidebarContent.displayName = "SidebarContent"
+
+const SidebarFooter = ({
+  ref,
+  className,
+  children,
+  ...props
+}: SidebarFooterProps) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(sidebarFooterVariants(), className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+SidebarFooter.displayName = "SidebarFooter"
+
+const SidebarTrigger = ({
+  ref,
+  children = "Open navigation",
+  variant = "secondary",
+  size = "sm",
+  className,
+  ...props
+}: SidebarTriggerProps) => {
+  return (
+    <DrawerTrigger
+      render={
+        <Button
+          ref={ref}
+          variant={variant}
+          size={size}
+          className={className}
+          {...props}
+        />
+      }
+    >
+      {children}
+    </DrawerTrigger>
+  )
+}
+
+SidebarTrigger.displayName = "SidebarTrigger"
+
+const SidebarMobileHeader = ({
+  ref,
+  className,
+  children,
+  ...props
+}: SidebarMobileHeaderProps) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(sidebarMobileHeaderVariants(), className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+SidebarMobileHeader.displayName = "SidebarMobileHeader"
+
+const SidebarGroup = ({
+  ref,
+  className,
+  children,
+  ...props
+}: SidebarGroupProps) => {
+  return (
+    <div ref={ref} className={cn(sidebarGroupVariants(), className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+SidebarGroup.displayName = "SidebarGroup"
+
+const SidebarGroupLabel = ({
+  ref,
+  className,
+  children,
+  ...props
+}: SidebarGroupLabelProps) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(sidebarGroupLabelVariants(), className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+SidebarGroupLabel.displayName = "SidebarGroupLabel"
+
+const SidebarGroupContent = ({
+  ref,
+  className,
+  children,
+  ...props
+}: SidebarGroupContentProps) => {
+  return (
+    <div
+      ref={ref}
+      className={cn(sidebarGroupContentVariants(), className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+SidebarGroupContent.displayName = "SidebarGroupContent"
+
+const SidebarList = ({
+  ref,
+  className,
+  children,
+  ...props
+}: SidebarListProps) => {
+  return (
+    <ul
+      ref={ref}
+      className={cn(sidebarNavListVariants(), className)}
+      {...props}
+    >
+      {children}
+    </ul>
+  )
+}
+
+SidebarList.displayName = "SidebarList"
+
+const SidebarItem = ({
+  ref,
+  className,
+  children,
+  ...props
+}: SidebarItemProps) => {
+  return (
+    <li ref={ref} className={className} {...props}>
+      {children}
+    </li>
+  )
+}
+
+SidebarItem.displayName = "SidebarItem"
+
+const SidebarItemLink = ({
+  ref,
+  active,
+  className,
+  children,
+  ...props
+}: SidebarItemLinkProps) => {
+  const { closeOnSelect } = useSidebarMobileContext()
+  const linkClassName = cn(sidebarNavItemVariants(active), className)
+
+  if (!closeOnSelect) {
+    return (
+      <a ref={ref} className={linkClassName} {...props}>
+        {children}
+      </a>
+    )
+  }
+
+  return (
+    <DrawerClose
+      appearance="inline"
+      render={<a ref={ref} className={linkClassName} {...props} />}
+    >
+      {children}
+    </DrawerClose>
+  )
+}
+
+SidebarItemLink.displayName = "SidebarItemLink"
+
+const SidebarItemButton = ({
+  ref,
+  active,
+  className,
+  children,
+  type = "button",
+  ...props
+}: SidebarItemButtonProps) => {
+  const { closeOnSelect } = useSidebarMobileContext()
+  const buttonClassName = cn(sidebarNavItemVariants(active), className)
+
+  if (!closeOnSelect) {
+    return (
+      <button ref={ref} type={type} className={buttonClassName} {...props}>
+        {children}
+      </button>
+    )
+  }
+
+  return (
+    <DrawerClose
+      appearance="inline"
+      render={
+        <button ref={ref} type={type} className={buttonClassName} {...props} />
+      }
+    >
+      {children}
+    </DrawerClose>
+  )
+}
+
+SidebarItemButton.displayName = "SidebarItemButton"
+
+export {
+  Sidebar,
+  SidebarHeader,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupContent,
+  SidebarList,
+  SidebarItem,
+  SidebarItemLink,
+  SidebarItemButton,
+  SidebarTrigger,
+  SidebarMobileHeader,
+}

package/templates/blocks/Sidebar/Sidebar.types.ts

@@ -0,0 +1,99 @@
+/**
+ * Sidebar.types.ts
+ *
+ * Public types for the Sidebar block.
+ */
+
+import type {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  HTMLAttributes,
+  LiHTMLAttributes,
+  ReactNode,
+  Ref,
+} from "react"
+import type { ButtonProps } from "../../primitives/Button/Button.types"
+
+export type SidebarItemVariant = ButtonProps["variant"]
+export type SidebarItemSize = ButtonProps["size"]
+
+export interface SidebarProps extends HTMLAttributes<HTMLElement> {
+  ref?: Ref<HTMLElement>
+  className?: string
+  itemVariant?: SidebarItemVariant
+  itemSize?: SidebarItemSize
+  children?: ReactNode
+}
+
+export interface SidebarHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface SidebarContentProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface SidebarFooterProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface SidebarGroupProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface SidebarGroupLabelProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface SidebarGroupContentProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface SidebarListProps extends HTMLAttributes<HTMLUListElement> {
+  ref?: Ref<HTMLUListElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface SidebarItemProps extends LiHTMLAttributes<HTMLLIElement> {
+  ref?: Ref<HTMLLIElement>
+  className?: string
+  children?: ReactNode
+}
+
+export interface SidebarItemLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  ref?: Ref<HTMLAnchorElement>
+  active?: boolean
+  className?: string
+  children?: ReactNode
+}
+
+export interface SidebarItemButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  ref?: Ref<HTMLButtonElement>
+  active?: boolean
+  className?: string
+  children?: ReactNode
+}
+
+export interface SidebarTriggerProps extends Omit<ButtonProps, "type"> {
+  ref?: Ref<HTMLButtonElement>
+  children?: ReactNode
+}
+
+export interface SidebarMobileHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: Ref<HTMLDivElement>
+  className?: string
+  children?: ReactNode
+}