@databricks/appkit 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (239) hide show
  1. package/CLAUDE.md +121 -1231
  2. package/NOTICE.md +1 -1
  3. package/bin/appkit.js +3 -0
  4. package/dist/appkit/package.js +1 -1
  5. package/dist/cache/index.js +3 -3
  6. package/dist/cache/index.js.map +1 -1
  7. package/dist/cli/commands/docs.js +47 -0
  8. package/dist/cli/commands/docs.js.map +1 -0
  9. package/dist/cli/commands/generate-types.js +38 -0
  10. package/dist/cli/commands/generate-types.js.map +1 -0
  11. package/dist/cli/commands/lint.js +104 -0
  12. package/dist/cli/commands/lint.js.map +1 -0
  13. package/dist/cli/commands/setup.js +121 -0
  14. package/dist/cli/commands/setup.js.map +1 -0
  15. package/dist/cli/index.d.ts +1 -0
  16. package/dist/cli/index.js +24 -0
  17. package/dist/cli/index.js.map +1 -0
  18. package/dist/index.js.map +1 -1
  19. package/dist/plugin/plugin.d.ts +1 -0
  20. package/dist/plugin/plugin.d.ts.map +1 -1
  21. package/dist/plugin/plugin.js +1 -0
  22. package/dist/plugin/plugin.js.map +1 -1
  23. package/dist/server/remote-tunnel/remote-tunnel-manager.js +9 -9
  24. package/dist/server/remote-tunnel/remote-tunnel-manager.js.map +1 -1
  25. package/dist/server/utils.js +6 -6
  26. package/dist/server/utils.js.map +1 -1
  27. package/dist/shared/src/execute.d.ts +1 -0
  28. package/dist/shared/src/execute.d.ts.map +1 -1
  29. package/dist/shared/src/plugin.d.ts +3 -0
  30. package/dist/shared/src/plugin.d.ts.map +1 -1
  31. package/dist/telemetry/types.d.ts +1 -0
  32. package/dist/telemetry/types.d.ts.map +1 -1
  33. package/dist/type-generator/index.js +1 -1
  34. package/dist/type-generator/index.js.map +1 -1
  35. package/docs/docs/api/appkit/Class.AppKitError/index.html +77 -0
  36. package/docs/docs/api/appkit/Class.AppKitError.md +154 -0
  37. package/docs/docs/api/appkit/Class.AuthenticationError/index.html +110 -0
  38. package/docs/docs/api/appkit/Class.AuthenticationError.md +236 -0
  39. package/docs/docs/api/appkit/Class.ConfigurationError/index.html +112 -0
  40. package/docs/docs/api/appkit/Class.ConfigurationError.md +243 -0
  41. package/docs/docs/api/appkit/Class.ConnectionError/index.html +120 -0
  42. package/docs/docs/api/appkit/Class.ConnectionError.md +265 -0
  43. package/docs/docs/api/appkit/Class.ExecutionError/index.html +116 -0
  44. package/docs/docs/api/appkit/Class.ExecutionError.md +250 -0
  45. package/docs/docs/api/appkit/Class.InitializationError/index.html +104 -0
  46. package/docs/docs/api/appkit/Class.InitializationError.md +222 -0
  47. package/docs/docs/api/appkit/Class.Plugin/index.html +149 -0
  48. package/docs/docs/api/appkit/Class.Plugin.md +392 -0
  49. package/docs/docs/api/appkit/Class.ServerError/index.html +108 -0
  50. package/docs/docs/api/appkit/Class.ServerError.md +229 -0
  51. package/docs/docs/api/appkit/Class.TunnelError/index.html +108 -0
  52. package/docs/docs/api/appkit/Class.TunnelError.md +231 -0
  53. package/docs/docs/api/appkit/Class.ValidationError/index.html +106 -0
  54. package/docs/docs/api/appkit/Class.ValidationError.md +225 -0
  55. package/docs/docs/api/appkit/Function.appKitTypesPlugin/index.html +24 -0
  56. package/docs/docs/api/appkit/Function.appKitTypesPlugin.md +20 -0
  57. package/docs/docs/api/appkit/Function.createApp/index.html +24 -0
  58. package/docs/docs/api/appkit/Function.createApp.md +31 -0
  59. package/docs/docs/api/appkit/Function.isSQLTypeMarker/index.html +25 -0
  60. package/docs/docs/api/appkit/Function.isSQLTypeMarker.md +32 -0
  61. package/docs/docs/api/appkit/Interface.BasePluginConfig/index.html +28 -0
  62. package/docs/docs/api/appkit/Interface.BasePluginConfig.md +37 -0
  63. package/docs/docs/api/appkit/Interface.CacheConfig/index.html +63 -0
  64. package/docs/docs/api/appkit/Interface.CacheConfig.md +131 -0
  65. package/docs/docs/api/appkit/Interface.ITelemetry/index.html +73 -0
  66. package/docs/docs/api/appkit/Interface.ITelemetry.md +144 -0
  67. package/docs/docs/api/appkit/Interface.StreamExecutionSettings/index.html +26 -0
  68. package/docs/docs/api/appkit/Interface.StreamExecutionSettings.md +30 -0
  69. package/docs/docs/api/appkit/Interface.TelemetryConfig/index.html +32 -0
  70. package/docs/docs/api/appkit/Interface.TelemetryConfig.md +48 -0
  71. package/docs/docs/api/appkit/TypeAlias.IAppRouter/index.html +18 -0
  72. package/docs/docs/api/appkit/TypeAlias.IAppRouter.md +8 -0
  73. package/docs/docs/api/appkit/Variable.sql/index.html +98 -0
  74. package/docs/docs/api/appkit/Variable.sql.md +260 -0
  75. package/docs/docs/api/appkit/index.html +28 -0
  76. package/docs/docs/api/appkit-ui/data/AreaChart/index.html +29 -0
  77. package/docs/docs/api/appkit-ui/data/AreaChart.md +79 -0
  78. package/docs/docs/api/appkit-ui/data/BarChart/index.html +29 -0
  79. package/docs/docs/api/appkit-ui/data/BarChart.md +74 -0
  80. package/docs/docs/api/appkit-ui/data/DataTable/index.html +36 -0
  81. package/docs/docs/api/appkit-ui/data/DataTable.md +69 -0
  82. package/docs/docs/api/appkit-ui/data/DonutChart/index.html +29 -0
  83. package/docs/docs/api/appkit-ui/data/DonutChart.md +72 -0
  84. package/docs/docs/api/appkit-ui/data/HeatmapChart/index.html +35 -0
  85. package/docs/docs/api/appkit-ui/data/HeatmapChart.md +91 -0
  86. package/docs/docs/api/appkit-ui/data/LineChart/index.html +29 -0
  87. package/docs/docs/api/appkit-ui/data/LineChart.md +77 -0
  88. package/docs/docs/api/appkit-ui/data/PieChart/index.html +29 -0
  89. package/docs/docs/api/appkit-ui/data/PieChart.md +72 -0
  90. package/docs/docs/api/appkit-ui/data/RadarChart/index.html +29 -0
  91. package/docs/docs/api/appkit-ui/data/RadarChart.md +74 -0
  92. package/docs/docs/api/appkit-ui/data/ScatterChart/index.html +29 -0
  93. package/docs/docs/api/appkit-ui/data/ScatterChart.md +76 -0
  94. package/docs/docs/api/appkit-ui/index.html +23 -0
  95. package/docs/docs/api/appkit-ui/styling/index.html +74 -0
  96. package/docs/docs/api/appkit-ui/styling.md +81 -0
  97. package/docs/docs/api/appkit-ui/ui/Accordion/index.html +48 -0
  98. package/docs/docs/api/appkit-ui/ui/Accordion.md +139 -0
  99. package/docs/docs/api/appkit-ui/ui/Alert/index.html +41 -0
  100. package/docs/docs/api/appkit-ui/ui/Alert.md +89 -0
  101. package/docs/docs/api/appkit-ui/ui/AlertDialog/index.html +97 -0
  102. package/docs/docs/api/appkit-ui/ui/AlertDialog.md +282 -0
  103. package/docs/docs/api/appkit-ui/ui/AspectRatio/index.html +27 -0
  104. package/docs/docs/api/appkit-ui/ui/AspectRatio.md +46 -0
  105. package/docs/docs/api/appkit-ui/ui/Avatar/index.html +41 -0
  106. package/docs/docs/api/appkit-ui/ui/Avatar.md +90 -0
  107. package/docs/docs/api/appkit-ui/ui/Badge/index.html +27 -0
  108. package/docs/docs/api/appkit-ui/ui/Badge.md +38 -0
  109. package/docs/docs/api/appkit-ui/ui/Breadcrumb/index.html +69 -0
  110. package/docs/docs/api/appkit-ui/ui/Breadcrumb.md +193 -0
  111. package/docs/docs/api/appkit-ui/ui/Button/index.html +27 -0
  112. package/docs/docs/api/appkit-ui/ui/Button.md +39 -0
  113. package/docs/docs/api/appkit-ui/ui/ButtonGroup/index.html +38 -0
  114. package/docs/docs/api/appkit-ui/ui/ButtonGroup.md +68 -0
  115. package/docs/docs/api/appkit-ui/ui/Calendar/index.html +34 -0
  116. package/docs/docs/api/appkit-ui/ui/Calendar.md +154 -0
  117. package/docs/docs/api/appkit-ui/ui/Card/index.html +69 -0
  118. package/docs/docs/api/appkit-ui/ui/Card.md +222 -0
  119. package/docs/docs/api/appkit-ui/ui/Carousel/index.html +55 -0
  120. package/docs/docs/api/appkit-ui/ui/Carousel.md +152 -0
  121. package/docs/docs/api/appkit-ui/ui/ChartContainer/index.html +58 -0
  122. package/docs/docs/api/appkit-ui/ui/ChartContainer.md +343 -0
  123. package/docs/docs/api/appkit-ui/ui/Checkbox/index.html +27 -0
  124. package/docs/docs/api/appkit-ui/ui/Checkbox.md +53 -0
  125. package/docs/docs/api/appkit-ui/ui/Collapsible/index.html +41 -0
  126. package/docs/docs/api/appkit-ui/ui/Collapsible.md +125 -0
  127. package/docs/docs/api/appkit-ui/ui/Command/index.html +83 -0
  128. package/docs/docs/api/appkit-ui/ui/Command.md +287 -0
  129. package/docs/docs/api/appkit-ui/ui/ContextMenu/index.html +111 -0
  130. package/docs/docs/api/appkit-ui/ui/ContextMenu.md +419 -0
  131. package/docs/docs/api/appkit-ui/ui/Dialog/index.html +90 -0
  132. package/docs/docs/api/appkit-ui/ui/Dialog.md +285 -0
  133. package/docs/docs/api/appkit-ui/ui/Drawer/index.html +90 -0
  134. package/docs/docs/api/appkit-ui/ui/Drawer.md +387 -0
  135. package/docs/docs/api/appkit-ui/ui/DropdownMenu/index.html +111 -0
  136. package/docs/docs/api/appkit-ui/ui/DropdownMenu.md +478 -0
  137. package/docs/docs/api/appkit-ui/ui/Empty/index.html +54 -0
  138. package/docs/docs/api/appkit-ui/ui/Empty.md +109 -0
  139. package/docs/docs/api/appkit-ui/ui/Field/index.html +87 -0
  140. package/docs/docs/api/appkit-ui/ui/Field.md +201 -0
  141. package/docs/docs/api/appkit-ui/ui/FormControl/index.html +59 -0
  142. package/docs/docs/api/appkit-ui/ui/FormControl.md +128 -0
  143. package/docs/docs/api/appkit-ui/ui/HoverCard/index.html +39 -0
  144. package/docs/docs/api/appkit-ui/ui/HoverCard.md +131 -0
  145. package/docs/docs/api/appkit-ui/ui/Input/index.html +27 -0
  146. package/docs/docs/api/appkit-ui/ui/Input.md +35 -0
  147. package/docs/docs/api/appkit-ui/ui/InputGroup/index.html +59 -0
  148. package/docs/docs/api/appkit-ui/ui/InputGroup.md +123 -0
  149. package/docs/docs/api/appkit-ui/ui/InputOTP/index.html +48 -0
  150. package/docs/docs/api/appkit-ui/ui/InputOTP.md +124 -0
  151. package/docs/docs/api/appkit-ui/ui/Item/index.html +78 -0
  152. package/docs/docs/api/appkit-ui/ui/Item.md +185 -0
  153. package/docs/docs/api/appkit-ui/ui/Kbd/index.html +30 -0
  154. package/docs/docs/api/appkit-ui/ui/Kbd.md +39 -0
  155. package/docs/docs/api/appkit-ui/ui/Label/index.html +27 -0
  156. package/docs/docs/api/appkit-ui/ui/Label.md +44 -0
  157. package/docs/docs/api/appkit-ui/ui/Menubar/index.html +117 -0
  158. package/docs/docs/api/appkit-ui/ui/Menubar.md +484 -0
  159. package/docs/docs/api/appkit-ui/ui/NavigationMenu/index.html +76 -0
  160. package/docs/docs/api/appkit-ui/ui/NavigationMenu.md +338 -0
  161. package/docs/docs/api/appkit-ui/ui/Pagination/index.html +69 -0
  162. package/docs/docs/api/appkit-ui/ui/Pagination.md +191 -0
  163. package/docs/docs/api/appkit-ui/ui/Popover/index.html +45 -0
  164. package/docs/docs/api/appkit-ui/ui/Popover.md +173 -0
  165. package/docs/docs/api/appkit-ui/ui/Progress/index.html +27 -0
  166. package/docs/docs/api/appkit-ui/ui/Progress.md +51 -0
  167. package/docs/docs/api/appkit-ui/ui/RadioGroup/index.html +33 -0
  168. package/docs/docs/api/appkit-ui/ui/RadioGroup.md +83 -0
  169. package/docs/docs/api/appkit-ui/ui/ResizableHandle/index.html +41 -0
  170. package/docs/docs/api/appkit-ui/ui/ResizableHandle.md +136 -0
  171. package/docs/docs/api/appkit-ui/ui/ScrollArea/index.html +34 -0
  172. package/docs/docs/api/appkit-ui/ui/ScrollArea.md +83 -0
  173. package/docs/docs/api/appkit-ui/ui/Select/index.html +82 -0
  174. package/docs/docs/api/appkit-ui/ui/Select.md +267 -0
  175. package/docs/docs/api/appkit-ui/ui/Separator/index.html +27 -0
  176. package/docs/docs/api/appkit-ui/ui/Separator.md +56 -0
  177. package/docs/docs/api/appkit-ui/ui/Sheet/index.html +76 -0
  178. package/docs/docs/api/appkit-ui/ui/Sheet.md +236 -0
  179. package/docs/docs/api/appkit-ui/ui/Sidebar/index.html +183 -0
  180. package/docs/docs/api/appkit-ui/ui/Sidebar.md +490 -0
  181. package/docs/docs/api/appkit-ui/ui/Skeleton/index.html +27 -0
  182. package/docs/docs/api/appkit-ui/ui/Skeleton.md +43 -0
  183. package/docs/docs/api/appkit-ui/ui/Slider/index.html +27 -0
  184. package/docs/docs/api/appkit-ui/ui/Slider.md +61 -0
  185. package/docs/docs/api/appkit-ui/ui/Spinner/index.html +24 -0
  186. package/docs/docs/api/appkit-ui/ui/Spinner.md +22 -0
  187. package/docs/docs/api/appkit-ui/ui/Switch/index.html +27 -0
  188. package/docs/docs/api/appkit-ui/ui/Switch.md +46 -0
  189. package/docs/docs/api/appkit-ui/ui/Table/index.html +69 -0
  190. package/docs/docs/api/appkit-ui/ui/Table.md +236 -0
  191. package/docs/docs/api/appkit-ui/ui/Tabs/index.html +48 -0
  192. package/docs/docs/api/appkit-ui/ui/Tabs.md +177 -0
  193. package/docs/docs/api/appkit-ui/ui/Textarea/index.html +27 -0
  194. package/docs/docs/api/appkit-ui/ui/Textarea.md +35 -0
  195. package/docs/docs/api/appkit-ui/ui/Toaster/index.html +27 -0
  196. package/docs/docs/api/appkit-ui/ui/Toaster.md +75 -0
  197. package/docs/docs/api/appkit-ui/ui/Toggle/index.html +27 -0
  198. package/docs/docs/api/appkit-ui/ui/Toggle.md +48 -0
  199. package/docs/docs/api/appkit-ui/ui/ToggleGroup/index.html +33 -0
  200. package/docs/docs/api/appkit-ui/ui/ToggleGroup.md +88 -0
  201. package/docs/docs/api/appkit-ui/ui/Tooltip/index.html +46 -0
  202. package/docs/docs/api/appkit-ui/ui/Tooltip.md +134 -0
  203. package/docs/docs/api/appkit-ui.md +15 -0
  204. package/docs/docs/api/appkit.md +48 -0
  205. package/docs/docs/api/index.html +28 -0
  206. package/docs/docs/api.md +24 -0
  207. package/docs/docs/app-management/index.html +106 -0
  208. package/docs/docs/app-management.md +171 -0
  209. package/docs/docs/architecture/index.html +71 -0
  210. package/docs/docs/architecture.md +69 -0
  211. package/docs/docs/category/development/index.html +16 -0
  212. package/docs/docs/category/development.md +3 -0
  213. package/docs/docs/configuration/index.html +66 -0
  214. package/docs/docs/configuration.md +150 -0
  215. package/docs/docs/core-principles/index.html +38 -0
  216. package/docs/docs/core-principles.md +31 -0
  217. package/docs/docs/development/index.html +34 -0
  218. package/docs/docs/development/llm-guide/index.html +74 -0
  219. package/docs/docs/development/llm-guide.md +74 -0
  220. package/docs/docs/development/local-development/index.html +27 -0
  221. package/docs/docs/development/local-development.md +20 -0
  222. package/docs/docs/development/project-setup/index.html +69 -0
  223. package/docs/docs/development/project-setup.md +246 -0
  224. package/docs/docs/development/remote-bridge/index.html +76 -0
  225. package/docs/docs/development/remote-bridge.md +80 -0
  226. package/docs/docs/development/type-generation/index.html +65 -0
  227. package/docs/docs/development/type-generation.md +110 -0
  228. package/docs/docs/development.md +21 -0
  229. package/docs/docs/index.html +58 -0
  230. package/docs/docs/plugins/index.html +151 -0
  231. package/docs/docs/plugins.md +313 -0
  232. package/docs/docs.md +64 -0
  233. package/llms.txt +121 -1231
  234. package/package.json +11 -11
  235. package/scripts/postinstall.js +1 -1
  236. package/AGENTS.md +0 -1234
  237. package/bin/appkit-lint.js +0 -129
  238. package/bin/generate-types.js +0 -27
  239. package/bin/setup-claude.js +0 -190
package/docs/docs/api/appkit-ui/ui/Calendar/index.html ADDED
@@ -0,0 +1,34 @@
1
+ <!doctype html>
2
+ <html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-api/appkit-ui/ui/Calendar" data-has-hydrated="false">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="generator" content="Docusaurus v3.9.2">
6
+ <title data-rh="true">Calendar | AppKit</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://databricks.github.io/appkit/docs/api/appkit-ui/ui/Calendar"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="Databricks Apps, Node.js, React.js, SDK, TypeScript, SQL, Databricks, AI, full-stack, development"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Calendar | AppKit"><meta data-rh="true" name="description" content="Date picker component for selecting single dates or date ranges"><meta data-rh="true" property="og:description" content="Date picker component for selecting single dates or date ranges"><link data-rh="true" rel="icon" href="/appkit/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://databricks.github.io/appkit/docs/api/appkit-ui/ui/Calendar"><link data-rh="true" rel="alternate" href="https://databricks.github.io/appkit/docs/api/appkit-ui/ui/Calendar" hreflang="en"><link data-rh="true" rel="alternate" href="https://databricks.github.io/appkit/docs/api/appkit-ui/ui/Calendar" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"API reference","item":"https://databricks.github.io/appkit/docs/api/"},{"@type":"ListItem","position":2,"name":"@databricks/appkit-ui","item":"https://databricks.github.io/appkit/docs/api/appkit-ui/"},{"@type":"ListItem","position":3,"name":"Calendar","item":"https://databricks.github.io/appkit/docs/api/appkit-ui/ui/Calendar"}]}</script><link rel="stylesheet" href="/appkit/assets/css/styles.0ec7398f.css">
7
+ <script src="/appkit/assets/js/runtime~main.a874f05e.js" defer="defer"></script>
8
+ <script src="/appkit/assets/js/main.9d17da5a.js" defer="defer"></script>
9
+ </head>
10
+ <body class="navigation-with-keyboard">
11
+ <svg style="display: none;"><defs>
12
+ <symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
13
+ </defs></svg>
14
+ <script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())</script><div id="__docusaurus"><link rel="preload" as="image" href="/appkit/img/logo.png"><div role="region" aria-label="Skip to main content"><a class="skipToContent_R3I2" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><div class="theme-announcement-bar announcementBar_Upl7" style="background-color:#f0f0f0;color:#000000" role="banner"><div class="announcementBarPlaceholder_Lvio"></div><div class="content_vq0X announcementBarContent_FIMQ">⚠️ AppKit is in an early development phase and is subject to change without notice. <strong>DO NOT</strong> use in production environments.</div><button type="button" aria-label="Close" class="clean-btn close closeButton_J8WU announcementBarClose_jD94"><svg viewBox="0 0 15 15" width="14" height="14"><g stroke="currentColor" stroke-width="3.1"><path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path></g></svg></button></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/appkit/"><div class="navbar__logo"><img src="/appkit/img/logo.png" alt="AppKit" class="themedComponent_hkXO themedComponent--light_BgK8"><img src="/appkit/img/logo.png" alt="AppKit" class="themedComponent_hkXO themedComponent--dark_RKPt"></div><b class="navbar__title text--truncate">AppKit</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/appkit/docs/">Documentation</a><a class="navbar__item navbar__link" href="/appkit/contributing">Contributing</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://github.com/databricks/appkit" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a><div class="toggle_eFYw colorModeToggle_EPbi"><button class="clean-btn toggleButton_HRKp toggleButtonDisabled_bICu" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_brDO lightToggleIcon_vxPA"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_brDO darkToggleIcon_PZNO"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_brDO systemToggleIcon_A7x6"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div><div class="navbarSearchContainer_cVhq"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input id="search_input_react" type="search" placeholder="Loading..." aria-label="Search" class="navbar__search-input search-bar" disabled=""></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper__Y_W"><div class="docsWrapper_cIfN"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_xQFv" type="button"></button><div class="docRoot_FHtD"><aside class="theme-doc-sidebar-container docSidebarContainer_dvCd"><div class="sidebarViewport_GeRf"><div class="sidebar_T8N1"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_uyE9 menuWithAnnouncementBar_Bucd"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/"><span title="Getting started" class="linkLabel_hZzm">Getting started</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/app-management"><span title="App management" class="linkLabel_hZzm">App management</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/plugins"><span title="Plugins" class="linkLabel_hZzm">Plugins</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/architecture"><span title="Architecture" class="linkLabel_hZzm">Architecture</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/configuration"><span title="Configuration" class="linkLabel_hZzm">Configuration</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist" href="/appkit/docs/category/development"><span title="Development" class="categoryLinkLabel_ShmP">Development</span></a><button aria-label="Collapse sidebar category &#x27;Development&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/local-development"><span title="Local development" class="linkLabel_hZzm">Local development</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/"><span title="Development" class="linkLabel_hZzm">Development</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/remote-bridge"><span title="Remote Bridge" class="linkLabel_hZzm">Remote Bridge</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/project-setup"><span title="Project setup" class="linkLabel_hZzm">Project setup</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/type-generation"><span title="Type generation" class="linkLabel_hZzm">Type generation</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/development/llm-guide"><span title="LLM Guide" class="linkLabel_hZzm">LLM Guide</span></a></li></ul></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/appkit/docs/core-principles"><span title="Core principles" class="linkLabel_hZzm">Core principles</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist menu__link--active" href="/appkit/docs/api/"><span title="API reference" class="categoryLinkLabel_ShmP">API reference</span></a><button aria-label="Collapse sidebar category &#x27;API reference&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist" tabindex="0" href="/appkit/docs/api/appkit/"><span title="@databricks/appkit" class="categoryLinkLabel_ShmP">@databricks/appkit</span></a><button aria-label="Expand sidebar category &#x27;@databricks/appkit&#x27;" aria-expanded="false" type="button" class="clean-btn menu__caret"></button></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-2 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist menu__link--active" tabindex="0" href="/appkit/docs/api/appkit-ui/"><span title="@databricks/appkit-ui" class="categoryLinkLabel_ShmP">@databricks/appkit-ui</span></a><button aria-label="Collapse sidebar category &#x27;@databricks/appkit-ui&#x27;" aria-expanded="true" type="button" class="clean-btn menu__caret"></button></div><ul class="menu__list"><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Accordion"><span title="UI components" class="categoryLinkLabel_ShmP">UI components</span></a></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Accordion"><span title="Accordion" class="linkLabel_hZzm">Accordion</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Alert"><span title="Alert" class="linkLabel_hZzm">Alert</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/AlertDialog"><span title="AlertDialog" class="linkLabel_hZzm">AlertDialog</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/AspectRatio"><span title="AspectRatio" class="linkLabel_hZzm">AspectRatio</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Avatar"><span title="Avatar" class="linkLabel_hZzm">Avatar</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Badge"><span title="Badge" class="linkLabel_hZzm">Badge</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Breadcrumb"><span title="Breadcrumb" class="linkLabel_hZzm">Breadcrumb</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Button"><span title="Button" class="linkLabel_hZzm">Button</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/ButtonGroup"><span title="ButtonGroup" class="linkLabel_hZzm">ButtonGroup</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Calendar"><span title="Calendar" class="linkLabel_hZzm">Calendar</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Card"><span title="Card" class="linkLabel_hZzm">Card</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Carousel"><span title="Carousel" class="linkLabel_hZzm">Carousel</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/ChartContainer"><span title="ChartContainer" class="linkLabel_hZzm">ChartContainer</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Checkbox"><span title="Checkbox" class="linkLabel_hZzm">Checkbox</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Collapsible"><span title="Collapsible" class="linkLabel_hZzm">Collapsible</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Command"><span title="Command" class="linkLabel_hZzm">Command</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/ContextMenu"><span title="ContextMenu" class="linkLabel_hZzm">ContextMenu</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Dialog"><span title="Dialog" class="linkLabel_hZzm">Dialog</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Drawer"><span title="Drawer" class="linkLabel_hZzm">Drawer</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/DropdownMenu"><span title="DropdownMenu" class="linkLabel_hZzm">DropdownMenu</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Empty"><span title="Empty" class="linkLabel_hZzm">Empty</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Field"><span title="Field" class="linkLabel_hZzm">Field</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/FormControl"><span title="FormControl" class="linkLabel_hZzm">FormControl</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/HoverCard"><span title="HoverCard" class="linkLabel_hZzm">HoverCard</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Input"><span title="Input" class="linkLabel_hZzm">Input</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/InputGroup"><span title="InputGroup" class="linkLabel_hZzm">InputGroup</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/InputOTP"><span title="InputOTP" class="linkLabel_hZzm">InputOTP</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Item"><span title="Item" class="linkLabel_hZzm">Item</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Kbd"><span title="Kbd" class="linkLabel_hZzm">Kbd</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Label"><span title="Label" class="linkLabel_hZzm">Label</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Menubar"><span title="Menubar" class="linkLabel_hZzm">Menubar</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/NavigationMenu"><span title="NavigationMenu" class="linkLabel_hZzm">NavigationMenu</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Pagination"><span title="Pagination" class="linkLabel_hZzm">Pagination</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Popover"><span title="Popover" class="linkLabel_hZzm">Popover</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Progress"><span title="Progress" class="linkLabel_hZzm">Progress</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/RadioGroup"><span title="RadioGroup" class="linkLabel_hZzm">RadioGroup</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/ResizableHandle"><span title="ResizableHandle" class="linkLabel_hZzm">ResizableHandle</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/ScrollArea"><span title="ScrollArea" class="linkLabel_hZzm">ScrollArea</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Select"><span title="Select" class="linkLabel_hZzm">Select</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Separator"><span title="Separator" class="linkLabel_hZzm">Separator</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Sheet"><span title="Sheet" class="linkLabel_hZzm">Sheet</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Sidebar"><span title="Sidebar" class="linkLabel_hZzm">Sidebar</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Skeleton"><span title="Skeleton" class="linkLabel_hZzm">Skeleton</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Slider"><span title="Slider" class="linkLabel_hZzm">Slider</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Spinner"><span title="Spinner" class="linkLabel_hZzm">Spinner</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Switch"><span title="Switch" class="linkLabel_hZzm">Switch</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Table"><span title="Table" class="linkLabel_hZzm">Table</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Tabs"><span title="Tabs" class="linkLabel_hZzm">Tabs</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Textarea"><span title="Textarea" class="linkLabel_hZzm">Textarea</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Toaster"><span title="Toaster" class="linkLabel_hZzm">Toaster</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Toggle"><span title="Toggle" class="linkLabel_hZzm">Toggle</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/ToggleGroup"><span title="ToggleGroup" class="linkLabel_hZzm">ToggleGroup</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-4 menu__list-item"><a class="menu__link" tabindex="0" href="/appkit/docs/api/appkit-ui/ui/Tooltip"><span title="Tooltip" class="linkLabel_hZzm">Tooltip</span></a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-3 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="categoryLink_P6CU menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="false" tabindex="0" href="/appkit/docs/api/appkit-ui/data/AreaChart"><span title="Data components" class="categoryLinkLabel_ShmP">Data components</span></a></div></li></ul></li></ul></li></ul></nav></div></div></aside><main class="docMainContainer_P5br"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_poBZ"><div class="docItemContainer_TdBg"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_bEIa" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/appkit/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_sma7"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/appkit/docs/api/"><span>API reference</span></a></li><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/appkit/docs/api/appkit-ui/"><span>@databricks/appkit-ui</span></a></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">UI components</span></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Calendar</span></li></ul></nav><div class="tocCollapsible_gJxE theme-doc-toc-mobile tocMobile_ZHYV"><button type="button" class="clean-btn tocCollapsibleButton_uxuR">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Calendar</h1></header>
15
+ <p>Date picker component for selecting single dates or date ranges</p>
16
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="example">Example<a href="#example" class="hash-link" aria-label="Direct link to Example" title="Direct link to Example" translate="no">​</a></h2>
17
+ <!-- -->
18
+ <section class="doc-example"><div class="doc-example-preview"><iframe style="width:100%;height:400px;min-height:200px;max-height:800px;border:none;display:block;background-color:transparent;border-radius:8px;transition:height 0.2s ease" title="Component Preview"></iframe></div><div class="doc-example-source"><div class="language-tsx codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-tsx codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token string" style="color:rgb(163, 21, 21)">&quot;use client&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports operator" style="color:rgb(0, 0, 0)">*</span><span class="token imports"> </span><span class="token imports keyword module" style="color:rgb(0, 0, 255)">as</span><span class="token imports"> </span><span class="token imports maybe-class-name">React</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;react&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Calendar</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&quot;@databricks/appkit-ui/react&quot;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token keyword" style="color:rgb(0, 0, 255)">export</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">default</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(0, 0, 255)">CalendarExample</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">const</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">[</span><span class="token plain">date</span><span class="token punctuation" style="color:rgb(4, 81, 165)">,</span><span class="token plain"> setDate</span><span class="token punctuation" style="color:rgb(4, 81, 165)">]</span><span class="token plain"> </span><span class="token operator" style="color:rgb(0, 0, 0)">=</span><span class="token plain"> </span><span class="token maybe-class-name">React</span><span class="token punctuation" style="color:rgb(4, 81, 165)">.</span><span class="token property-access">useState</span><span class="token operator" style="color:rgb(0, 0, 0)">&lt;</span><span class="token known-class-name class-name" style="color:rgb(38, 127, 153)">Date</span><span class="token plain"> </span><span class="token operator" style="color:rgb(0, 0, 0)">|</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">undefined</span><span class="token operator" style="color:rgb(0, 0, 0)">&gt;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token keyword" style="color:rgb(0, 0, 255)">new</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(38, 127, 153)">Date</span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">&lt;</span><span class="token tag class-name" style="color:rgb(38, 127, 153)">Calendar</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">mode</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">single</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">selected</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(4, 81, 165)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)">date</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">onSelect</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(4, 81, 165)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token tag script language-javascript" style="color:rgb(128, 0, 0)">setDate</span><span class="token tag script language-javascript punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag attr-name" style="color:rgb(255, 0, 0)">className</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(4, 81, 165)">=</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag attr-value" style="color:rgb(128, 0, 0)">rounded-md border</span><span class="token tag attr-value punctuation" style="color:rgb(4, 81, 165)">&quot;</span><span class="token tag" style="color:rgb(128, 0, 0)"></span><br></span><span class="token-line" style="color:#000000"><span class="token tag" style="color:rgb(128, 0, 0)"> </span><span class="token tag punctuation" style="color:rgb(4, 81, 165)">/&gt;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(4, 81, 165)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token punctuation" style="color:rgb(4, 81, 165)">}</span><br></span></code></pre></div></div></div></section>
19
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="calendar-1">Calendar<a href="#calendar-1" class="hash-link" aria-label="Direct link to Calendar" title="Direct link to Calendar" translate="no">​</a></h2>
20
+ <p>Date picker component for selecting single dates or date ranges</p>
21
+ <p><strong>Source:</strong> <a href="https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/calendar.tsx" target="_blank" rel="noopener noreferrer" class=""><code>packages/appkit-ui/src/react/ui/calendar.tsx</code></a></p>
22
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="props">Props<a href="#props" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props" translate="no">​</a></h3>
23
+ <table><thead><tr><th>Prop</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>mode</code></td><td><code>enum</code></td><td></td><td>-</td><td>Enable the selection of a single day, multiple days, or a range of days. @see <a href="https://daypicker.dev/docs/selection-modes" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/selection-modes</a></td></tr><tr><td><code>required</code></td><td><code>boolean</code></td><td></td><td>-</td><td>Whether the selection is required. @see <a href="https://daypicker.dev/docs/selection-modes" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/selection-modes</a></td></tr><tr><td><code>className</code></td><td><code>string</code></td><td></td><td>-</td><td>Class name to add to the root element.</td></tr><tr><td><code>classNames</code></td><td><code>(Partial&lt;ClassNames&gt; &amp; Partial&lt;DeprecatedUI&lt;string&gt;&gt;)</code></td><td></td><td>-</td><td>Change the class names used by DayPicker.</td></tr><tr><td><code>modifiersClassNames</code></td><td><code>ModifiersClassNames</code></td><td></td><td>-</td><td>Change the class name for the day matching the <code>modifiers</code>. @see <a href="https://daypicker.dev/guides/custom-modifiers" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/guides/custom-modifiers</a></td></tr><tr><td><code>style</code></td><td><code>CSSProperties</code></td><td></td><td>-</td><td>Style to apply to the root element.</td></tr><tr><td><code>styles</code></td><td><code>(Partial&lt;Styles&gt; &amp; Partial&lt;DeprecatedUI&lt;CSSProperties&gt;&gt;)</code></td><td></td><td>-</td><td>Change the inline styles of the HTML elements. @see <a href="https://daypicker.dev/docs/styling" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/styling</a></td></tr><tr><td><code>modifiersStyles</code></td><td><code>ModifiersStyles</code></td><td></td><td>-</td><td>Change the class name for the day matching the modifiers. @see <a href="https://daypicker.dev/guides/custom-modifiers" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/guides/custom-modifiers</a></td></tr><tr><td><code>id</code></td><td><code>string</code></td><td></td><td>-</td><td>A unique id to add to the root element.</td></tr><tr><td><code>defaultMonth</code></td><td><code>Date</code></td><td></td><td>-</td><td>The initial month to show in the calendar.</td></tr><tr><td><code>month</code></td><td><code>Date</code></td><td></td><td>-</td><td>The month displayed in the calendar.</td></tr><tr><td><code>numberOfMonths</code></td><td><code>number</code></td><td></td><td>-</td><td>The number of displayed months. @defaultValue 1 @see <a href="https://daypicker.dev/docs/customization#multiplemonths" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/customization#multiplemonths</a></td></tr><tr><td><code>startMonth</code></td><td><code>Date</code></td><td></td><td>-</td><td>The earliest month to start the month navigation. @since 9.0.0 @see <a href="https://daypicker.dev/docs/navigation#start-and-end-dates" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/navigation#start-and-end-dates</a></td></tr><tr><td><code>fromDate</code></td><td><code>Date</code></td><td></td><td>-</td><td>@private @deprecated This prop has been removed. Use <code>hidden=&amp;#123;&amp;#123; before: date &amp;#125;&amp;#125;</code> instead. @see <a href="https://daypicker.dev/docs/navigation#start-and-end-dates" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/navigation#start-and-end-dates</a></td></tr><tr><td><code>fromMonth</code></td><td><code>Date</code></td><td></td><td>-</td><td>@private @deprecated This prop has been renamed to <code>startMonth</code>. @see <a href="https://daypicker.dev/docs/navigation#start-and-end-dates" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/navigation#start-and-end-dates</a></td></tr><tr><td><code>fromYear</code></td><td><code>number</code></td><td></td><td>-</td><td>@private @deprecated Use <code>startMonth</code> instead. E.g. <code>startMonth=&amp;#123;new Date(year, 0)&amp;#125;</code>. @see <a href="https://daypicker.dev/docs/navigation#start-and-end-dates" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/navigation#start-and-end-dates</a></td></tr><tr><td><code>endMonth</code></td><td><code>Date</code></td><td></td><td>-</td><td>The latest month to end the month navigation. @since 9.0.0 @see <a href="https://daypicker.dev/docs/navigation#start-and-end-dates" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/navigation#start-and-end-dates</a></td></tr><tr><td><code>toDate</code></td><td><code>Date</code></td><td></td><td>-</td><td>@private @deprecated This prop has been removed. Use <code>hidden=&amp;#123;&amp;#123; after: date &amp;#125;&amp;#125;</code> instead. @see <a href="https://daypicker.dev/docs/navigation#start-and-end-dates" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/navigation#start-and-end-dates</a></td></tr><tr><td><code>toMonth</code></td><td><code>Date</code></td><td></td><td>-</td><td>@private @deprecated This prop has been renamed to <code>endMonth</code>. @see <a href="https://daypicker.dev/docs/navigation#start-and-end-dates" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/navigation#start-and-end-dates</a></td></tr><tr><td><code>toYear</code></td><td><code>number</code></td><td></td><td>-</td><td>@private @deprecated Use <code>endMonth</code> instead. E.g. <code>endMonth=&amp;#123;new Date(year, 0)&amp;#125;</code>. @see <a href="https://daypicker.dev/docs/navigation#start-and-end-dates" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/navigation#start-and-end-dates</a></td></tr><tr><td><code>pagedNavigation</code></td><td><code>boolean</code></td><td></td><td>-</td><td>Paginate the month navigation displaying the <code>numberOfMonths</code> at a time. @see <a href="https://daypicker.dev/docs/customization#multiplemonths" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/customization#multiplemonths</a></td></tr><tr><td><code>reverseMonths</code></td><td><code>boolean</code></td><td></td><td>-</td><td>Render the months in reversed order (when numberOfMonths is set) to display the most recent month first. @see <a href="https://daypicker.dev/docs/customization#multiplemonths" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/customization#multiplemonths</a></td></tr><tr><td><code>hideNavigation</code></td><td><code>boolean</code></td><td></td><td>-</td><td>Hide the navigation buttons. This prop won&#x27;t disable the navigation: to disable the navigation, use disableNavigation. @since 9.0.0 @see <a href="https://daypicker.dev/docs/navigation#hidenavigation" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/navigation#hidenavigation</a></td></tr><tr><td><code>disableNavigation</code></td><td><code>boolean</code></td><td></td><td>-</td><td>Disable the navigation between months. This prop won&#x27;t hide the navigation: to hide the navigation, use hideNavigation. @see <a href="https://daypicker.dev/docs/navigation#disablenavigation" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/navigation#disablenavigation</a></td></tr><tr><td><code>captionLayout</code></td><td><code>enum</code></td><td></td><td><code>label</code></td><td>Show dropdowns to navigate between months or years.</td></tr><tr><td><code>reverseYears</code></td><td><code>boolean</code></td><td></td><td>-</td><td>Reverse the order of years in the dropdown when using <code>captionLayout=&quot;dropdown&quot;</code> or <code>captionLayout=&quot;dropdown-years&quot;</code>. @since 9.9.0 @see <a href="https://daypicker.dev/docs/customization#caption-layouts" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/customization#caption-layouts</a></td></tr><tr><td><code>navLayout</code></td><td><code>enum</code></td><td></td><td>-</td><td>Adjust the positioning of the navigation buttons.</td></tr><tr><td><code>fixedWeeks</code></td><td><code>boolean</code></td><td></td><td>-</td><td>Display always 6 weeks per each month, regardless of the month’s number of weeks. Weeks will be filled with the days from the next month. @see <a href="https://daypicker.dev/docs/customization#fixed-weeks" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/customization#fixed-weeks</a></td></tr><tr><td><code>hideWeekdays</code></td><td><code>boolean</code></td><td></td><td>-</td><td>Hide the row displaying the weekday row header. @since 9.0.0</td></tr><tr><td><code>showOutsideDays</code></td><td><code>boolean</code></td><td></td><td><code>true</code></td><td>Show the outside days (days falling in the next or the previous month).</td></tr><tr><td><code>showWeekNumber</code></td><td><code>boolean</code></td><td></td><td>-</td><td>Show the week numbers column. Weeks are numbered according to the local week index. @see <a href="https://daypicker.dev/docs/customization#showweeknumber" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/customization#showweeknumber</a></td></tr><tr><td><code>animate</code></td><td><code>boolean</code></td><td></td><td>-</td><td>Animate navigating between months. @since 9.6.0 @see <a href="https://daypicker.dev/docs/navigation#animate" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/navigation#animate</a></td></tr><tr><td><code>broadcastCalendar</code></td><td><code>boolean</code></td><td></td><td>-</td><td>Display the weeks in the month following the broadcast calendar. Setting this prop will ignore weekStartsOn (always Monday) and showOutsideDays will default to true. @since 9.4.0 @see <a href="https://daypicker.dev/docs/localization#broadcast-calendar" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/localization#broadcast-calendar</a> @see <a href="https://en.wikipedia.org/wiki/Broadcast_calendar" target="_blank" rel="noopener noreferrer" class="">https://en.wikipedia.org/wiki/Broadcast_calendar</a></td></tr><tr><td><code>ISOWeek</code></td><td><code>boolean</code></td><td></td><td>-</td><td>Use ISO week dates instead of the locale setting. Setting this prop will ignore <code>weekStartsOn</code> and <code>firstWeekContainsDate</code>. @see <a href="https://daypicker.dev/docs/localization#iso-week-dates" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/localization#iso-week-dates</a> @see <a href="https://en.wikipedia.org/wiki/ISO_week_date" target="_blank" rel="noopener noreferrer" class="">https://en.wikipedia.org/wiki/ISO_week_date</a></td></tr><tr><td><code>timeZone</code></td><td><code>string</code></td><td></td><td>-</td><td>The time zone (IANA or UTC offset) to use in the calendar (experimental).</td></tr><tr><td><code>components</code></td><td><code>Partial&lt;CustomComponents&gt;</code></td><td></td><td>-</td><td>Change the components used for rendering the calendar elements. @see <a href="https://daypicker.dev/guides/custom-components" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/guides/custom-components</a></td></tr><tr><td><code>footer</code></td><td><code>ReactNode</code></td><td></td><td>-</td><td>Add a footer to the calendar, acting as a live region.</td></tr><tr><td><code>autoFocus</code></td><td><code>boolean</code></td><td></td><td>-</td><td>When a selection mode is set, DayPicker will focus the first selected day (if set) or today&#x27;s date (if not disabled).</td></tr><tr><td><code>initialFocus</code></td><td><code>boolean</code></td><td></td><td>-</td><td>@private @deprecated This prop will be removed. Use autoFocus instead.</td></tr><tr><td><code>disabled</code></td><td><code>Matcher | Matcher[]</code></td><td></td><td>-</td><td>Apply the <code>disabled</code> modifier to the matching days. Disabled days cannot be selected when in a selection mode is set. @see <a href="https://daypicker.dev/docs/selection-modes#disabled" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/selection-modes#disabled</a> @see <a href="https://daypicker.dev/docs/selection-modes#disabled" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/selection-modes#disabled</a> @see <a href="https://daypicker.dev/docs/selection-modes#disabled" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/selection-modes#disabled</a></td></tr><tr><td><code>hidden</code></td><td><code>Matcher | Matcher[]</code></td><td></td><td>-</td><td>Apply the <code>hidden</code> modifier to the matching days. Will hide them from the calendar. @see <a href="https://daypicker.dev/guides/custom-modifiers#hidden-modifier" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/guides/custom-modifiers#hidden-modifier</a></td></tr><tr><td><code>today</code></td><td><code>Date</code></td><td></td><td>-</td><td>The today’s date. Default is the current date. This date will get the <code>today</code> modifier to style the day. @see <a href="https://daypicker.dev/guides/custom-modifiers#today-modifier" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/guides/custom-modifiers#today-modifier</a></td></tr><tr><td><code>modifiers</code></td><td><code>Record&lt;string, Matcher | Matcher[]&gt;</code></td><td></td><td>-</td><td>Add modifiers to the matching days. @example const modifiers = { weekend: { dayOfWeek: [0, 6] }, // Match weekends holiday: [new Date(2023, 11, 25)] // Match Christmas }; &lt;DayPicker modifiers={modifiers} /&gt; @see <a href="https://daypicker.dev/guides/custom-modifiers" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/guides/custom-modifiers</a></td></tr><tr><td><code>labels</code></td><td><code>Partial&lt;Labels&gt;</code></td><td></td><td>-</td><td>Labels creators to override the defaults. Use this prop to customize the aria-label attributes in DayPicker. @see <a href="https://daypicker.dev/docs/translation#aria-labels" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/translation#aria-labels</a></td></tr><tr><td><code>formatters</code></td><td><code>Partial&lt;Formatters&gt;</code></td><td></td><td>-</td><td>Formatters used to format dates to strings. Use this prop to override the default functions. @see <a href="https://daypicker.dev/docs/translation#custom-formatters" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/translation#custom-formatters</a></td></tr><tr><td><code>dir</code></td><td><code>string</code></td><td></td><td>-</td><td>The text direction of the calendar. Use <code>ltr</code> for left-to-right (default) or <code>rtl</code> for right-to-left. @see <a href="https://daypicker.dev/docs/translation#rtl-text-direction" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/translation#rtl-text-direction</a></td></tr><tr><td><code>aria-label</code></td><td><code>string</code></td><td></td><td>-</td><td>The aria-label attribute to add to the container element. @since 9.4.1 @see <a href="https://daypicker.dev/guides/accessibility" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/guides/accessibility</a></td></tr><tr><td><code>aria-labelledby</code></td><td><code>string</code></td><td></td><td>-</td><td>The aria-labelledby attribute to add to the container element. @since 9.11.0 @see <a href="https://daypicker.dev/guides/accessibility" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/guides/accessibility</a></td></tr><tr><td><code>role</code></td><td><code>enum</code></td><td></td><td>-</td><td>The role attribute to add to the container element. @since 9.4.1 @see <a href="https://daypicker.dev/guides/accessibility" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/guides/accessibility</a></td></tr><tr><td><code>nonce</code></td><td><code>string</code></td><td></td><td>-</td><td>A cryptographic nonce (&quot;number used once&quot;) which can be used by Content Security Policy for the inline <code>style</code> attributes.</td></tr><tr><td><code>title</code></td><td><code>string</code></td><td></td><td>-</td><td>Add a <code>title</code> attribute to the container element.</td></tr><tr><td><code>lang</code></td><td><code>string</code></td><td></td><td>-</td><td>Add the language tag to the container element.</td></tr><tr><td><code>locale</code></td><td><code>Partial&lt;DayPickerLocale&gt;</code></td><td></td><td>-</td><td>The locale object used to localize dates. Pass a locale from <code>react-day-picker/locale</code> to localize the calendar. @example import { es } from &quot;react-day-picker/locale&quot;; &lt;DayPicker locale={es} /&gt; @defaultValue enUS - The English locale default of <code>date-fns</code>. @see <a href="https://daypicker.dev/docs/localization" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/localization</a> @see <a href="https://github.com/date-fns/date-fns/tree/main/src/locale" target="_blank" rel="noopener noreferrer" class="">https://github.com/date-fns/date-fns/tree/main/src/locale</a> for a list of the supported locales</td></tr><tr><td><code>numerals</code></td><td><code>enum</code></td><td></td><td>-</td><td>The numeral system to use when formatting dates.</td></tr><tr><td><code>weekStartsOn</code></td><td><code>enum</code></td><td></td><td>-</td><td>The index of the first day of the week (0 - Sunday). Overrides the locale&#x27;s default. @see <a href="https://daypicker.dev/docs/localization#first-date-of-the-week" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/localization#first-date-of-the-week</a></td></tr><tr><td><code>firstWeekContainsDate</code></td><td><code>enum</code></td><td></td><td>-</td><td>The day of January that is always in the first week of the year. @see <a href="https://daypicker.dev/docs/localization#first-week-contains-date" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/localization#first-week-contains-date</a></td></tr><tr><td><code>useAdditionalWeekYearTokens</code></td><td><code>boolean</code></td><td></td><td>-</td><td>Enable <code>DD</code> and <code>DDDD</code> for week year tokens when formatting or parsing dates. @see <a href="https://date-fns.org/docs/Unicode-Tokens" target="_blank" rel="noopener noreferrer" class="">https://date-fns.org/docs/Unicode-Tokens</a></td></tr><tr><td><code>useAdditionalDayOfYearTokens</code></td><td><code>boolean</code></td><td></td><td>-</td><td>Enable <code>YY</code> and <code>YYYY</code> for day of year tokens when formatting or parsing dates. @see <a href="https://date-fns.org/docs/Unicode-Tokens" target="_blank" rel="noopener noreferrer" class="">https://date-fns.org/docs/Unicode-Tokens</a></td></tr><tr><td><code>onMonthChange</code></td><td><code>MonthChangeEventHandler</code></td><td></td><td>-</td><td>Event fired when the user navigates between months. @see <a href="https://daypicker.dev/docs/navigation#onmonthchange" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/navigation#onmonthchange</a></td></tr><tr><td><code>onNextClick</code></td><td><code>MonthChangeEventHandler</code></td><td></td><td>-</td><td>Event handler when the next month button is clicked. @see <a href="https://daypicker.dev/docs/navigation" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/navigation</a></td></tr><tr><td><code>onPrevClick</code></td><td><code>MonthChangeEventHandler</code></td><td></td><td>-</td><td>Event handler when the previous month button is clicked. @see <a href="https://daypicker.dev/docs/navigation" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/navigation</a></td></tr><tr><td><code>onWeekNumberClick</code></td><td><code>any</code></td><td></td><td>-</td><td>Event handler when a week number is clicked. @private @deprecated Use a custom <code>WeekNumber</code> component instead. @see <a href="https://daypicker.dev/docs/customization#showweeknumber" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/customization#showweeknumber</a></td></tr><tr><td><code>onDayClick</code></td><td><code>DayEventHandler&lt;MouseEvent&lt;Element, MouseEvent&gt;&gt;</code></td><td></td><td>-</td><td>Event handler when a day is clicked.</td></tr><tr><td><code>onDayFocus</code></td><td><code>DayEventHandler&lt;FocusEvent&lt;Element, Element&gt;&gt;</code></td><td></td><td>-</td><td>Event handler when a day is focused.</td></tr><tr><td><code>onDayBlur</code></td><td><code>DayEventHandler&lt;FocusEvent&lt;Element, Element&gt;&gt;</code></td><td></td><td>-</td><td>Event handler when a day is blurred.</td></tr><tr><td><code>onDayKeyDown</code></td><td><code>DayEventHandler&lt;KeyboardEvent&lt;Element&gt;&gt;</code></td><td></td><td>-</td><td>Event handler when a key is pressed on a day.</td></tr><tr><td><code>onDayMouseEnter</code></td><td><code>DayEventHandler&lt;MouseEvent&lt;Element, MouseEvent&gt;&gt;</code></td><td></td><td>-</td><td>Event handler when the mouse enters a day.</td></tr><tr><td><code>onDayMouseLeave</code></td><td><code>DayEventHandler&lt;MouseEvent&lt;Element, MouseEvent&gt;&gt;</code></td><td></td><td>-</td><td>Event handler when the mouse leaves a day.</td></tr><tr><td><code>dateLib</code></td><td><code>Partial&lt;DateLib&gt;</code></td><td></td><td>-</td><td>Replace the default date library with a custom one. Experimental: not guaranteed to be stable (may not respect semver). @since 9.0.0 @experimental</td></tr><tr><td><code>onDayKeyUp</code></td><td><code>DayEventHandler&lt;KeyboardEvent&lt;Element&gt;&gt;</code></td><td></td><td>-</td><td>@private @deprecated Use a custom <code>DayButton</code> component instead.</td></tr><tr><td><code>onDayKeyPress</code></td><td><code>DayEventHandler&lt;KeyboardEvent&lt;Element&gt;&gt;</code></td><td></td><td>-</td><td>@private @deprecated Use a custom <code>DayButton</code> component instead.</td></tr><tr><td><code>onDayPointerEnter</code></td><td><code>DayEventHandler&lt;PointerEvent&lt;Element&gt;&gt;</code></td><td></td><td>-</td><td>@private @deprecated Use a custom <code>DayButton</code> component instead.</td></tr><tr><td><code>onDayPointerLeave</code></td><td><code>DayEventHandler&lt;PointerEvent&lt;Element&gt;&gt;</code></td><td></td><td>-</td><td>@private @deprecated Use a custom <code>DayButton</code> component instead.</td></tr><tr><td><code>onDayTouchCancel</code></td><td><code>DayEventHandler&lt;TouchEvent&lt;Element&gt;&gt;</code></td><td></td><td>-</td><td>@private @deprecated Use a custom <code>DayButton</code> component instead.</td></tr><tr><td><code>onDayTouchEnd</code></td><td><code>DayEventHandler&lt;TouchEvent&lt;Element&gt;&gt;</code></td><td></td><td>-</td><td>@private @deprecated Use a custom <code>DayButton</code> component instead.</td></tr><tr><td><code>onDayTouchMove</code></td><td><code>DayEventHandler&lt;TouchEvent&lt;Element&gt;&gt;</code></td><td></td><td>-</td><td>@private @deprecated Use a custom <code>DayButton</code> component instead.</td></tr><tr><td><code>onDayTouchStart</code></td><td><code>DayEventHandler&lt;TouchEvent&lt;Element&gt;&gt;</code></td><td></td><td>-</td><td>@private @deprecated Use a custom <code>DayButton</code> component instead.</td></tr><tr><td><code>selected</code></td><td><code>Date | Date[] | DateRange</code></td><td></td><td>-</td><td>The selected date. The selected dates. The selected range.</td></tr><tr><td><code>onSelect</code></td><td><code>OnSelectHandler&lt;Date&gt; | OnSelectHandler&lt;Date&gt; | OnSelectHandler&lt;Date[]&gt; | OnSelectHandler&lt;...&gt; | OnSelectHandler&lt;...&gt; | OnSelectHandler&lt;...&gt; | undefined</code></td><td></td><td>-</td><td>Event handler when a day is selected. Event handler when days are selected. Event handler when the selection changes. Event handler when a range is selected.</td></tr><tr><td><code>buttonVariant</code></td><td><code>&quot;link&quot; | &quot;default&quot; | &quot;destructive&quot; | &quot;secondary&quot; | &quot;outline&quot; | &quot;ghost&quot; | null</code></td><td></td><td><code>ghost</code></td><td>-</td></tr><tr><td><code>min</code></td><td><code>number</code></td><td></td><td>-</td><td>The minimum number of selectable days. The minimum number of days to include in the range.</td></tr><tr><td><code>max</code></td><td><code>number</code></td><td></td><td>-</td><td>The maximum number of selectable days. The maximum number of days to include in the range.</td></tr><tr><td><code>excludeDisabled</code></td><td><code>boolean</code></td><td></td><td>-</td><td>When <code>true</code>, the range will reset when including a disabled day. @since V9.0.2 @see <a href="https://daypicker.dev/docs/selection-modes#exclude-disabled" target="_blank" rel="noopener noreferrer" class="">https://daypicker.dev/docs/selection-modes#exclude-disabled</a> @since V9.0.2</td></tr></tbody></table>
24
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="usage">Usage<a href="#usage" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage" translate="no">​</a></h3>
25
+ <div class="language-tsx codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-tsx codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Calendar</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&#x27;@databricks/appkit-ui&#x27;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token operator" style="color:rgb(0, 0, 0)">&lt;</span><span class="token maybe-class-name">Calendar</span><span class="token plain"> </span><span class="token comment" style="color:rgb(0, 128, 0)">/* props */</span><span class="token plain"> </span><span class="token operator" style="color:rgb(0, 0, 0)">/</span><span class="token operator" style="color:rgb(0, 0, 0)">&gt;</span><br></span></code></pre></div></div>
26
+ <h2 class="anchor anchorTargetStickyNavbar_scV4" id="calendardaybutton">CalendarDayButton<a href="#calendardaybutton" class="hash-link" aria-label="Direct link to CalendarDayButton" title="Direct link to CalendarDayButton" translate="no">​</a></h2>
27
+ <p>Individual day button within the calendar grid</p>
28
+ <p><strong>Source:</strong> <a href="https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/calendar.tsx" target="_blank" rel="noopener noreferrer" class=""><code>packages/appkit-ui/src/react/ui/calendar.tsx</code></a></p>
29
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="props-1">Props<a href="#props-1" class="hash-link" aria-label="Direct link to Props" title="Direct link to Props" translate="no">​</a></h3>
30
+ <table><thead><tr><th>Prop</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>day</code></td><td><code>CalendarDay</code></td><td>✓</td><td>-</td><td>The day to render.</td></tr><tr><td><code>modifiers</code></td><td><code>Modifiers</code></td><td>✓</td><td>-</td><td>The modifiers to apply to the day.</td></tr></tbody></table>
31
+ <h3 class="anchor anchorTargetStickyNavbar_scV4" id="usage-1">Usage<a href="#usage-1" class="hash-link" aria-label="Direct link to Usage" title="Direct link to Usage" translate="no">​</a></h3>
32
+ <div class="language-tsx codeBlockContainer_crgn theme-code-block" style="--prism-color:#000000;--prism-background-color:#ffffff"><div class="codeBlockContent__42J"><pre tabindex="0" class="prism-code language-tsx codeBlock_CnLD thin-scrollbar" style="color:#000000;background-color:#ffffff"><code class="codeBlockLines_sJEA"><span class="token-line" style="color:#000000"><span class="token keyword" style="color:rgb(0, 0, 255)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">CalendarDayButton</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(4, 81, 165)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(0, 0, 255)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(163, 21, 21)">&#x27;@databricks/appkit-ui&#x27;</span><span class="token punctuation" style="color:rgb(4, 81, 165)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#000000"><span class="token plain"></span><span class="token operator" style="color:rgb(0, 0, 0)">&lt;</span><span class="token maybe-class-name">CalendarDayButton</span><span class="token plain"> </span><span class="token comment" style="color:rgb(0, 128, 0)">/* props */</span><span class="token plain"> </span><span class="token operator" style="color:rgb(0, 0, 0)">/</span><span class="token operator" style="color:rgb(0, 0, 0)">&gt;</span><br></span></code></pre></div></div></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col noPrint_Z6Q_"><a href="https://github.com/databricks/appkit/edit/main/docs/docs/api/appkit-ui/ui/Calendar.mdx" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_kMm5" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_mnLK"></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/appkit/docs/api/appkit-ui/ui/ButtonGroup"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">ButtonGroup</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/appkit/docs/api/appkit-ui/ui/Card"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Card</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_xfIk thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#example" class="table-of-contents__link toc-highlight">Example</a></li><li><a href="#calendar-1" class="table-of-contents__link toc-highlight">Calendar</a><ul><li><a href="#props" class="table-of-contents__link toc-highlight">Props</a></li><li><a href="#usage" class="table-of-contents__link toc-highlight">Usage</a></li></ul></li><li><a href="#calendardaybutton" class="table-of-contents__link toc-highlight">CalendarDayButton</a><ul><li><a href="#props-1" class="table-of-contents__link toc-highlight">Props</a></li><li><a href="#usage-1" class="table-of-contents__link toc-highlight">Usage</a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/appkit/docs/">Getting started</a></li><li class="footer__item"><a class="footer__link-item" href="/appkit/docs/api/">API reference</a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/appkit/contributing">Contributing</a></li><li class="footer__item"><a href="https://github.com/databricks/appkit" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://docs.databricks.com/aws/en/dev-tools/databricks-apps/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Databricks Apps docs<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://github.com/databricks/cli" target="_blank" rel="noopener noreferrer" class="footer__link-item">Databricks CLI<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_miaU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2026 Databricks, Inc.</div></div></div></footer></div>
33
+ </body>
34
+ </html>
package/docs/docs/api/appkit-ui/ui/Calendar.md ADDED
@@ -0,0 +1,154 @@
1
+ # Calendar
2
+
3
+ Date picker component for selecting single dates or date ranges
4
+
5
+ ## Example[​](#example "Direct link to Example")
6
+
7
+ <!-- -->
8
+
9
+ ```tsx
10
+ "use client"
11
+
12
+ import * as React from "react"
13
+
14
+ import { Calendar } from "@databricks/appkit-ui/react"
15
+
16
+ export default function CalendarExample() {
17
+ const [date, setDate] = React.useState<Date | undefined>(new Date())
18
+
19
+ return (
20
+ <Calendar
21
+ mode="single"
22
+ selected={date}
23
+ onSelect={setDate}
24
+ className="rounded-md border"
25
+ />
26
+ )
27
+ }
28
+
29
+ ```
30
+
31
+ ## Calendar[​](#calendar-1 "Direct link to Calendar")
32
+
33
+ Date picker component for selecting single dates or date ranges
34
+
35
+ **Source:** [`packages/appkit-ui/src/react/ui/calendar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/calendar.tsx)
36
+
37
+ ### Props[​](#props "Direct link to Props")
38
+
39
+ | Prop | Type | Required | Default | Description |
40
+ | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
41
+ | `mode` | `enum` | | - | Enable the selection of a single day, multiple days, or a range of days. @see <https://daypicker.dev/docs/selection-modes> |
42
+ | `required` | `boolean` | | - | Whether the selection is required. @see <https://daypicker.dev/docs/selection-modes> |
43
+ | `className` | `string` | | - | Class name to add to the root element. |
44
+ | `classNames` | `(Partial<ClassNames> & Partial<DeprecatedUI<string>>)` | | - | Change the class names used by DayPicker. |
45
+ | `modifiersClassNames` | `ModifiersClassNames` | | - | Change the class name for the day matching the `modifiers`. @see <https://daypicker.dev/guides/custom-modifiers> |
46
+ | `style` | `CSSProperties` | | - | Style to apply to the root element. |
47
+ | `styles` | `(Partial<Styles> & Partial<DeprecatedUI<CSSProperties>>)` | | - | Change the inline styles of the HTML elements. @see <https://daypicker.dev/docs/styling> |
48
+ | `modifiersStyles` | `ModifiersStyles` | | - | Change the class name for the day matching the modifiers. @see <https://daypicker.dev/guides/custom-modifiers> |
49
+ | `id` | `string` | | - | A unique id to add to the root element. |
50
+ | `defaultMonth` | `Date` | | - | The initial month to show in the calendar. |
51
+ | `month` | `Date` | | - | The month displayed in the calendar. |
52
+ | `numberOfMonths` | `number` | | - | The number of displayed months. @defaultValue 1 @see <https://daypicker.dev/docs/customization#multiplemonths> |
53
+ | `startMonth` | `Date` | | - | The earliest month to start the month navigation. @since 9.0.0 @see <https://daypicker.dev/docs/navigation#start-and-end-dates> |
54
+ | `fromDate` | `Date` | | - | @private @deprecated This prop has been removed. Use `hidden=&#123;&#123; before: date &#125;&#125;` instead. @see <https://daypicker.dev/docs/navigation#start-and-end-dates> |
55
+ | `fromMonth` | `Date` | | - | @private @deprecated This prop has been renamed to `startMonth`. @see <https://daypicker.dev/docs/navigation#start-and-end-dates> |
56
+ | `fromYear` | `number` | | - | @private @deprecated Use `startMonth` instead. E.g. `startMonth=&#123;new Date(year, 0)&#125;`. @see <https://daypicker.dev/docs/navigation#start-and-end-dates> |
57
+ | `endMonth` | `Date` | | - | The latest month to end the month navigation. @since 9.0.0 @see <https://daypicker.dev/docs/navigation#start-and-end-dates> |
58
+ | `toDate` | `Date` | | - | @private @deprecated This prop has been removed. Use `hidden=&#123;&#123; after: date &#125;&#125;` instead. @see <https://daypicker.dev/docs/navigation#start-and-end-dates> |
59
+ | `toMonth` | `Date` | | - | @private @deprecated This prop has been renamed to `endMonth`. @see <https://daypicker.dev/docs/navigation#start-and-end-dates> |
60
+ | `toYear` | `number` | | - | @private @deprecated Use `endMonth` instead. E.g. `endMonth=&#123;new Date(year, 0)&#125;`. @see <https://daypicker.dev/docs/navigation#start-and-end-dates> |
61
+ | `pagedNavigation` | `boolean` | | - | Paginate the month navigation displaying the `numberOfMonths` at a time. @see <https://daypicker.dev/docs/customization#multiplemonths> |
62
+ | `reverseMonths` | `boolean` | | - | Render the months in reversed order (when numberOfMonths is set) to display the most recent month first. @see <https://daypicker.dev/docs/customization#multiplemonths> |
63
+ | `hideNavigation` | `boolean` | | - | Hide the navigation buttons. This prop won't disable the navigation: to disable the navigation, use disableNavigation. @since 9.0.0 @see <https://daypicker.dev/docs/navigation#hidenavigation> |
64
+ | `disableNavigation` | `boolean` | | - | Disable the navigation between months. This prop won't hide the navigation: to hide the navigation, use hideNavigation. @see <https://daypicker.dev/docs/navigation#disablenavigation> |
65
+ | `captionLayout` | `enum` | | `label` | Show dropdowns to navigate between months or years. |
66
+ | `reverseYears` | `boolean` | | - | Reverse the order of years in the dropdown when using `captionLayout="dropdown"` or `captionLayout="dropdown-years"`. @since 9.9.0 @see <https://daypicker.dev/docs/customization#caption-layouts> |
67
+ | `navLayout` | `enum` | | - | Adjust the positioning of the navigation buttons. |
68
+ | `fixedWeeks` | `boolean` | | - | Display always 6 weeks per each month, regardless of the month’s number of weeks. Weeks will be filled with the days from the next month. @see <https://daypicker.dev/docs/customization#fixed-weeks> |
69
+ | `hideWeekdays` | `boolean` | | - | Hide the row displaying the weekday row header. @since 9.0.0 |
70
+ | `showOutsideDays` | `boolean` | | `true` | Show the outside days (days falling in the next or the previous month). |
71
+ | `showWeekNumber` | `boolean` | | - | Show the week numbers column. Weeks are numbered according to the local week index. @see <https://daypicker.dev/docs/customization#showweeknumber> |
72
+ | `animate` | `boolean` | | - | Animate navigating between months. @since 9.6.0 @see <https://daypicker.dev/docs/navigation#animate> |
73
+ | `broadcastCalendar` | `boolean` | | - | Display the weeks in the month following the broadcast calendar. Setting this prop will ignore weekStartsOn (always Monday) and showOutsideDays will default to true. @since 9.4.0 @see <https://daypicker.dev/docs/localization#broadcast-calendar> @see <https://en.wikipedia.org/wiki/Broadcast_calendar> |
74
+ | `ISOWeek` | `boolean` | | - | Use ISO week dates instead of the locale setting. Setting this prop will ignore `weekStartsOn` and `firstWeekContainsDate`. @see <https://daypicker.dev/docs/localization#iso-week-dates> @see <https://en.wikipedia.org/wiki/ISO_week_date> |
75
+ | `timeZone` | `string` | | - | The time zone (IANA or UTC offset) to use in the calendar (experimental). |
76
+ | `components` | `Partial<CustomComponents>` | | - | Change the components used for rendering the calendar elements. @see <https://daypicker.dev/guides/custom-components> |
77
+ | `footer` | `ReactNode` | | - | Add a footer to the calendar, acting as a live region. |
78
+ | `autoFocus` | `boolean` | | - | When a selection mode is set, DayPicker will focus the first selected day (if set) or today's date (if not disabled). |
79
+ | `initialFocus` | `boolean` | | - | @private @deprecated This prop will be removed. Use autoFocus instead. |
80
+ | `disabled` | `Matcher \| Matcher[]` | | - | Apply the `disabled` modifier to the matching days. Disabled days cannot be selected when in a selection mode is set. @see <https://daypicker.dev/docs/selection-modes#disabled> @see <https://daypicker.dev/docs/selection-modes#disabled> @see <https://daypicker.dev/docs/selection-modes#disabled> |
81
+ | `hidden` | `Matcher \| Matcher[]` | | - | Apply the `hidden` modifier to the matching days. Will hide them from the calendar. @see <https://daypicker.dev/guides/custom-modifiers#hidden-modifier> |
82
+ | `today` | `Date` | | - | The today’s date. Default is the current date. This date will get the `today` modifier to style the day. @see <https://daypicker.dev/guides/custom-modifiers#today-modifier> |
83
+ | `modifiers` | `Record<string, Matcher \| Matcher[]>` | | - | Add modifiers to the matching days. @example const modifiers = { weekend: { dayOfWeek: \[0, 6] }, // Match weekends holiday: \[new Date(2023, 11, 25)] // Match Christmas }; \<DayPicker modifiers={modifiers} /> @see <https://daypicker.dev/guides/custom-modifiers> |
84
+ | `labels` | `Partial<Labels>` | | - | Labels creators to override the defaults. Use this prop to customize the aria-label attributes in DayPicker. @see <https://daypicker.dev/docs/translation#aria-labels> |
85
+ | `formatters` | `Partial<Formatters>` | | - | Formatters used to format dates to strings. Use this prop to override the default functions. @see <https://daypicker.dev/docs/translation#custom-formatters> |
86
+ | `dir` | `string` | | - | The text direction of the calendar. Use `ltr` for left-to-right (default) or `rtl` for right-to-left. @see <https://daypicker.dev/docs/translation#rtl-text-direction> |
87
+ | `aria-label` | `string` | | - | The aria-label attribute to add to the container element. @since 9.4.1 @see <https://daypicker.dev/guides/accessibility> |
88
+ | `aria-labelledby` | `string` | | - | The aria-labelledby attribute to add to the container element. @since 9.11.0 @see <https://daypicker.dev/guides/accessibility> |
89
+ | `role` | `enum` | | - | The role attribute to add to the container element. @since 9.4.1 @see <https://daypicker.dev/guides/accessibility> |
90
+ | `nonce` | `string` | | - | A cryptographic nonce ("number used once") which can be used by Content Security Policy for the inline `style` attributes. |
91
+ | `title` | `string` | | - | Add a `title` attribute to the container element. |
92
+ | `lang` | `string` | | - | Add the language tag to the container element. |
93
+ | `locale` | `Partial<DayPickerLocale>` | | - | The locale object used to localize dates. Pass a locale from `react-day-picker/locale` to localize the calendar. @example import { es } from "react-day-picker/locale"; \<DayPicker locale={es} /> @defaultValue enUS - The English locale default of `date-fns`. @see <https://daypicker.dev/docs/localization> @see <https://github.com/date-fns/date-fns/tree/main/src/locale> for a list of the supported locales |
94
+ | `numerals` | `enum` | | - | The numeral system to use when formatting dates. |
95
+ | `weekStartsOn` | `enum` | | - | The index of the first day of the week (0 - Sunday). Overrides the locale's default. @see <https://daypicker.dev/docs/localization#first-date-of-the-week> |
96
+ | `firstWeekContainsDate` | `enum` | | - | The day of January that is always in the first week of the year. @see <https://daypicker.dev/docs/localization#first-week-contains-date> |
97
+ | `useAdditionalWeekYearTokens` | `boolean` | | - | Enable `DD` and `DDDD` for week year tokens when formatting or parsing dates. @see <https://date-fns.org/docs/Unicode-Tokens> |
98
+ | `useAdditionalDayOfYearTokens` | `boolean` | | - | Enable `YY` and `YYYY` for day of year tokens when formatting or parsing dates. @see <https://date-fns.org/docs/Unicode-Tokens> |
99
+ | `onMonthChange` | `MonthChangeEventHandler` | | - | Event fired when the user navigates between months. @see <https://daypicker.dev/docs/navigation#onmonthchange> |
100
+ | `onNextClick` | `MonthChangeEventHandler` | | - | Event handler when the next month button is clicked. @see <https://daypicker.dev/docs/navigation> |
101
+ | `onPrevClick` | `MonthChangeEventHandler` | | - | Event handler when the previous month button is clicked. @see <https://daypicker.dev/docs/navigation> |
102
+ | `onWeekNumberClick` | `any` | | - | Event handler when a week number is clicked. @private @deprecated Use a custom `WeekNumber` component instead. @see <https://daypicker.dev/docs/customization#showweeknumber> |
103
+ | `onDayClick` | `DayEventHandler<MouseEvent<Element, MouseEvent>>` | | - | Event handler when a day is clicked. |
104
+ | `onDayFocus` | `DayEventHandler<FocusEvent<Element, Element>>` | | - | Event handler when a day is focused. |
105
+ | `onDayBlur` | `DayEventHandler<FocusEvent<Element, Element>>` | | - | Event handler when a day is blurred. |
106
+ | `onDayKeyDown` | `DayEventHandler<KeyboardEvent<Element>>` | | - | Event handler when a key is pressed on a day. |
107
+ | `onDayMouseEnter` | `DayEventHandler<MouseEvent<Element, MouseEvent>>` | | - | Event handler when the mouse enters a day. |
108
+ | `onDayMouseLeave` | `DayEventHandler<MouseEvent<Element, MouseEvent>>` | | - | Event handler when the mouse leaves a day. |
109
+ | `dateLib` | `Partial<DateLib>` | | - | Replace the default date library with a custom one. Experimental: not guaranteed to be stable (may not respect semver). @since 9.0.0 @experimental |
110
+ | `onDayKeyUp` | `DayEventHandler<KeyboardEvent<Element>>` | | - | @private @deprecated Use a custom `DayButton` component instead. |
111
+ | `onDayKeyPress` | `DayEventHandler<KeyboardEvent<Element>>` | | - | @private @deprecated Use a custom `DayButton` component instead. |
112
+ | `onDayPointerEnter` | `DayEventHandler<PointerEvent<Element>>` | | - | @private @deprecated Use a custom `DayButton` component instead. |
113
+ | `onDayPointerLeave` | `DayEventHandler<PointerEvent<Element>>` | | - | @private @deprecated Use a custom `DayButton` component instead. |
114
+ | `onDayTouchCancel` | `DayEventHandler<TouchEvent<Element>>` | | - | @private @deprecated Use a custom `DayButton` component instead. |
115
+ | `onDayTouchEnd` | `DayEventHandler<TouchEvent<Element>>` | | - | @private @deprecated Use a custom `DayButton` component instead. |
116
+ | `onDayTouchMove` | `DayEventHandler<TouchEvent<Element>>` | | - | @private @deprecated Use a custom `DayButton` component instead. |
117
+ | `onDayTouchStart` | `DayEventHandler<TouchEvent<Element>>` | | - | @private @deprecated Use a custom `DayButton` component instead. |
118
+ | `selected` | `Date \| Date[] \| DateRange` | | - | The selected date. The selected dates. The selected range. |
119
+ | `onSelect` | `OnSelectHandler<Date> \| OnSelectHandler<Date> \| OnSelectHandler<Date[]> \| OnSelectHandler<...> \| OnSelectHandler<...> \| OnSelectHandler<...> \| undefined` | | - | Event handler when a day is selected. Event handler when days are selected. Event handler when the selection changes. Event handler when a range is selected. |
120
+ | `buttonVariant` | `"link" \| "default" \| "destructive" \| "secondary" \| "outline" \| "ghost" \| null` | | `ghost` | - |
121
+ | `min` | `number` | | - | The minimum number of selectable days. The minimum number of days to include in the range. |
122
+ | `max` | `number` | | - | The maximum number of selectable days. The maximum number of days to include in the range. |
123
+ | `excludeDisabled` | `boolean` | | - | When `true`, the range will reset when including a disabled day. @since V9.0.2 @see <https://daypicker.dev/docs/selection-modes#exclude-disabled> @since V9.0.2 |
124
+
125
+ ### Usage[​](#usage "Direct link to Usage")
126
+
127
+ ```tsx
128
+ import { Calendar } from '@databricks/appkit-ui';
129
+
130
+ <Calendar /* props */ />
131
+
132
+ ```
133
+
134
+ ## CalendarDayButton[​](#calendardaybutton "Direct link to CalendarDayButton")
135
+
136
+ Individual day button within the calendar grid
137
+
138
+ **Source:** [`packages/appkit-ui/src/react/ui/calendar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/calendar.tsx)
139
+
140
+ ### Props[​](#props-1 "Direct link to Props")
141
+
142
+ | Prop | Type | Required | Default | Description |
143
+ | ----------- | ------------- | -------- | ------- | ---------------------------------- |
144
+ | `day` | `CalendarDay` | ✓ | - | The day to render. |
145
+ | `modifiers` | `Modifiers` | ✓ | - | The modifiers to apply to the day. |
146
+
147
+ ### Usage[​](#usage-1 "Direct link to Usage")
148
+
149
+ ```tsx
150
+ import { CalendarDayButton } from '@databricks/appkit-ui';
151
+
152
+ <CalendarDayButton /* props */ />
153
+
154
+ ```