lfg

app/blocks/sidebar/app-sidebar.tsx

@@ -130,7 +130,12 @@ export function AppSidebar(props: React.ComponentProps<typeof Sidebar>) {
       </Sidebar.Content>
       <Sidebar.Footer className="lg:flex lg:flex-row hidden items-center">
         <Menu>
-          <Button appearance="plain" aria-label="Profile" slot="menu-trigger" className="group">
+          <Button
+            appearance="plain"
+            aria-label="Profile"
+            data-slot="menu-trigger"
+            className="group"
+          >
             <Avatar size="small" shape="square" src="/images/sidebar/profile-slash.jpg" />
             <span className="group-data-[collapsible=dock]:hidden flex items-center justify-center">
               Saul Hudson

components/docs/generated/previews.ts

@@ -2,7 +2,7 @@
 // This file is autogenerated by scripts/create-pr-content.ts.
 // Do not edit this file directly.
 
-import React from 'react';
+import React from "react"
 
 export const previews: Record<string, any> = {
   "date-and-time/date-field/date-field-demo": {

components/docs/rehype/code.tsx

@@ -2,15 +2,13 @@
 
 import React, { useEffect, useState } from "react"
 
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@radix-ui/react-collapsible"
 import { AnimatePresence, motion } from "framer-motion"
-import { IconCheck, IconChevronLgDown, IconCircleInfo, IconDuplicate } from "justd-icons"
+import { IconCheck, IconCircleInfo, IconDuplicate } from "justd-icons"
 import rehypePrettyCode from "rehype-pretty-code"
 import rehypeStringify from "rehype-stringify"
 import remarkParse from "remark-parse"
 import remarkRehype from "remark-rehype"
-import { twJoin } from "tailwind-merge"
-import { Button, ButtonPrimitive, type ButtonProps, cn } from "ui"
+import { Button, type ButtonProps, cn } from "ui"
 import { unified } from "unified"
 import { copyToClipboard } from "usemods"
 
@@ -20,13 +18,22 @@ export const snippetVariants = {
 }
 
 export interface CodeProps {
+  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>
+  title?: string
   lang?: string
   code: string
   withImportCopy?: boolean
   className?: string
 }
 
-function Code({ className, lang = "tsx", code, withImportCopy = true }: CodeProps) {
+function Code({
+  title,
+  icon: Icon,
+  className,
+  lang = "tsx",
+  code,
+  withImportCopy = true
+}: CodeProps) {
   const [copied, setCopied] = React.useState<string>("")
 
   function copyImportsToClipboard(): void {
@@ -44,12 +51,21 @@ function Code({ className, lang = "tsx", code, withImportCopy = true }: CodeProp
   return (
     <div
       className={cn(
-        "dfakdpxe2941 not-prose group relative max-h-96 overflow-y-auto rounded-lg font-mono text-sm",
+        "not-prose group relative [&_pre]:max-h-96 [&_pre]:overflow-auto rounded-lg font-mono text-sm",
         className
       )}
     >
-      <div className="relative -mt-6">
-        <div className="sticky top-3 right-3 mr-3 z-20 flex gap-1.5 justify-end">
+      {title && (
+        <figcaption
+          className={cn(Icon && "flex items-center gap-x-1")}
+          data-rehype-pretty-code-title=""
+        >
+          {Icon && <Icon className="text-cyan-600 dark:text-cyan-500 size-4" />}
+          <span className="font-sans">{title}</span>
+        </figcaption>
+      )}
+      <div className="relative">
+        <div className="absolute cpybtn top-3 right-0 mr-3 z-20 flex gap-1.5 justify-end">
           {withImportCopy && (
             <CopyButton
               ariaLabel="Copy imports statement"
@@ -68,78 +84,6 @@ function Code({ className, lang = "tsx", code, withImportCopy = true }: CodeProp
   )
 }
 
-function CodeContainer({ children, isOpened }: { children: React.ReactNode; isOpened: boolean }) {
-  return (
-    <CollapsibleContent forceMount className={!isOpened ? "max-h-32" : ""}>
-      <div
-        className={cn(
-          "[&_pre]:my-0 [&_pre]:!border-0 [&_pre]:max-h-[32rem] [&_pre]:pb-[100px]",
-          !isOpened ? "[&_pre]:overflow-hidden" : "[&_pre]:overflow-auto"
-        )}
-      >
-        {children}
-      </div>
-    </CollapsibleContent>
-  )
-}
-
-function CodeExpandButton({ isOpened }: { isOpened: boolean }) {
-  return (
-    <div
-      className={cn(
-        "absolute flex items-center z-10 justify-center bg-gradient-to-b from-[#0e0e10]/50 to-black",
-        isOpened ? "inset-x-0 bottom-0 h-16" : "inset-0"
-      )}
-    >
-      <CollapsibleTrigger asChild>
-        <ButtonPrimitive className="bg-zinc-700 text-white px-4 border border-zinc-600 py-2 rounded-lg flex items-center gap-x-2 text-sm focus:outline-none">
-          <IconChevronLgDown
-            className={twJoin(
-              "size-4 -ml-1 duration-200 transition-colors",
-              isOpened && "rotate-180"
-            )}
-          />
-          {isOpened ? "Collapse" : "Expand"}
-        </ButtonPrimitive>
-      </CollapsibleTrigger>
-    </div>
-  )
-}
-
-interface CodeCollapsibleProps {
-  isOpened: boolean
-  onOpenChange: (open: boolean) => void
-  lang?: string
-  withImportCopy?: boolean
-  code: string
-}
-
-function CodeCollapsible({
-  isOpened,
-  onOpenChange,
-  lang = "tsx",
-  withImportCopy = true,
-  code,
-  ...props
-}: React.PropsWithChildren<CodeCollapsibleProps>) {
-  return (
-    <Collapsible open={isOpened} onOpenChange={onOpenChange}>
-      <div className={"relative overflow-hidden"} {...props}>
-        <CodeContainer isOpened={isOpened}>
-          <Code code={code} lang={lang} withImportCopy={withImportCopy} />
-        </CodeContainer>
-        <CodeExpandButton isOpened={isOpened} />
-      </div>
-    </Collapsible>
-  )
-}
-
-export function CodeCollapsibleRoot({ children }: React.PropsWithChildren<object>) {
-  return (
-    <div className="overflow-hidden border border-zinc-800 bg-[#0e0e10] rounded-lg">{children}</div>
-  )
-}
-
 export function CopyRawButton({ code }: { className?: string; code: string }) {
   const [copied, setCopied] = React.useState<string>("")
   const copyRaw = () => {
@@ -211,7 +155,7 @@ const CopyButton = ({
   return (
     <Button
       className={cn(
-        "size-7 backdrop-blur-lg rounded-md text-white bg-zinc-800 border hover:bg-zinc-700 border-zinc-700",
+        "size-7 backdrop-blur-lg rounded-md text-white bg-zinc-900 border hover:bg-zinc-800 border-zinc-700",
         className
       )}
       aria-label={ariaLabel}
@@ -246,4 +190,4 @@ const CopyButton = ({
   )
 }
 
-export { CodeHighlighter, CodeContainer, CodeExpandButton, CodeCollapsible, Code }
+export { CodeHighlighter, Code }

components/docs/rehype/plain-code.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 
-import { CodeCollapsible, CodeCollapsibleRoot } from "@/components/docs/rehype/code"
+import { Code } from "@/components/docs/rehype/code"
 
 interface PlainCodeProps extends React.HTMLAttributes<HTMLDivElement> {
   code: string
@@ -12,19 +12,10 @@ interface PlainCodeProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export function PlainCode({ title, withImportCopy = false, lang = "tsx", code }: PlainCodeProps) {
-  const [isOpened, setIsOpened] = React.useState(false)
   return (
     <section className="my-4 not-prose">
       {title && <figcaption data-rehype-pretty-code-title="">{title}</figcaption>}
-      <CodeCollapsibleRoot>
-        <CodeCollapsible
-          isOpened={isOpened}
-          onOpenChange={setIsOpened}
-          withImportCopy={withImportCopy}
-          lang={lang}
-          code={code}
-        />
-      </CodeCollapsibleRoot>
+      <Code code={code} lang={lang} withImportCopy={withImportCopy} />
     </section>
   )
 }

components/docs/rehype/source-code.tsx

@@ -3,7 +3,8 @@
 import * as React from "react"
 
 import jsonPreviews from "@/components/docs/generated/previews.json"
-import { CodeCollapsible, CodeCollapsibleRoot } from "@/components/docs/rehype/code"
+import { Code } from "@/components/docs/rehype/code"
+import { IconBrandReactjs } from "justd-icons"
 
 interface SourceCodeProps extends React.HTMLAttributes<HTMLDivElement> {
   toShow: string
@@ -14,7 +15,6 @@ interface SourceCodeProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export function SourceCode({ title, message, ext = "tsx", toShow, ...props }: SourceCodeProps) {
   const [codeString, setCodeString] = React.useState<{ name: string; code: string } | null>(null)
-  const [isOpened, setIsOpened] = React.useState<boolean>(false)
 
   React.useEffect(() => {
     // @ts-expect-error
@@ -32,10 +32,6 @@ export function SourceCode({ title, message, ext = "tsx", toShow, ...props }: So
     }
   }, [toShow])
 
-  const handleOpenChange = (open: boolean) => {
-    setIsOpened(open)
-  }
-
   if (codeString) {
     return (
       <section {...props} className="my-6 not-prose">
@@ -45,15 +41,13 @@ export function SourceCode({ title, message, ext = "tsx", toShow, ...props }: So
             : "And next, you can copy the code below and paste it into your component folder."}
         </p>
         {title && <figcaption data-rehype-pretty-code-title="">{title}</figcaption>}
-        <CodeCollapsibleRoot>
-          <CodeCollapsible
-            lang={ext}
-            isOpened={isOpened}
-            onOpenChange={handleOpenChange}
-            code={codeString.code}
-            withImportCopy={false}
-          />
-        </CodeCollapsibleRoot>
+        <Code
+          title={`${toShow}.tsx`}
+          icon={IconBrandReactjs}
+          code={codeString.code}
+          lang={ext}
+          withImportCopy={false}
+        />
       </section>
     )
   }

components/installation.tsx

@@ -76,6 +76,14 @@ export function Installation({ className, ...props }: InstallationProps) {
       )}
       {options.isManual && <p>{manualText}</p>}
       <div className={install({ className })}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          className="ml-[0.395rem] md:block hidden size-6 -mr-3.5 text-zinc-400 z-10"
+        >
+          <path stroke="currentColor" d="m10 16 4-4-4-4" strokeLinecap="square" strokeWidth="2" />
+        </svg>
         <CodeHighlighter
           className="flex-1 chlt overflow-x-auto pr-4"
           lang="bash"

components/responsive-aside.tsx

@@ -61,6 +61,7 @@ export function ResponsiveAside({
         </div>
       </div>
       <Sheet.Content
+        aria-label="Docs Menu"
         isOpen={openAside}
         onOpenChange={setOpenAside}
         classNames={{ content: "w-[19rem]" }}

components/ui/sidebar.tsx

@@ -391,9 +391,9 @@ const footer = tv({
   variants: {
     collapsed: {
       false: [
-        "p-2 [&_[slot=menu-trigger]>[data-slot=avatar]]:-ml-1.5 [&_[slot=menu-trigger]]:w-full [&_[slot=menu-trigger]]:hover:bg-muted [&_[slot=menu-trigger]]:justify-start [&_[slot=menu-trigger]]:flex [&_[slot=menu-trigger]]:items-center"
+        "p-2 [&_[data-slot=menu-trigger]>[data-slot=avatar]]:-ml-1.5 [&_[data-slot=menu-trigger]]:w-full [&_[data-slot=menu-trigger]]:hover:bg-muted [&_[data-slot=menu-trigger]]:justify-start [&_[data-slot=menu-trigger]]:flex [&_[data-slot=menu-trigger]]:items-center"
       ],
-      true: "size-12 p-1 [&_[slot=menu-trigger]]:size-9 justify-center items-center"
+      true: "size-12 p-1 [&_[data-slot=menu-trigger]]:size-9 justify-center items-center"
     }
   }
 })

resources/content/docs/components/layouts/sidebar.mdx

@@ -91,7 +91,7 @@ Imagine you're building a dashboard; you'll likely need a sidebar that lists all
         </Sidebar.Content>
         <Sidebar.Footer className="lg:flex lg:flex-row hidden items-center">
           <Menu>
-            <Button appearance="plain" aria-label="Profile" slot="menu-trigger" className="group">
+            <Button appearance="plain" aria-label="Profile" data-slot="menu-trigger" className="group">
               <Avatar size="small" shape="square" src="/images/sidebar/profile-slash.jpg" />
               <span className="group-data-[collapsible=dock]:hidden flex items-center justify-center">
                 Saul Hudson

resources/content/docs/getting-started/installation.mdx

@@ -287,7 +287,7 @@ Include this for the default set of utilities:
 Configure your Tailwind setup by wrapping your tailwind config with withTV from tailwind-variants. Also, make sure to
 integrate the plugins we've just installed.
 
-<PlainCode lang='js' code={`/** @type {import('tailwindcss').Config} */
+<PlainCode lang='ts' title='tailwind.config.ts' code={`/** @type {import('tailwindcss').Config} */
 
   import { withTV } from 'tailwind-variants/transformer'
   import ta from 'tailwindcss-animate'
@@ -365,7 +365,7 @@ integrate the plugins we've just installed.
 `} />
 
 ### Primitive
-<SourceCode title='ui/primitive.tsx' toShow={['primitive']} />
+<SourceCode toShow={['primitive']} />
 
 ## Simple Import
 Indeed, it's efficient because the index.ts file in your UI folder serves as a hub. Even if the button and badge
@@ -382,54 +382,7 @@ export * from './note';
 export * from './list-box';
 export * from './choicebox';
 export * from './pagination';
-export * from './link';
-export * from './tabs';
-export * from './card';
-export * from './slider';
-export * from './popover';
-export * from './text-field';
-export * from './radio';
-export * from './date-field';
-export * from './date-picker';
-export * from './toast';
-export * from './container';
-export * from './input-otp';
-export * from './tag-group';
-export * from './sheet';
-export * from './drop-zone';
-export * from './grid';
-export * from './meter';
-export * from './time-field';
-export * from './breadcrumbs';
-export * from './drawer';
-export * from './tooltip';
-export * from './file-trigger';
-export * from './switch';
-export * from './calendar';
-export * from './grid-list';
-export * from './avatar';
-export * from './combo-box';
-export * from './search-field';
-export * from './menu';
-export * from './progress-bar';
-export * from './badge';
-export * from './toggle';
-export * from './number-field';
-export * from './table';
-export * from './separator';
-export * from './button';
-export * from './modal';
-export * from './checkbox';
-export * from './select';
-export * from './textarea';
-export * from './skeleton';
-export * from './form';
-export * from './carousel';
-export * from './color';
-export * from './color-field';
-export * from './color-picker';
-export * from './visually-hidden';
-`} />
+...`} />
 
 
 If you're not using all those components, feel free to remove the ones you don't need. Later, when you introduce a new

resources/content/docs/prologue/release-notes.mdx

@@ -15,6 +15,7 @@ This all changes are made on the 2024 release.
 - Minor adjustments across all components to align with the latest version of `react-aria-components`.
 - New Component [ToggleGroup](/docs/components/buttons/toggle-group)
 - Fix issue on menu [Menu](/docs/components/collections/menu)
+- Change `slot` to `data-slot` menu trigger on sidebar
 
 ## November 17
 - A few adjustment to [Navbar](/navbar)