nayan/dist/src/website/services/CodeBlocks.d.ts

<div align="center"> <img width="200" src="https://github.com/ursnj/nayan/blob/main/public/nayan.png?raw=true"> </div> <h1 align="center">Nayan UI</h1>

export declare const installCode = "npm install nayan\nyarn add nayan";
export declare const tailwindCode = "module.exports = {\n  darkMode: ['class'],\n  content: ['./src/**/*.{ts,tsx}', './index.html', './node_modules/nayan/dist/index.es.js'], // Check node_modules path properly\n  theme: {\n    extend: {\n      colors: {\n        primary: 'var(--COLOR_PRIMARY)',\n        'primary-light': 'var(--COLOR_PRIMARY_LIGHT)',\n        'primary-dark': 'var(--COLOR_PRIMARY_DARK)',\n        background: 'var(--COLOR_BACKGROUND)',\n        text: 'var(--COLOR_TEXT)',\n        muted: 'var(--COLOR_MUTED)',\n        border: 'var(--COLOR_BORDER)',\n        card: 'var(--COLOR_CARD)',\n        shadow: 'var(--COLOR_SHADOW)',\n        overlay: 'var(--COLOR_OVERLAY)'\n      }\n    }\n  },\n  plugins: [require('tailwindcss-animate')]\n};";
export declare const cssCode = "@import 'nayan/dist/styles.css';\n\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --COLOR_PRIMARY: #005ee6;\n    --COLOR_PRIMARY_DARK: #0043a3;\n    --COLOR_PRIMARY_LIGHT: #0069ff;\n    --COLOR_BACKGROUND: #f0f2f5;\n    --COLOR_CARD: #ffffff;\n    --COLOR_TEXT: #050505;\n    --COLOR_MUTED: 'gray';\n    --COLOR_BORDER: #e0e0e0;\n    --COLOR_SHADOW: #d3d3d3;\n    --COLOR_OVERLAY: rgba(255, 255, 255, .7);\n  }\n\n  [data-theme='dark'] {\n    --COLOR_PRIMARY: #2997ff;\n    --COLOR_PRIMARY_DARK: #0a84ff;\n    --COLOR_PRIMARY_LIGHT: #7dc1ff;\n    --COLOR_BACKGROUND: #1f1f1f;\n    --COLOR_CARD: #353535;\n    --COLOR_TEXT: #f5f5f5;\n    --COLOR_MUTED: #afafaf;\n    --COLOR_BORDER: #4f4f4f;\n    --COLOR_SHADOW: #cbcbcb;\n    --COLOR_OVERLAY: rgba(0, 0, 0, .7);\n  }\n\n  body {\n    color: var(--COLOR_TEXT) !important;\n    background-color: var(--COLOR_BACKGROUND) !important;\n  }\n}";
export declare const appCode = "import { useState } from 'react';\nimport { NTheme, THEMES, useLocalStorage } from 'nayan';\n\nconst App = () => {\n  const [theme, setTheme] = useLocalStorage('THEME', THEMES.LIGHT);\n\n  const toggleTheme = () => {\n    setTheme(theme === THEMES.LIGHT ? THEMES.DARK : THEMES.LIGHT);\n  };\n\n  return (\n    <NTheme theme={theme}>\n      <div className=\"p-3\" onClick={toggleTheme}>TOGGLE THEME</div>\n    </NTheme>\n  );\n};\n\nexport default App;";
export declare const accordionCode = "import { NAccordion, AccordionTypes } from 'nayan';\n\nconst Accordion = () => {\n  const items = [\n    { title: 'Heading 1', message: 'Description 1' },\n    { title: 'Heading 2', message: 'Description 2' }\n  ];\n\n  return (\n    <div>\n      <h1 className=\"text-text mb-3 text-lg\">Single:</h1>\n      <NAccordion type={AccordionTypes.SINGLE} items={items} />\n      <h1 className=\"text-text mb-3 mt-5 text-lg\">Multiple:</h1>\n      <NAccordion type={AccordionTypes.MULTIPLE} items={items} />\n    </div>\n  );\n};\n\nexport default Accordion;";
export declare const alertCode = "import { NAlert, AlertTypes } from 'nayan';\n\nconst Alert = () => {\n  return (\n    <div>\n      <NAlert type={AlertTypes.DEFAULT} message=\"New version available!\" className=\"mb-3\" onClose={() => console.log('Alert closed')} />\n      <NAlert type={AlertTypes.INFO} message=\"New version available!\" className=\"mb-3\" onClose={() => console.log('Alert closed')} />\n      <NAlert type={AlertTypes.SUCCESS} message=\"New version available!\" className=\"mb-3\" onClose={() => console.log('Alert closed')} />\n      <NAlert type={AlertTypes.WARNING} message=\"New version available!\" className=\"mb-3\" onClose={() => console.log('Alert closed')} />\n      <NAlert type={AlertTypes.ERROR} title=\"Error!\" message=\"New version available!\" className=\"mb-3\" onClose={() => console.log('Alert closed')} />\n    </div>\n  );\n};\n\nexport default Alert;";
export declare const badgeCode = "import { NBadge, BadgeSize } from 'nayan';\n\nconst Badge = () => {\n  return (\n    <div>\n      <NBadge size={BadgeSize.XS} className=\"text-text bg-card border border-border mr-2\">Sample</NBadge>\n      <NBadge size={BadgeSize.XS} className=\"text-blue-700 bg-blue-300 mr-2\">Sample</NBadge>\n      <NBadge size={BadgeSize.SM} className=\"text-green-700 bg-green-300 mr-2\">Sample</NBadge>\n      <NBadge size={BadgeSize.MD} className=\"text-yellow-700 bg-yellow-300 mr-2\">Sample</NBadge>\n      <NBadge size={BadgeSize.LG} className=\"text-red-700 bg-red-300 mr-2\">Sample</NBadge>\n    </div>\n  );\n};\n\nexport default Badge;";
export declare const buttonCode = "import { NButton, ButtonSize } from 'nayan';\n\nconst Button = () => {\n  return (\n    <div>\n      <NButton size={Size.XS} disabled className=\"text-text bg-card border border-border mr-2\">\n        Button\n      </NButton>\n      <NButton type=\"submit\" size={ButtonSize.XS} onClick={() => console.log('Button clicked')} className=\"text-white bg-blue-500 hover:bg-blue-600 border border-blue-600 mr-2\">\n        Button\n      </NButton>\n      <NButton type=\"reset\" size={ButtonSize.SM} onClick={() => console.log('Button clicked')} className=\"text-white bg-green-500 hover:bg-green-600 border border-green-600 mr-2\">\n        Button\n      </NButton>\n      <NButton size={ButtonSize.MD} isLoading={true} onClick={() => console.log('Button clicked')} className=\"text-white bg-yellow-500 hover:bg-yellow-600 border border-yellow-600 mr-2\">\n        Button\n      </NButton>\n      <NButton size={ButtonSize.LG} onClick={() => console.log('Button clicked')} className=\"mr-2\">\n        Button\n      </NButton>\n      <NButton size={ButtonSize.LG} isOutline={true} onClick={() => console.log('Button clicked')} className=\"mr-2\">\n        Button\n      </NButton>\n      <NButton size={ButtonSize.LG} onClick={() => console.log('Button clicked')} className=\"text-white bg-purple-500 hover:bg-purple-600 border border-purple-600 rounded-full mr-2\">\n        Button\n      </NButton>\n    </div>\n  );\n};\n\nexport default Button";
export declare const buttonGroupCode = "import { useState } from 'react';\nimport { NButtonGroup } from 'nayan';\n\nconst items = ['Startup', 'Business', 'Enterprise'];\n\nconst ButtonGroup = () => {\n  const [selected, setSelected] = useState(items[0]);\n  return <NButtonGroup disabled={false} items={items} selected={selected} onChange={setSelected} />;\n};\n\nexport default ButtonGroup;";
export declare const cardCode = "import { NCard } from 'nayan';\n\nconst Card = () => {\n  return <NCard className=\"p-3\">This is sample card.</NCard>\n};\n\nexport default Card;";
export declare const checkBoxCode = "import { useState } from 'react';\nimport { NCheck, NLink } from 'nayan';\n\nconst Checkbox = () => {\n  const [checked, setChecked] = useState(true);\n\n  return (\n    <NCheck checked={checked} disabled={false} onChange={checked => setChecked(checked)}>\n      Sample label for checkbox. accept <NLink> terms</NLink>\n    </NCheck>\n  );\n};\n\nexport default Checkbox;";
export declare const comboBoxCode = "import { NCombo } from 'nayan';\nimport { useState } from 'react';\n\nconst items = [\n  { value: 'startup', label: 'Startup' },\n  { value: 'business', label: 'Business' },\n  { value: 'enterprise', label: 'Enterprise' }\n];\n\nconst Combobox = () => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [selected, setSelected] = useState(items[0].value);\n\n  return (\n    <NCombo\n      isOpen={isOpen}\n      setIsOpen={setIsOpen}\n      selected={selected}\n      placeholder=\"Select Business\"\n      label=\"Business Type\"\n      items={items}\n      onChange={setSelected}\n    />\n  );\n};\n\nexport default Combobox;";
export declare const confirmAlertCode = "import { useState } from 'react';\nimport { NConfirmAlert, NButton } from 'nayan';\n\nconst ConfirmAlert = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <div>\n      <NConfirmAlert\n        isOpen={isOpen}\n        title=\"Are you absolutely sure?\"\n        message=\"This action cannot be undone. This will permanently delete your account and remove your data from our servers.\"\n        onResult={result => console.log('Alert Clicked', result)}\n        onClose={() => setIsOpen(false)}\n      />\n      <NButton onClick={() => setIsOpen(true)}>Show Alert</NButton>\n    </div>\n  );\n};\n\nexport default ConfirmAlert;";
export declare const dialogCode = "import { useState } from 'react';\nimport { NButton, NDialog, DialogSize } from 'nayan';\n\nconst Dialog = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <div>\n      <NDialog isOpen={isOpen} closeModal={() => setIsOpen(false)} size={DialogSize.MD} title=\"Payment confirmation\">\n        Your payment has been successfully submitted. We\u2019ve sent you an email with all of the details of your order.\n      </NDialog>\n      <NButton onClick={() => setIsOpen(true)}>Show Dialog</NButton>\n    </div>\n  );\n};\n\nexport default Dialog;";
export declare const dividerCode = "import { NDivider } from 'nayan';\n\nconst Divider = () => {\n  return (\n    <div>\n      <h1 className=\"text-text mb-3 text-lg\">Horizontal:</h1>\n      <NDivider className=\"my-3\" />\n      <h1 className=\"text-text mb-3 text-lg\">Vertical:</h1>\n      <NDivider orientation=\"vertical\" className=\"h-5\" />\n    </div>\n  );\n};\n\nexport default Divider;";
export declare const infiniteScrollCode = "import { NCard, NInfiniteScroll, NLoading } from 'nayan';\nimport React, { useState } from 'react';\n\nconst InfiniteScroll = () => {\n  const [items, setItems] = useState(new Array(20).fill(''));\n  const [isFetching, setIsFetching] = useState(false);\n\n  const fetchNextPage = () => {\n    setIsFetching(true);\n    setTimeout(() => {\n      const newItems = [...items, ...new Array(20).fill('')];\n      setItems(newItems);\n      setIsFetching(false);\n    }, 2000);\n  };\n\n  return (\n    <NInfiniteScroll\n      next={() => !isFetching && fetchNextPage()}\n      hasMore={true}\n      loader={<NLoading />}\n      dataLength={items.length}\n      scrollThreshold={0.99}>\n        {items.map((item: any, index: number) => (\n          <NCard className=\"p-3 mb-3\">Item {index}</NCard>\n        ))}\n    </NInfiniteScroll>\n  );\n};\n\nexport default InfiniteScroll;";
export declare const inputCode = "import { NInput } from 'nayan';\nimport { useState } from 'react';\n\nconst Input = () => {\n  const [email, setEmail] = useState('niranjan.devasani@gmail.com');\n\n  return (\n    <NInput id=\"email\" type=\"email\" label=\"Email\" placeholder=\"Enter email\" className=\"mb-3\" value={email} onChange={e => setEmail(e.target.value)} />\n  );\n};\n\nexport default Input;";
export declare const inputHookCode = "import { NButton, NFormInput } from 'nayan';\nimport { useForm } from 'react-hook-form';\n\nconst FormInput = () => {\n  const { control, handleSubmit, formState: { errors },} = useForm({\n    defaultValues: {\n      email: \"niranjan.devasani@gmail.com\"\n    },\n  });\n\n  return (\n    <form onSubmit={handleSubmit(onSubmit)}>\n      <NFormInput\n        control={control}\n        errors={errors}\n        name=\"email\"\n        id=\"in1\"\n        type=\"email\"\n        label=\"Email\"\n        placeholder=\"Enter email\"\n        className=\"mb-3\"\n      />\n      <NButton type=\"submit\">Submit</NButton>\n    </form>\n  );\n};\n\nexport default FormInput;";
export declare const linkCode = "import { NLink } from 'nayan';\n\nconst Link = () => {\n  return (\n    <div>\n      <div className=\"text-text\">\n        This is a sample paragraph with some <NLink>Link</NLink>.\n      </div>\n      <div className=\"text-text\">\n        This is a sample paragraph with some custom styled <NLink className=\"text-red-700\">Link</NLink>.\n      </div>\n    </div>\n  );\n};\n\nexport default Link;";
export declare const linkifyCode = "import { NLinkify } from 'nayan';\n\nconst Linkify = () => {\n  return (\n    <NLinkify>Checkout our new landing page at nayanui.com and new email hello@nayanui.com</NLinkify>\n  );\n};\n\nexport default Linkify;";
export declare const loadingCode = "import { NLoading } from 'nayan';\n\nconst Loading = () => {\n  return <NLoading className=\"text-primary\" />\n};\n\nexport default Loading;";
export declare const menuCode = "import { NMenu,NMenuItem, MenuSize, NMenuNested, NButton } from 'nayan';\nimport { User } from 'lucide-react';\n\nconst Menu = () => {\n  return (\n    <NMenu align=\"start\" title=\"My Account\" size={MenuSize.LG} trigger={<NButton>Show Menu</NButton>}>\n      <NMenuItem title=\"Profile\" icon={User} shortcut=\"\u2318P\" />\n      <NMenuNested trigger={<NMenuItem title=\"Share\" icon={User} className=\"p-0\" />}>\n        <NMenuItem title=\"Facebook\" icon={User} shortcut=\"\u2318P\" />\n        <NMenuItem title=\"Twitter\" icon={User} shortcut=\"\u2318P\" />\n      </NMenuNested>\n      <NMenuItem title=\"Settings\" icon={User} shortcut=\"\u2318P\" separator={true} />\n      <NMenuItem title=\"Logout\" icon={User} shortcut=\"\u2318P\" />\n    </NMenu>\n  );\n};\n\nexport default Menu;";
export declare const popoverCode = "import { NPopover, NButton, PopoverSize } from 'nayan';\n\nconst Popover = () => {\n  return (\n    <NPopover size={PopoverSize.MD} trigger={<NButton>Show Popover</NButton>}>\n      <div className=\"overflow-hidden p-3\">\n        <div className=\"text-sm font-medium text-text\">Documentation</div>\n        <div className=\"text-sm text-muted\">Start integrating products and tools</div>\n      </div>\n    </NPopover>\n  );\n};\n\nexport default Popover;";
export declare const progressCode = "import { NProgress } from 'nayan';\n\nconst Progress = () => {\n  return <NProgress value={50} />;\n};\n\nexport default Progress;";
export declare const radioGroupCode = "import { useState } from 'react';\nimport { NRadioGroup } from 'nayan';\n\nconst items = [\n  { value: 'startup', label: 'Startup' },\n  { value: 'business', label: 'Business' },\n  { value: 'enterprise', label: 'Enterprise' }\n];\n\nconst RadioGroupExample = () => {\n  const [selected, setSelected] = useState(items[0].value);\n\n  return (\n    <div>\n      <h1 className=\"text-text mb-3 text-base\">Horizontal:</h1>\n      <NRadioGroup items={items} selected={selected} setSelected={setSelected} />\n      <div className=\"mt-5\" />\n      <h1 className=\"text-text mb-3 text-base\">Vertical:</h1>\n      <NRadioGroup orientation=\"vertical\" items={items} selected={selected} setSelected={setSelected} />\n    </div>\n  );\n};\n\nexport default RadioGroup;";
export declare const selectCode = "import { useState } from 'react';\nimport { NSelect } from 'nayan';\n\nconst items = [\n  { value: 'startup', label: 'Startup' },\n  { value: 'business', label: 'Business' },\n  { value: 'enterprise', label: 'Enterprise' }\n];\n\nconst Select = () => {\n  const [selected, setSelected] = useState(items[0]);\n  return (\n    <NSelect\n      isMulti={true}\n      isCreatable={true}\n      placeholder=\"Select something...\"\n      isClearable={true}\n      isSearchable={true}\n      isDisabled={false}\n      value={selected}\n      options={items}\n      onCreateOptions={value => console.log(value)}\n      onChangeOptions={values => setSelected(values)}\n    />\n  );\n};\n\nexport default Select;";
export declare const sheetCode = "import { useState } from 'react';\nimport { NSheet, NButton, Size } from 'nayan';\n\nconst SheetExample = () => {\n  const [isOpen, setIsOpen] = useState(false);\n\n  return (\n    <div>\n      <NButton onClick={() => setIsOpen(true)}>Show Sheet</NButton>\n      <NSheet isOpen={isOpen} size={Size.SM} title=\"Edit Profile\" onCloseSheet={() => setIsOpen(false)}>\n        <div className=\"w-full h-full p-3\">\n          Your payment has been successfully submitted. We\u2019ve sent you an email with all of the details of your order.\n        </div>\n      </NSheet>\n    </div>\n  );\n};\n\nexport default Sheet;";
export declare const skeletonCode = "import { NSkeleton } from 'nayan';\n\nconst Skeleton = () => {\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <NSkeleton className=\"h-12 w-12 rounded-full\" />\n      <div className=\"space-y-2\">\n        <NSkeleton className=\"h-4 w-[250px]\" />\n        <NSkeleton className=\"h-4 w-[180px]\" />\n      </div>\n    </div>\n  );\n};\n\nexport default Skeleton;";
export declare const sliderCode = "import { NSlider } from 'nayan';\n\nconst Slider = () => {\n  return (\n    <NSlider defaultValue={50} max={100} step={1} disabled={false} onChange={value => console.log(value)} />\n  );\n};\n\nexport default Slider;";
export declare const switchCode = "import { useState } from 'react';\nimport { NSwitch } from 'nayan';\n\nconst Switch = () => {\n  const [enabled, setEnabled] = useState(false);\n  return <NSwitch label=\"Is Dark Mode\" enabled={enabled} onChange={setEnabled} />;\n};\n\nexport default Switch;";
export declare const tableCode = "import { NTable } from 'nayan';\n\nconst CustomComponent = ({row, col, ...remaining}: any) => {\n  return <div className=\"text-primary\">Oops</div>;\n};\n\nconst Table = () => {\n  const columnDef = [\n    { name: 'invoice', title: 'Invoice', className: 'w-[100px]' },\n    { name: 'status', title: 'Status' },\n    { name: 'method', title: 'Method' },\n    { name: 'amount', title: 'Amount', className: 'text-right' },\n    { name: 'custom', title: 'Custom', className: 'text-right', component: CustomComponent }\n  ];\n\n  const data = [\n    { invoice: '10001', status: 'Completed', method: 'Credit Card', amount: '$1000' },\n    { invoice: '10002', status: 'In progress', method: 'Net Banking', amount: '$500' }\n  ];\n\n  return <NTable className=\"bg-card\" caption=\"Invoice table\" columnDef={columnDef} data={data} />;\n};\n\nexport default Table;";
export declare const tabsCode = "import { useState } from 'react';\nimport { NTabs, NTabsContent } from 'nayan';\n\nconst items = ['POSTS', 'SAVED'];\n\nconst Tabs = () => {\n  const [selected, setSelected] = useState(items[0]);\n\n  return (\n    <div>\n      <h1 className=\"text-text mb-3 text-lg text-left\">Tabs:</h1>\n      <NTabs items={items} selected={selected} onChange={setSelected}>\n        <NTabsContent item={items[0]} className=\"px-3 py-2 text-text\">\n          Content 1\n        </NTabsContent>\n        <NTabsContent item={items[1]} className=\"px-3 py-2 text-text\">\n          Content 2\n        </NTabsContent>\n      </NTabs>\n      <h1 className=\"text-text mb-3 mt-5 text-lg text-left\">Full Width:</h1>\n      <NTabs isFull={true} items={items} selected={selected} onChange={setSelected}>\n        <NTabsContent item={items[0]} className=\"px-3 py-2 text-text\">\n          Content 3\n        </NTabsContent>\n        <NTabsContent otem={items[1]} className=\"px-3 py-2 text-text\">\n          Content 4\n        </NTabsContent>\n      </NTabs>\n    </div>\n  );\n};\n\nexport default Tabs;";
export declare const textareaCode = "import { useState } from 'react';\nimport { NTextarea } from 'nayan';\n\nconst Textarea = () => {\n  const [address, setAddress] = useState('Bangalore, India');\n\n  return (\n    <NTextarea\n      id=\"ta1\"\n      label=\"Address\"\n      placeholder=\"Enter address\"\n      className=\"mb-3\"\n      rows={3}\n      value={address}\n      onChange={e => setAddress(e.target.value)}\n    />\n  );\n};\n\nexport default Textarea;";
export declare const toastCode = "import { useToast } from 'nayan';\n\nconst Toast = () => {\n  const toast = useToast();\n  return (\n    <div>\n      <NButton onClick={() => toast('Simple Toaster!')}>\n        Show Simple Toast\n      </NButton>\n      <NButton className=\"ml-5\" onClick={() => toast('Toaster Description!', 'Toaster Title')}>\n        Show Toast with Title\n      </NButton>\n    </div>\n  );\n};\n\nexport default Toast;";
export declare const tooltipCode = "import { NTooltip, NButton } from 'nayan';\n\nconst Tooltip = () => {\n  return (\n    <NTooltip message=\"This is sample tool tip! This is sample tool tip This is sample tool tip This is sample tool tip \">\n      <NButton>Show Tooltip</NButton>\n    </NTooltip>\n  );\n};\n\nexport default Tooltip;";