---
# System prepended metadata

title: Untitled

---



## RAW CSS 

```css
 .AppHeader {
        @apply py-2 flex items-center justify-between flex-1  dark:border-black-300;
    }

    .AppSidebar {
        @apply flex flex-row py-4 justify-center
        relative dark:bg-black-700
        h-screen hidden lg:flex border-r
        border-gray-100 dark:border-black-400
        bg-accent-50;
    }

    .AppSidebarItem {
        @apply rounded-md items-center transition-colors border-transparent text-sm text-gray-600 font-medium
        w-full pr-12 w-full py-1.5 px-3.5 flex space-x-2.5 transition-colors duration-300;
    }

    .AppSidebarCollapsed .AppSidebarItem {
        @apply px-0.5 py-2 flex justify-center space-x-0;
    }

    .AppSidebarCollapsed .AppSidebarItem span,
    .AppSidebarCollapsed .AppSidebarFooterItem span {
        @apply hidden;
    }

    .AppSidebarItemActive {
        @apply bg-accent-100 dark:bg-primary-300/10 dark:text-primary-contrast text-current font-medium border-b border-2 border-accent-200;
    }

    .AppSidebarCollapsed .AppSidebarItemActive {
        @apply bg-primary-500;
    }

    .AppSidebarItemNotActive {
        @apply dark:text-gray-300 dark:hover:text-white text-gray-600 ring-transparent
            active:bg-gray-200 dark:active:bg-black-300 dark:active:bg-black-300
            hover:bg-gray-50 dark:hover:bg-black-400 dark:bg-black-600;
    }

    .AppSidebarItemIcon {
        @apply text-gray-600 dark:text-primary-contrast;
    }

    .AppSidebarItemActive .AppSidebarItemIcon {
        @apply text-primary-600;
    }

    .AppSidebarCollapsed .AppSidebarItemActive .AppSidebarItemIcon {
        @apply bg-primary-500 text-primary-contrast;
    }

    .AppSidebarFooterItem {
        @apply flex text-sm space-x-2
        items-center text-gray-500 hover:text-gray-800
        dark:text-gray-300 dark:hover:text-white;
    }

    .AppSidebarCollapsed .AppSidebarFooterItem {
        @apply justify-center;
    }

    .FixedHeader {
        position: sticky;
        top: 0;

        @apply dark:bg-black-500/90 bg-white/90 z-10 w-full;
    }

    .FixedHeader ~ .Container {
        position: relative;
        top: 3rem;
    }

```
## RADIX API SCHEMA CONVERSION

#### PROMPT
>Convert the CSS Styles to JSON using the CONVERSION_FORMAT and SCHEMA_FILTER. The goal is that the CSS Styles will be ready to use to build RADIX components dynamically including all styles and logic in portableText JSON components using Radix UI Framework.


```json
SCHEMA_FILTER = {
  _type: 'NavigationMenu',
  title: 'RADIX Navigation Menu',
  description: 'This schema describes the API for the RADIX Navigation Menu component',
  types: [
    'Root',
    'Sub',
    'List',
    'Item',
    'Trigger',
    'Content',
    'Link',
    'Indicator',
    'Viewport',
    'CSSVariables'
  ],
  properties: [
    'defaultValue',
    'value',
    'onValueChange',
    'delayDuration',
    'skipDelayDuration',
    'dir',
    'orientation',
    'asChild',
    'disableOutsidePointerEvents',
    'onEscapeKeyDown',
    'onPointerDownOutside',
    'onFocusOutside',
    'onInteractOutside',
    'forceMount',
    'active',
    'onSelect',
    '--radix-navigation-menu-viewport-width',
    '--radix-navigation-menu-viewport-height'
  ],
  child_properties: [
    '[data-orientation]',
    '[data-state]',
    '[data-motion]',
    '[data-disabled]',
    '[data-active]'
  ]
}
```


## RADIX OUTPUT
```json
export const styles = {
  _parent: 'NavigationMenu',
  _component: '<NavigationMenu>',
  _title: 'AppHeader',
  _description:
    'This schema describes the API for the RADIX Navigation Menu component',
  _theme: [
    'py-2',
    'flex',
    'items-center',
    'justify-between',
    'flex-1',
    'dark:border-black-300',
  ],
  _cn: ['AppHeader'],
  _parsed: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    flex: 1,
    padding: '1rem 0',
    border: '1px solid #000',
  },
  _comment: 'AppHeader Styles',
  _props: [],
  _blocks: [
    {
      _parent: 'NavigationMenu',
      _children: 'Sub',
      _component: '<NavigationMenu.Sub>',
      _cn: [
        'AppSidebar',
        'relative',
        'h-screen',
        'hidden',
        'lg:flex',
        'border-r',
        'border-gray-100',
        'dark:border-black-400',
        'bg-accent-50',
      ],
      _theme: [
        'flex',
        'flex-row',
        'py-4',
        'justify-center',
        'dark:bg-black-700',
      ],
      _parsed: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        padding: '2rem 0',
        position: 'relative',
        height: '100vh',
        visibility: 'hidden',
        flex: '1 0 auto',
        borderRight: '1px solid #ccc',
        backgroundColor: '#f5f5f5',
      },
      _comment: 'AppSidebar Styles',
      _props: [],
    },
    {
      _parent: 'NavigationMenu',
      _children: 'Item',
      _component: '<NavigationMenu.Item>',
      _cn: [
        'AppSidebarItem',
        'rounded-md',
        'items-center',
        'transition-colors',
        'border-transparent',
        'text-sm',
        'text-gray-600',
        'font-medium',
        'w-full',
        'pr-12',
        'w-full',
        'py-1.5',
        'px-3.5',
        'flex',
        'space-x-2.5',
        'transition-colors',
        'duration-300',
      ],
      _theme: [
        'rounded-md',
        'items-center',
        'transition-colors',
        'border-transparent',
        'text-sm',
        'text-gray-600',
        'font-medium',
        'w-full',
        'pr-12',
        'w-full',
        'py-1.5',
        'px-3.5',
        'flex',
        'space-x-2.5',
        'transition-colors',
        'duration-300',
      ],
      _parsed: {
        display: 'flex',
        alignItems: 'center',
        border: 'transparent',
        fontSize: '0.75rem',
        fontWeight: 600,
        color: '#666',
        marginRight: '6px',
        padding: '4px 8px',
        flex: '1 0 auto',
        transition: 'all 0.3s',
      },
      _comment: 'AppSidebarItem Styles',
      _props: [
        'defaultValue',
        'value',
        'onValueChange',
        'delayDuration',
        'skipDelayDuration',
        'dir',
        'orientation',
        'asChild',
        'disableOutsidePointerEvents',
        'onEscapeKeyDown',
        'onPointerDownOutside',
        'onFocusOutside',
        'onInteractOutside',
        'forceMount',
        'active',
        'onSelect',
        '[data-orientation]',
        '[data-state]',
        '[data-motion]',
        '[data-disabled]',
        '[data-active]',
      ],
    },
    {
      _parent: 'NavigationMenu',
      _children: 'Item',
      _component: '<NavigationMenu.Item>',
      _cn: [
        'AppSidebarItemActive',
        'border-b',
        'border-2',
        'border-accent-200',
      ],
      _theme: [
        'bg-accent-100',
        'dark:bg-primary-300/10',
        'dark:text-primary-contrast',
        'text-current',
        'font-medium',
        'border-b',
        'border-2',
        'border-accent-200',
      ],
      _parsed: {
        backgroundColor: '#f5f5f5',
        color: '#222',
        fontWeight: 600,
        borderBottom: '2px solid #ccc',
      },
      _comment: 'AppSidebarItemActive Styles',
      _props: [
        'defaultValue',
        'value',
        'onValueChange',
        'delayDuration',
        'skipDelayDuration',
        'dir',
        'orientation',
        'asChild',
        'disableOutsidePointerEvents',
        'onEscapeKeyDown',
        'onPointerDownOutside',
        'onFocusOutside',
        'onInteractOutside',
        'forceMount',
        'active',
        'onSelect',
        '[data-orientation]',
        '[data-state]',
        '[data-motion]',
        '[data-disabled]',
        '[data-active]',
      ],
    },
    {
      _parent: 'NavigationMenu',
      _children: 'Item',
      _component: '<NavigationMenu.Item>',
      _cn: [
        'AppSidebarItemNotActive',
        'dark:text-gray-300',
        'dark:hover:text-white',
        'text-gray-600',
        'ring-transparent',
        'active:bg-gray-200',
        'dark:active:bg-black-300',
        'dark:active:bg-black-300',
        'hover:bg-gray-50',
        'dark:hover:bg-black-400',
        'dark:bg-black-600',
      ],
      _theme: [
        'dark:text-gray-300',
        'dark:hover:text-white',
        'text-gray-600',
        'ring-transparent',
        'active:bg-gray-200',
        'dark:active:bg-black-300',
        'dark:active:bg-black-300',
        'hover:bg-gray-50',
        'dark:hover:bg-black-400',
        'dark:bg-black-600',
      ],
      _parsed: {
        color: '#666',
        backgroundColor: '#f5f5f5',
        transition: 'all 0.3s',
        '&:active': {
          backgroundColor: '#ccc',
        },
        '&:hover': {
          backgroundColor: '#eee',
        },
      },
      _comment: 'AppSidebarItemNotActive Styles',
      _props: [
        'defaultValue',
        'value',
        'onValueChange',
        'delayDuration',
        'skipDelayDuration',
        'dir',
        'orientation',
        'asChild',
        'disableOutsidePointerEvents',
        'onEscapeKeyDown',
        'onPointerDownOutside',
        'onFocusOutside',
        'onInteractOutside',
        'forceMount',
        'active',
        'onSelect',
        '[data-orientation]',
        '[data-state]',
        '[data-motion]',
        '[data-disabled]',
        '[data-active]',
      ],
    },
    {
      _parent: 'NavigationMenu',
      _children: 'Item',
      _component: '<NavigationMenu.Item>',
      _cn: [
        'AppSidebarItemIcon',
        'text-gray-600',
        'dark:text-primary-contrast',
      ],
      _theme: ['text-gray-600', 'dark:text-primary-contrast'],
      _parsed: {
        color: '#666',
      },
      _comment: 'AppSidebarItemIcon Styles',
      _props: [
        'defaultValue',
        'value',
        'onValueChange',
        'delayDuration',
        'skipDelayDuration',
        'dir',
        'orientation',
        'asChild',
        'disableOutsidePointerEvents',
        'onEscapeKeyDown',
        'onPointerDownOutside',
        'onFocusOutside',
        'onInteractOutside',
        'forceMount',
        'active',
        'onSelect',
        '[data-orientation]',
        '[data-state]',
        '[data-motion]',
        '[data-disabled]',
        '[data-active]',
      ],
    },
    {
      _parent: 'NavigationMenu',
      _children: 'Item',
      _component: '<NavigationMenu.Item>',
      _cn: ['AppSidebarItemActive', 'AppSidebarItemIcon', 'text-primary-600'],
      _theme: ['text-primary-600'],
      _parsed: {
        color: '#222',
      },
      _comment: 'AppSidebarItemActive .AppSidebarItemIcon Styles',
      _props: [
        'defaultValue',
        'value',
        'onValueChange',
        'delayDuration',
        'skipDelayDuration',
        'dir',
        'orientation',
        'asChild',
        'disableOutsidePointerEvents',
        'onEscapeKeyDown',
        'onPointerDownOutside',
        'onFocusOutside',
        'onInteractOutside',
        'forceMount',
        'active',
        'onSelect',
        '[data-orientation]',
        '[data-state]',
        '[data-motion]',
        '[data-disabled]',
        '[data-active]',
      ],
    },
    {
      _parent: 'NavigationMenu',
      _children: 'Footer',
      _component: '<NavigationMenu.Footer>',
      _cn: [
        'AppSidebarFooterItem',
        'flex',
        'text-sm',
        'space-x-2',
        'items-center',
        'text-gray-500',
        'hover:text-gray-800',
        'dark:text-gray-300',
        'dark:hover:text-white',
      ],
      _theme: [
        'flex',
        'text-sm',
        'space-x-2',
        'items-center',
        'text-gray-500',
        'hover:text-gray-800',
        'dark:text-gray-300',
        'dark:hover:text-white',
      ],
      _parsed: {
        display: 'flex',
        fontSize: '0.875rem',
        justifyContent: 'space-between',
        alignItems: 'center',
        color: '#666',
        transition: 'all 0.3s',
        '&:hover': {
          color: '#888',
        },
      },
      _comment: 'AppSidebarFooterItem Styles',
      _props: [
        'defaultValue',
        'value',
        'onValueChange',
        'delayDuration',
        'skipDelayDuration',
        'dir',
        'orientation',
        'asChild',
        'disableOutsidePointerEvents',
        'onEscapeKeyDown',
        'onPointerDownOutside',
        'onFocusOutside',
        'onInteractOutside',
        'forceMount',
        'active',
        'onSelect',
        '[data-orientation]',
        '[data-state]',
        '[data-motion]',
        '[data-disabled]',
        '[data-active]',
      ],
    },
    {
      _parent: 'NavigationMenu',
      _children: 'Viewport',
      _component: '<NavigationMenu.Viewport>',
      _cn: [
        'FixedHeader',
        'dark:bg-black-500/90',
        'bg-white/90',
        'z-10',
        'w-full',
      ],
      _theme: ['dark:bg-black-500/90', 'bg-white/90', 'z-10', 'w-full'],
      _parsed: {
        position: 'sticky',
        top: 0,
        backgroundColor: '#000',
        backgroundOpacity: 0.9,
        width: '100%',
        zIndex: 10,
      },
      _comment: 'FixedHeader Styles',
      _props: [
        'defaultValue',
        'value',
        'onValueChange',
        'delayDuration',
        'skipDelayDuration',
        'dir',
        'orientation',
        'asChild',
        'disableOutsidePointerEvents',
        'onEscapeKeyDown',
        'onPointerDownOutside',
        'onFocusOutside',
        'onInteractOutside',
        'forceMount',
        'active',
        'onSelect',
        '--radix-navigation-menu-viewport-width',
        '--radix-navigation-menu-viewport-height',
        '[data-orientation]',
        '[data-state]',
        '[data-motion]',
        '[data-disabled]',
        '[data-active]',
      ],
    },
  ],
}
```

### YAML RADIX FROM CSS PROMPT TEMPLATE
```
# /radix.yaml
# Radix Prompt Template
# This is a prompt template for creating a RADIX component. To use this template, fill out each field with the requested information.
# This is a prompt template for creating a RADIX component.
# To use this template, fill out each field with the requested information.
# The _parent field should contain the name of the RADIX component parent.
# The _component field should contain the JSX tag for the RADIX component.
# The _title field should contain a descriptive title for the RADIX component.
# The _description field should contain a description of the RADIX component.
# The _theme field should contain an array of strings representing the Tailwind CSS classes to apply.
# The _cn field should contain an array of strings representing the Tailwind CSS class names.
# The _parsed field should contain an object of key-value pairs representing the parsed CSS styles.
# The _blocks field should contain an array of objects containing the requested data.
# The _comment field should contain a description of the RADIX component.

_parent: Enter the name of the RADIX component parent (Data Format: String, Example: NavigationMenu)
_component: Enter the JSX tag for the RADIX component (Data Format: String, Example: <NavigationMenu>)
_title: Enter a descriptive title for the RADIX component (Data Format: String, Example: RADIX Navigation Menu)
_description: Enter a description of the RADIX component (Data Format: String, Example: This component is used to create a navigation menu)
_theme: Enter an array of strings representing the Tailwind CSS classes to apply (Data Format: Array of strings, Example: ['bg-white', 'text-black', 'flex'])
_cn: Enter an array of strings representing the Tailwind CSS class names (Data Format: Array of strings, Example: ['nav-menu', 'nav-menu-item', 'nav-menu-link'])
_parsed: Enter an object of key-value pairs representing the parsed CSS styles (Data Format: Object, Example: { backgroundColor: 'white', color: 'black', display: 'flex'})
_blocks: Enter an array of objects containing the following data:
    - ref: (Data Format: String, Example: _parent('NavigationMenu'))
    - _children: Enter the name of the RADIX component child (Data Format: String, Example: Root)
    - _component: Enter the JSX tag for the RADIX component child (Data Format: String, Example: <NavigationMenu.Root>)
    - _data: Enter an object of data used to map for this field (Data Format: Object, Example: { name: 'home', label: 'Home' })
    - _cn: Enter an array of strings representing the Tailwind CSS class names (Data Format: Array of strings, Example: ['nav-menu-root', 'nav-menu-item-root'])
    - _theme: Enter an array of strings representing the Tailwind CSS classes to apply (Data Format: Array of strings, Example: ['bg-white', 'text-black'])
    - _parsed: Enter an object of key-value pairs representing the parsed CSS styles (Data Format: Object, Example: { backgroundColor: 'white', color: 'black'})
    - _comment: Enter a description of what the CSS class name should do when used (Data Format: String, Example: This class will apply a white background color and a black text color to the navigation menu root item)
    - _props: Enter an array of strings representing the RADIX component properties and/or child properties that would accomplish the functionality (Data Format: Array of strings, Example: ['defaultValue', 'value', 'onValueChange', 'delayDuration'])
_comment: Describe the RADIX component (Data Format: String, Example: This RADIX Navigation Menu component is used to create a hierarchical navigation menu with multiple levels of nested items)
```
### YAML RADIX_API_TEMPLATE 
Convert SCHEMA_FILTER into a RADIX_API TEMPLATE that works for ANY Radix Component Type.
```
# /radix_api.yaml
# Radix API Template
# This is an API template for creating a RADIX component. To use this template, fill out each field with the requested information.
# This is an API template for creating a RADIX component.
# To use this template, fill out each field with the requested information.
# The _type field should contain the type of the RADIX component.
# The title field should contain a title for the RADIX component.
# The description field should contain a description of the RADIX component.
# The types field should contain an array of strings representing the RADIX component types.
# The properties field should contain an array of strings representing the RADIX component properties.
# The child_properties field should contain an array of strings representing the RADIX component child properties.

_type: Enter the type of the RADIX component (Data Format: String, Example: NavigationMenu)
title: Enter a title for the RADIX component (Data Format: String, Example: RADIX Navigation Menu)
description: Enter a description of the RADIX component (Data Format: String, Example: This component is used to create a navigation menu)
types: Enter an array of strings representing the RADIX component types (Data Format: Array of strings, Example: ['Root', 'Sub', 'List', 'Item', 'Trigger', 'Content', 'Link', 'Indicator', 'Viewport', 'CSSVariables'])
properties: Enter an array of strings representing the RADIX component properties (Data Format: Array of strings, Example: ['defaultValue', 'value', 'onValueChange', 'delayDuration', 'skipDelayDuration', 'dir', 'orientation', 'asChild', 'disableOutsidePointerEvents', 'onEscapeKeyDown', 'onPointerDownOutside', 'onFocusOutside', 'onInteractOutside', 'forceMount', 'active', 'onSelect', '--radix-navigation-menu-viewport-width', '--radix-navigation-menu-viewport-height'])
child_properties: Enter an array of strings representing the RADIX component child properties (Data Format: Array of strings, Example: ['[data-orientation]', '[data-state]', '[data-motion]', '[data-disabled]', '[data-active]'])
```

### CSS PRIMITIVE 

```
{
  [className]: {
    [propertyName]: [propertyValue],
    [subClassName]: {
      [propertyName]: [propertyValue]
    }
  }
}
```

### CSS KEY-VALUE PAIR FORMAT

```
Generic Template: [className]:[propertyName]:[propertyValue];[subClassName].[propertyName]:[propertyValue];
```
