neba 1.0.0 → 1.2.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 (136) hide show
  1. package/README.md +27 -16
  2. package/dist/components/avatar/Avatar.d.ts +100 -0
  3. package/dist/components/avatar/Avatar.js +1 -0
  4. package/dist/components/avatar/index.d.ts +2 -0
  5. package/dist/components/avatar/index.js +1 -0
  6. package/dist/components/blockquote/Blockquote.d.ts +65 -0
  7. package/dist/components/blockquote/Blockquote.js +1 -0
  8. package/dist/components/blockquote/index.d.ts +2 -0
  9. package/dist/components/blockquote/index.js +1 -0
  10. package/dist/components/breadcrumb/Breadcrumb.d.ts +92 -0
  11. package/dist/components/breadcrumb/Breadcrumb.js +1 -0
  12. package/dist/components/breadcrumb/index.d.ts +2 -0
  13. package/dist/components/breadcrumb/index.js +1 -0
  14. package/dist/components/carousel/Carousel.d.ts +74 -0
  15. package/dist/components/carousel/Carousel.js +1 -0
  16. package/dist/components/carousel/index.d.ts +2 -0
  17. package/dist/components/carousel/index.js +1 -0
  18. package/dist/components/chat-bubble/ChatBubble.d.ts +114 -0
  19. package/dist/components/chat-bubble/ChatBubble.js +1 -0
  20. package/dist/components/chat-bubble/index.d.ts +2 -0
  21. package/dist/components/chat-bubble/index.js +1 -0
  22. package/dist/components/checkbox/Checkbox.js +1 -1
  23. package/dist/components/combobox/Combobox.js +1 -1
  24. package/dist/components/container/Container.d.ts +55 -0
  25. package/dist/components/container/Container.js +1 -0
  26. package/dist/components/container/index.d.ts +2 -0
  27. package/dist/components/container/index.js +1 -0
  28. package/dist/components/date-picker/DatePicker.d.ts +75 -0
  29. package/dist/components/date-picker/DatePicker.js +1 -0
  30. package/dist/components/date-picker/index.d.ts +2 -0
  31. package/dist/components/date-picker/index.js +1 -0
  32. package/dist/components/date-range-picker/DateRangePicker.d.ts +81 -0
  33. package/dist/components/date-range-picker/DateRangePicker.js +1 -0
  34. package/dist/components/date-range-picker/index.d.ts +2 -0
  35. package/dist/components/date-range-picker/index.js +1 -0
  36. package/dist/components/date-time-picker/DateTimePicker.d.ts +68 -0
  37. package/dist/components/date-time-picker/DateTimePicker.js +1 -0
  38. package/dist/components/date-time-picker/index.d.ts +2 -0
  39. package/dist/components/date-time-picker/index.js +1 -0
  40. package/dist/components/dialog/Dialog.js +1 -1
  41. package/dist/components/divider/Divider.d.ts +19 -0
  42. package/dist/components/divider/Divider.js +1 -1
  43. package/dist/components/grid/Grid.d.ts +50 -0
  44. package/dist/components/grid/Grid.js +1 -0
  45. package/dist/components/grid/index.d.ts +2 -0
  46. package/dist/components/grid/index.js +1 -0
  47. package/dist/components/grid-container/GridContainer.d.ts +79 -0
  48. package/dist/components/grid-container/GridContainer.js +1 -0
  49. package/dist/components/grid-container/index.d.ts +2 -0
  50. package/dist/components/grid-container/index.js +1 -0
  51. package/dist/components/highlight/Highlight.d.ts +84 -0
  52. package/dist/components/highlight/Highlight.js +1 -0
  53. package/dist/components/highlight/index.d.ts +2 -0
  54. package/dist/components/highlight/index.js +1 -0
  55. package/dist/components/icon/Icon.d.ts +58 -0
  56. package/dist/components/icon/Icon.js +1 -0
  57. package/dist/components/icon/index.d.ts +2 -0
  58. package/dist/components/icon/index.js +1 -0
  59. package/dist/components/icon-button/IconButton.d.ts +39 -0
  60. package/dist/components/icon-button/IconButton.js +1 -0
  61. package/dist/components/icon-button/index.d.ts +2 -0
  62. package/dist/components/icon-button/index.js +1 -0
  63. package/dist/components/otp-field/OtpField.d.ts +85 -0
  64. package/dist/components/otp-field/OtpField.js +1 -0
  65. package/dist/components/otp-field/index.d.ts +2 -0
  66. package/dist/components/otp-field/index.js +1 -0
  67. package/dist/components/pagination/Pagination.js +1 -1
  68. package/dist/components/panes/Panes.d.ts +78 -0
  69. package/dist/components/panes/Panes.js +1 -0
  70. package/dist/components/panes/index.d.ts +2 -0
  71. package/dist/components/panes/index.js +1 -0
  72. package/dist/components/pill/Pill.d.ts +80 -0
  73. package/dist/components/pill/Pill.js +1 -0
  74. package/dist/components/pill/index.d.ts +2 -0
  75. package/dist/components/pill/index.js +1 -0
  76. package/dist/components/radio-group/RadioGroup.js +1 -1
  77. package/dist/components/segmented-button/SegmentedButton.d.ts +77 -0
  78. package/dist/components/segmented-button/SegmentedButton.js +1 -0
  79. package/dist/components/segmented-button/index.d.ts +2 -0
  80. package/dist/components/segmented-button/index.js +1 -0
  81. package/dist/components/select/Select.js +1 -1
  82. package/dist/components/shortcut/Shortcut.d.ts +60 -0
  83. package/dist/components/shortcut/Shortcut.js +1 -0
  84. package/dist/components/shortcut/index.d.ts +2 -0
  85. package/dist/components/shortcut/index.js +1 -0
  86. package/dist/components/spoiler/Spoiler.d.ts +95 -0
  87. package/dist/components/spoiler/Spoiler.js +1 -0
  88. package/dist/components/spoiler/index.d.ts +2 -0
  89. package/dist/components/spoiler/index.js +1 -0
  90. package/dist/components/statistic/Statistic.d.ts +91 -0
  91. package/dist/components/statistic/Statistic.js +1 -0
  92. package/dist/components/statistic/index.d.ts +2 -0
  93. package/dist/components/statistic/index.js +1 -0
  94. package/dist/components/switch/Switch.js +1 -1
  95. package/dist/components/text-link/TextLink.d.ts +82 -0
  96. package/dist/components/text-link/TextLink.js +1 -0
  97. package/dist/components/text-link/index.d.ts +2 -0
  98. package/dist/components/text-link/index.js +1 -0
  99. package/dist/components/time-picker/TimePicker.d.ts +76 -0
  100. package/dist/components/time-picker/TimePicker.js +1 -0
  101. package/dist/components/time-picker/index.d.ts +2 -0
  102. package/dist/components/time-picker/index.js +1 -0
  103. package/dist/components/timeline/Timeline.d.ts +98 -0
  104. package/dist/components/timeline/Timeline.js +1 -0
  105. package/dist/components/timeline/index.d.ts +2 -0
  106. package/dist/components/timeline/index.js +1 -0
  107. package/dist/components/toolbar/Toolbar.d.ts +67 -0
  108. package/dist/components/toolbar/Toolbar.js +1 -0
  109. package/dist/components/toolbar/index.d.ts +2 -0
  110. package/dist/components/toolbar/index.js +1 -0
  111. package/dist/components/tree-view/TreeView.d.ts +115 -0
  112. package/dist/components/tree-view/TreeView.js +1 -0
  113. package/dist/components/tree-view/index.d.ts +2 -0
  114. package/dist/components/tree-view/index.js +1 -0
  115. package/dist/index.d.ts +26 -0
  116. package/dist/index.js +1 -1
  117. package/dist/internal/calendar.d.ts +149 -0
  118. package/dist/internal/calendar.js +1 -0
  119. package/dist/internal/date.d.ts +170 -0
  120. package/dist/internal/date.js +1 -0
  121. package/dist/internal/grid.d.ts +69 -0
  122. package/dist/internal/grid.js +1 -0
  123. package/dist/internal/i18n.d.ts +78 -0
  124. package/dist/internal/i18n.js +1 -0
  125. package/dist/internal/icons.d.ts +54 -0
  126. package/dist/internal/icons.js +1 -1
  127. package/dist/internal/picker.d.ts +111 -0
  128. package/dist/internal/picker.js +1 -0
  129. package/dist/internal/sizer.d.ts +33 -0
  130. package/dist/internal/sizer.js +1 -0
  131. package/dist/internal/styles.d.ts +33 -0
  132. package/dist/internal/styles.js +1 -1
  133. package/dist/styles.css +2 -758
  134. package/dist/tailwind.css +1017 -0
  135. package/dist/types.d.ts +65 -0
  136. package/package.json +25 -12
@@ -0,0 +1 @@
1
+ import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as r from"react";import{useMessages as a}from"../../internal/i18n";import{CheckIcon as l,ClockIcon as i,LinkIcon as t,severityIcons as o}from"../../internal/icons";import{controlSlots as s,hasContent as c,metaTextClasses as d,radiusClasses as m,sheetBodyClasses as p,sheetHeaderGapClasses as u,srOnlyClasses as b,surfaceClasses as f,transitionClasses as v}from"../../internal/styles";const x={default:{xs:"px-2 py-1",sm:"px-2.5 py-1.5",md:"px-3 py-2",lg:"px-3.5 py-2.5",xl:"px-4 py-3"},compact:{xs:"px-1.5 py-0.5",sm:"px-2 py-1",md:"px-2.5 py-1.5",lg:"px-3 py-1.5",xl:"px-3.5 py-2"}},h={start:"[border-start-start-radius:0.25rem]",end:"[border-start-end-radius:0.25rem]"},g={solid:[f,"text-(--n-on-solid) bg-(--n-fill)","[box-shadow:var(--n-elev),var(--neba-plate-solid)]"].join(" "),outline:[f,"border text-(--neba-fg) bg-(--n-panel)","[border-color:var(--n-line)]","[box-shadow:var(--n-elev),var(--neba-plate-glass)]"].join(" "),text:"text-(--neba-fg) bg-(--n-soft) [box-shadow:var(--n-elev)]"};function y(){return n("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:[e("path",{d:"m1.5 8.5 2.75 2.75L9.5 6",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"}),e("path",{d:"M7 10.75 8.25 12l5.25-5.25",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})]})}const w={sending:e(i,{}),sent:e(l,{}),delivered:e(y,{}),read:e(y,{}),failed:o.danger},N={sending:"text-(--neba-muted-fg)",sent:"text-(--neba-muted-fg)",delivered:"text-(--neba-muted-fg)",read:"text-(--n-accent)",failed:"text-(--neba-danger-accent)"},k=["block overflow-hidden rounded-(--neba-radius-sm) border no-underline","[border-color:color-mix(in_oklab,currentColor_18%,transparent)]","[background-color:color-mix(in_oklab,currentColor_7%,transparent)]","hover:[background-color:color-mix(in_oklab,currentColor_12%,transparent)]","[transition-property:background-color] [transition-duration:var(--neba-duration)]","[transition-timing-function:var(--neba-ease)]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),_=["shrink-0 opacity-0","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","group-hover/bubble:opacity-100 group-focus-within/bubble:opacity-100","[@media(hover:none)]:opacity-100"].join(" ");export const ChatBubble=r.forwardRef(function({side:r="start",name:l,time:i,avatar:t,status:o,statusLabel:f,typing:y=!1,media:k,preview:L,actions:z,locale:B,variant:W="outline",size:M="md",color:R="primary",density:T="default",elevation:$=0,className:q,style:A,children:D,...E},F){const G=a(B),H="end"===r,I=c(l)||c(i),J=y||c(D)||Boolean(L),K=["flex min-w-0 flex-col overflow-hidden",m[M],h[r],g[W],v].join(" "),O=o?f??G.chat[o]:"";return n("div",{ref:F,className:["group/bubble flex w-full items-start gap-2",H?"flex-row-reverse":"",q??""].filter(Boolean).join(" "),style:{...s(R,$,W),...A},...E,children:[c(t)?e("div",{className:"shrink-0",children:t}):null,n("div",{className:["flex min-w-0 max-w-[min(100%,32rem)] flex-col",u[M],H?"items-end":"items-start"].join(" "),children:[I?n("div",{className:`flex items-baseline gap-2 ${d[M]}`,children:[c(l)?e("span",{className:"font-semibold",children:l}):null,c(i)?e("span",{className:"text-(--neba-muted-fg)",children:i}):null]}):null,n("div",{className:"flex min-w-0 items-center gap-1 "+(H?"flex-row-reverse":""),children:[n("div",{className:K,children:[c(k)?e("div",{className:"[&_img]:block [&_img]:w-full [&_video]:block [&_video]:w-full",children:k}):null,J?n("div",{className:[x[T][M],"flex min-w-0 flex-col gap-2",p[M]].join(" "),children:[y?e(j,{label:G.chat.typing}):c(D)?e("div",{className:"min-w-0 break-words whitespace-pre-line",children:D}):null,L?e(C,{preview:L}):null]}):null]}),c(z)?e("div",{className:_,children:z}):null]}),o?n("div",{className:["flex items-center gap-1",d[M],N[o],"[&_svg]:size-[1.15em] [&_svg]:shrink-0"].join(" "),children:[w[o],e("span",{className:b,children:O})]}):null]})]})});function j({label:r}){return n("div",{className:"flex items-center gap-1 py-[0.35em]",role:"status",children:[[0,1,2].map(n=>e("span",{"aria-hidden":"true",className:"neba-typing-dot size-[0.45em] rounded-full",style:{"--n-i":n}},n)),e("span",{className:b,children:r})]})}function C({preview:r}){const{url:a,title:l,description:i,image:o,site:s,newTab:d=!1}=r;return n("a",{href:a,target:d?"_blank":void 0,rel:d?"noopener noreferrer":void 0,className:k,children:[o?e("img",{src:o,alt:"",className:"block h-28 w-full object-cover"}):null,n("div",{className:"flex flex-col gap-0.5 p-2",children:[c(s)?n("span",{className:"flex items-center gap-1 text-[0.85em] opacity-70 [&_svg]:size-[1em] [&_svg]:shrink-0",children:[e(t,{}),e("span",{className:"truncate",children:s})]}):null,c(l)?e("span",{className:"font-semibold",children:l}):null,c(i)?e("span",{className:"line-clamp-2 text-[0.9em] opacity-80",children:i}):null]})]})}
@@ -0,0 +1,2 @@
1
+ export { ChatBubble } from './ChatBubble';
2
+ export type { ChatBubbleLinkPreview, ChatBubbleProps, ChatBubbleSide, ChatBubbleStatus } from './ChatBubble';
@@ -0,0 +1 @@
1
+ export{ChatBubble}from"./ChatBubble";
@@ -1 +1 @@
1
- import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{Checkbox as r}from"@base-ui/react/checkbox";import{Field as l}from"@base-ui/react/field";import{controlTextClasses as i,metaTextClasses as o,surfaceClasses as t,tickRadiusClasses as s,tickSizeClasses as d,transitionClasses as c}from"../../internal/styles";const b=["relative inline-flex shrink-0 items-center justify-center border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",c,"active:[transition-duration:0ms]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),h=[t,"cursor-pointer bg-(--n-panel) [border-color:var(--n-line)]","[box-shadow:var(--neba-plate-glass)]","hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]","data-[checked]:[box-shadow:var(--neba-plate-solid)]","data-[checked]:hover:bg-(--n-fill-hover)","data-[indeterminate]:bg-(--n-fill) data-[indeterminate]:text-(--n-on-solid)","data-[indeterminate]:[border-color:transparent]"].join(" "),f=[t,"cursor-default bg-(--n-panel) [border-color:var(--n-line)]","[box-shadow:var(--neba-plate-glass)] [filter:saturate(0.55)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),v=["cursor-not-allowed bg-transparent [border-color:var(--neba-disabled-border)]","text-(--neba-disabled-fg) shadow-none","data-[checked]:bg-(--neba-disabled-bg)","data-[indeterminate]:bg-(--neba-disabled-bg)"].join(" ");function m(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2 6.2 4.6 8.8 10 3.4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function p(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2.5 6h7",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}export const Checkbox=n.forwardRef(function({size:n="md",color:t="primary",label:c,description:u,error:g,invalid:x,disabled:k=!1,readOnly:j=!1,className:N,style:w,...$},y){const z=null!=g&&!1!==g&&""!==g,C=x??z,L=C?"danger":t,B={"--n-fill":`var(--neba-${L}-fill)`,"--n-fill-hover":`var(--neba-${L}-fill-hover)`,"--n-on-solid":`var(--neba-${L}-on-solid)`,"--n-accent":`var(--neba-${L}-accent)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-line":`var(--neba-${L}-line)`,"--n-line-hover":`var(--neba-${L}-line-hover)`,"--n-ring":`var(--neba-${L}-ring)`},R=[b,d[n],s[n],k?v:j?f:h].join(" ");return a(l.Root,{disabled:k,invalid:C,className:["inline-flex flex-col gap-1 align-top",N??""].filter(Boolean).join(" "),style:{...B,...w},children:[a("div",{className:`flex items-start gap-2 ${i[n]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(r.Root,{ref:y,className:R,disabled:k,readOnly:j,...$,children:e(r.Indicator,{className:"flex size-[70%] items-center justify-center",children:$.indeterminate?e(p,{}):e(m,{})})})}),c||u?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[c?e(l.Label,{className:["leading-[1.4]",k?"text-(--neba-disabled-fg)":"cursor-pointer text-(--neba-fg)"].join(" "),children:c}):null,u?e(l.Description,{className:`${o[n]} text-(--neba-muted-fg)`,children:u}):null]}):null]}),z?e(l.Error,{match:!0,className:`${o[n]} text-(--n-accent)`,children:g}):null]})});
1
+ import{jsx as e,jsxs as n}from"react/jsx-runtime";import*as r from"react";import{Checkbox as a}from"@base-ui/react/checkbox";import{Field as i}from"@base-ui/react/field";import{controlTextClasses as l,metaTextClasses as t,surfaceClasses as o,tickRadiusClasses as s,tickRowLeadingClasses as d,tickSizeClasses as c,transitionClasses as b}from"../../internal/styles";const h=["relative inline-flex shrink-0 items-center justify-center border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",b,"active:[transition-duration:0ms]","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),f=[o,"cursor-pointer bg-(--n-panel) [border-color:var(--n-line)]","hover:bg-(--n-panel-hover) hover:[border-color:var(--n-line-hover)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]","data-[checked]:hover:bg-(--n-fill-hover)","data-[indeterminate]:bg-(--n-fill) data-[indeterminate]:text-(--n-on-solid)","data-[indeterminate]:[border-color:transparent]"].join(" "),m=[o,"cursor-default bg-(--n-panel) [border-color:var(--n-line)]","[filter:saturate(0.55)]","data-[checked]:bg-(--n-fill) data-[checked]:text-(--n-on-solid)","data-[checked]:[border-color:transparent]"].join(" "),u=["cursor-not-allowed bg-transparent [border-color:var(--neba-disabled-border)]","text-(--neba-disabled-fg) shadow-none","data-[checked]:bg-(--neba-disabled-bg)","data-[indeterminate]:bg-(--neba-disabled-bg)"].join(" ");function v(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2 6.2 4.6 8.8 10 3.4",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function p(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2.5 6h7",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}export const Checkbox=r.forwardRef(function({size:r="md",color:o="primary",label:b,description:g,error:x,invalid:k,disabled:j=!1,readOnly:N=!1,className:$,style:y,...w},z){const C=null!=x&&!1!==x&&""!==x,L=k??C,B=L?"danger":o,R={"--n-fill":`var(--neba-${B}-fill)`,"--n-fill-hover":`var(--neba-${B}-fill-hover)`,"--n-on-solid":`var(--neba-${B}-on-solid)`,"--n-accent":`var(--neba-${B}-accent)`,"--n-panel":"var(--neba-panel)","--n-panel-hover":"var(--neba-panel-hover)","--n-line":`var(--neba-${B}-line)`,"--n-line-hover":`var(--neba-${B}-line-hover)`,"--n-ring":`var(--neba-${B}-ring)`},M=[h,c[r],s[r],j?u:N?m:f].join(" ");return n(i.Root,{disabled:j,invalid:L,className:["inline-flex flex-col gap-1 align-top",$??""].filter(Boolean).join(" "),style:{...R,...y},children:[n("div",{className:`flex items-start gap-2 ${l[r]} ${d}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(a.Root,{ref:z,className:M,disabled:j,readOnly:N,...w,children:e(a.Indicator,{className:"flex size-[70%] items-center justify-center",children:w.indeterminate?e(p,{}):e(v,{})})})}),b||g?n("span",{className:"flex min-w-0 flex-col gap-0.5",children:[b?e(i.Label,{className:["leading-[1.4]",j?"text-(--neba-disabled-fg)":"cursor-pointer text-(--neba-fg)"].join(" "),children:b}):null,g?e(i.Description,{className:`${t[r]} text-(--neba-muted-fg)`,children:g}):null]}):null]}),C?e(i.Error,{match:!0,className:`${t[r]} text-(--n-accent)`,children:x}):null]})});
@@ -1 +1 @@
1
- import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Combobox as n}from"@base-ui/react/combobox";import{Field as t}from"@base-ui/react/field";import{Chip as i}from"../chip/Chip";import{CheckIcon as r,ChevronIcon as o,CloseIcon as s,PlusIcon as c}from"../../internal/icons";import{chipRemoveClasses as d,controlHeightClasses as u,controlTextLeadingClasses as m,disabledClasses as p,fieldReadOnlyClasses as h,fieldRestClasses as b,focusWithinRingClasses as f,gapClasses as g,hasContent as x,iconClasses as v,metaTextClasses as y,paddingXClasses as N,radiusClasses as w,stackGapClasses as C,surfaceClasses as j,surfaceSlots as L,transitionClasses as I}from"../../internal/styles";const S=["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",I,"focus-within:[transition-duration:0ms]",f,v].join(" "),$={xs:"min-h-5.5 py-0",sm:"min-h-6.5 py-[2px]",md:"min-h-8 py-[3px]",lg:"min-h-10 py-[4px]",xl:"min-h-12 py-[4px]"},O=[j,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","w-[var(--anchor-width)] border bg-(--n-panel-press) p-1","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]"].join(" "),V=["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--neba-radius-xs) py-1.5 pe-2 ps-7",I,"data-[highlighted]:bg-(--n-soft-hover)","data-[selected]:text-(--n-accent) data-[selected]:font-medium","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]"].join(" "),_=["inline-flex h-[1lh] shrink-0 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg)","[transition:color_var(--neba-duration)_var(--neba-ease)]","hover:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed disabled:text-(--neba-disabled-fg)"].join(" ");function z(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function Combobox({variant:f="outline",size:v="md",color:j="primary",density:I="default",elevation:A=0,items:R,multiple:k,value:T,defaultValue:q,onValueChange:E,onInputValueChange:F,allowCustom:M=!0,customLabel:P,clearable:B=!1,emptyMessage:D="No matches",limit:G,placeholder:H,label:W,description:J,error:K,invalid:Q,startIcon:U,fullWidth:X=!1,disabled:Y=!1,readOnly:Z=!1,required:ee=!1,name:ae,open:le,defaultOpen:ne,onOpenChange:te,clearLabel:ie="Clear",removeLabel:re=e=>`Remove ${e}`,inputRef:oe,id:se,className:ce,style:de}){const ue=x(K),me=Q??ue,pe=me?"danger":j,he=!0===k,be=l.useMemo(()=>R.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[R]),[fe,ge]=l.useState(()=>z(q)),xe=void 0===T?fe:z(T),[ve,ye]=l.useState(""),Ne=l.useCallback(e=>be.find(a=>a.value===e)??{value:e,label:String(e),custom:!0},[be]),we=ve.trim(),Ce=we.toLocaleLowerCase(),je=""===we||be.some(e=>e.label.toLocaleLowerCase()===Ce||String(e.value).toLocaleLowerCase()===Ce)||xe.some(e=>String(e).toLocaleLowerCase()===Ce),Le=!M||Z||Y||je?null:we,Ie=l.useMemo(()=>null===Le?be:[...be,{value:Le,label:Le,custom:!0}],[be,Le]),Se=he?xe.map(Ne):xe.length>0?Ne(xe[0]):null;const $e=N[I][v],Oe=[S,m[v],w[v],g[v],he?$[v]:u[v],`${$e} pe-1.5`,Y?p[f]:Z?h[f]:b[f]].join(" "),Ve=["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed"].join(" "),_e=e(n.Input,{ref:oe,placeholder:H,className:he?`${Ve} min-w-16 h-[1lh]`:Ve});return a(t.Root,{disabled:Y,invalid:me,className:["flex-col align-top",C[v],X?"flex w-full":"inline-flex",ce??""].filter(Boolean).join(" "),style:{...L(pe,A),...de},children:[W?e(t.Label,{className:[y[v],"font-medium",Y?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:W}):null,a(n.Root,{id:se,name:ae,items:Ie,multiple:he,value:Se,onValueChange:e=>{!function(e){void 0===T&&ge(e),E?.(he?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{ye(e),F?.(e)},open:le,defaultOpen:ne,onOpenChange:e=>te?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:G,disabled:Y,readOnly:Z,required:ee,children:[a(n.InputGroup,{className:Oe,children:[U?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:U}):null,he?e(n.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(n.Value,{children:t=>a(l.Fragment,{children:[t.map(a=>e(n.Chip,{render:e(i,{variant:"outline",size:v,color:pe,density:"compact",disabled:Y,endIcon:Z||Y?null:e(n.ChipRemove,{"aria-label":re(a.label),className:d,children:e(s,{})})}),children:a.label},String(a.value))),_e]})})}):_e,B&&!Z?e(n.Clear,{"aria-label":ie,className:_,children:e(s,{})}):null,e(n.Trigger,{"aria-label":"string"==typeof W?void 0:"Open",className:_,children:e(n.Icon,{className:["flex items-center","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[popup-open]:rotate-180"].join(" "),children:e(o,{})})})]}),e(n.Portal,{children:e(n.Positioner,{className:"neba-portal z-50 [outline:none]",sideOffset:6,children:a(n.Popup,{className:`${O} ${w[v]} ${m[v]}`,children:[e(n.Empty,{className:"px-2 py-1.5 text-(--neba-muted-fg) empty:hidden",children:D}),e(n.List,{children:t=>e(n.Item,{value:t,disabled:t.disabled,className:V,children:t.custom?a(l.Fragment,{children:[e("span",{className:"absolute start-1.5 flex size-4 items-center justify-center text-(--n-accent) [&_svg]:size-4",children:e(c,{})}),e("span",{className:"truncate",children:P?P(t.label):`Add “${t.label}”`})]}):a(l.Fragment,{children:[e(n.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(r,{})}),e("span",{className:"truncate",children:t.label})]})},`${t.custom?"custom:":""}${String(t.value)}`)})]})})})]}),J?e(t.Description,{className:`${y[v]} text-(--neba-muted-fg)`,children:J}):null,ue?e(t.Error,{match:!0,className:`${y[v]} text-(--n-accent)`,children:K}):null]})}
1
+ import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{Combobox as n}from"@base-ui/react/combobox";import{Field as t}from"@base-ui/react/field";import{Chip as i}from"../chip/Chip";import{CheckIcon as r,ChevronIcon as o,CloseIcon as s,PlusIcon as c}from"../../internal/icons";import{chipRemoveClasses as d,controlHeightClasses as u,controlTextLeadingClasses as m,disabledClasses as p,fieldReadOnlyClasses as h,fieldRestClasses as b,focusWithinRingClasses as f,gapClasses as g,hasContent as x,iconClasses as v,metaTextClasses as y,paddingXClasses as N,radiusClasses as w,stackGapClasses as C,surfaceClasses as j,surfaceSlots as L,transitionClasses as $}from"../../internal/styles";const I=["group relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent]",$,"focus-within:[transition-duration:0ms]",f,v].join(" "),S={xs:"min-h-5.5 py-0",sm:"min-h-6.5 py-[2px]",md:"min-h-8 py-[3px]",lg:"min-h-10 py-[4px]",xl:"min-h-12 py-[4px]"},O=[j,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","w-[var(--anchor-width)] border bg-(--n-panel-press) p-1","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]"].join(" "),V=["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--neba-radius-xs) py-1.5 pe-2 ps-7",$,"data-[highlighted]:bg-(--n-soft-hover) data-[highlighted]:text-(--n-accent)","data-[selected]:text-(--n-accent) data-[selected]:font-medium","data-[disabled]:cursor-not-allowed data-[disabled]:text-(--neba-disabled-fg)","[outline:none]"].join(" "),_=["inline-flex h-[1lh] shrink-0 cursor-pointer items-center justify-center","rounded-(--neba-radius-xs) text-(--neba-muted-fg)","[transition:color_var(--neba-duration)_var(--neba-ease)]","hover:text-(--n-accent)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-1","disabled:cursor-not-allowed disabled:text-(--neba-disabled-fg)"].join(" ");function z(e){return null==e?[]:Array.isArray(e)?e.slice():[e]}export function Combobox({variant:f="outline",size:v="md",color:j="primary",density:$="default",elevation:A=0,items:R,multiple:k,value:T,defaultValue:q,onValueChange:E,onInputValueChange:F,allowCustom:M=!0,customLabel:P,clearable:B=!1,emptyMessage:D="No matches",limit:G,placeholder:H,label:W,description:J,error:K,invalid:Q,startIcon:U,fullWidth:X=!1,disabled:Y=!1,readOnly:Z=!1,required:ee=!1,name:ae,open:le,defaultOpen:ne,onOpenChange:te,clearLabel:ie="Clear",removeLabel:re=e=>`Remove ${e}`,inputRef:oe,id:se,className:ce,style:de}){const ue=x(K),me=Q??ue,pe=me?"danger":j,he=!0===k,be=l.useMemo(()=>R.map(e=>({value:e.value,label:e.label??String(e.value),disabled:e.disabled})),[R]),[fe,ge]=l.useState(()=>z(q)),xe=void 0===T?fe:z(T),[ve,ye]=l.useState(""),Ne=l.useCallback(e=>be.find(a=>a.value===e)??{value:e,label:String(e),custom:!0},[be]),we=ve.trim(),Ce=we.toLocaleLowerCase(),je=""===we||be.some(e=>e.label.toLocaleLowerCase()===Ce||String(e.value).toLocaleLowerCase()===Ce)||xe.some(e=>String(e).toLocaleLowerCase()===Ce),Le=!M||Z||Y||je?null:we,$e=l.useMemo(()=>null===Le?be:[...be,{value:Le,label:Le,custom:!0}],[be,Le]),Ie=he?xe.map(Ne):xe.length>0?Ne(xe[0]):null;const Se=N[$][v],Oe=[I,m[v],w[v],g[v],he?S[v]:u[v],`${Se} pe-1.5`,Y?p[f]:Z?h[f]:b[f]].join(" "),Ve=["min-w-0 flex-1 self-stretch bg-transparent [font:inherit] text-inherit","[outline:none]","placeholder:text-(--neba-muted-fg)","caret-(--n-accent) selection:bg-(--n-soft-press)","disabled:cursor-not-allowed"].join(" "),_e=a=>e(n.Input,{ref:oe,placeholder:H,className:he?`${Ve} min-w-16 ${a?"ms-1.5":""}`:Ve});return a(t.Root,{disabled:Y,invalid:me,className:["flex-col align-top",C[v],X?"flex w-full":"inline-flex",ce??""].filter(Boolean).join(" "),style:{...L(pe,A),...de},children:[W?e(t.Label,{className:[y[v],"font-medium",Y?"text-(--neba-disabled-fg)":"text-(--neba-fg)"].join(" "),children:W}):null,a(n.Root,{id:se,name:ae,items:$e,multiple:he,value:Ie,onValueChange:e=>{!function(e){void 0===T&&ge(e),E?.(he?e:e[0]??null)}((null===e?[]:Array.isArray(e)?e:[e]).map(e=>e.value))},onInputValueChange:e=>{ye(e),F?.(e)},open:le,defaultOpen:ne,onOpenChange:e=>te?.(e),autoHighlight:!0,itemToStringLabel:e=>e.label,itemToStringValue:e=>String(e.value),isItemEqualToValue:(e,a)=>e.value===a.value,limit:G,disabled:Y,readOnly:Z,required:ee,children:[a(n.InputGroup,{className:Oe,children:[U?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--neba-muted-fg)",children:U}):null,he?e(n.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(n.Value,{children:t=>a(l.Fragment,{children:[t.map(a=>e(n.Chip,{render:e(i,{variant:"outline",size:v,color:pe,density:"compact",disabled:Y,endIcon:Z||Y?null:e(n.ChipRemove,{"aria-label":re(a.label),className:d,children:e(s,{})})}),children:a.label},String(a.value))),_e(t.length>0)]})})}):_e(!1),B&&!Z?e(n.Clear,{"aria-label":ie,className:_,children:e(s,{})}):null,e(n.Trigger,{"aria-label":"string"==typeof W?void 0:"Open",className:_,children:e(n.Icon,{className:["flex items-center","[transition:rotate_var(--neba-duration)_var(--neba-ease)]","data-[popup-open]:rotate-180"].join(" "),children:e(o,{})})})]}),e(n.Portal,{children:e(n.Positioner,{className:"neba-portal z-50 [outline:none]",sideOffset:6,children:a(n.Popup,{className:`${O} ${w[v]} ${m[v]}`,style:L(pe,3),children:[e(n.Empty,{className:"px-2 py-1.5 text-(--neba-muted-fg) empty:hidden",children:D}),e(n.List,{children:t=>e(n.Item,{value:t,disabled:t.disabled,className:V,children:t.custom?a(l.Fragment,{children:[e("span",{className:"absolute start-1.5 flex size-4 items-center justify-center text-(--n-accent) [&_svg]:size-4",children:e(c,{})}),e("span",{className:"truncate",children:P?P(t.label):`Add “${t.label}”`})]}):a(l.Fragment,{children:[e(n.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(r,{})}),e("span",{className:"truncate",children:t.label})]})},`${t.custom?"custom:":""}${String(t.value)}`)})]})})})]}),J?e(t.Description,{className:`${y[v]} text-(--neba-muted-fg)`,children:J}):null,ue?e(t.Error,{match:!0,className:`${y[v]} text-(--n-accent)`,children:K}):null]})}
@@ -0,0 +1,55 @@
1
+ import * as React from 'react';
2
+ import { useRender } from '@base-ui/react/use-render';
3
+ import type { NebaDensity, NebaSize } from '../../types';
4
+ export interface ContainerProps extends React.ComponentPropsWithoutRef<'div'> {
5
+ /**
6
+ * How wide the content is allowed to get, on the same ladder the breakpoints
7
+ * use — `sm` 40rem, `md` 48rem, `lg` 64rem, `xl` 80rem, `xs` 30rem.
8
+ *
9
+ * `none`, the default, is no limit: a Container's job is the gutter, and a
10
+ * measure is a second decision that a page should have to ask for.
11
+ * @default 'none'
12
+ */
13
+ maxWidth?: NebaSize | 'none';
14
+ /**
15
+ * The gutter, on the `size`/`density` scale. Turn it off to keep the
16
+ * centring and the measure without the padding.
17
+ * @default true
18
+ */
19
+ padded?: boolean;
20
+ /**
21
+ * The gutter's scale. As on Box, `size` here is the size of the *sheet* — it
22
+ * never touches a height or the type scale — and it is independent of
23
+ * `maxWidth`, which is how wide the content gets rather than how far it sits
24
+ * from the edge.
25
+ * @default 'md'
26
+ */
27
+ size?: NebaSize;
28
+ /** @default 'default' */
29
+ density?: NebaDensity;
30
+ /**
31
+ * Centres the content once `maxWidth` is narrower than the page. No effect
32
+ * while `maxWidth` is `none`, because there is nothing left over to centre in.
33
+ * @default true
34
+ */
35
+ centered?: boolean;
36
+ /**
37
+ * Renders something other than a `<div>`: `render={<main />}`,
38
+ * `render={<section />}`. Base UI's own escape hatch.
39
+ */
40
+ render?: useRender.RenderProp;
41
+ children?: React.ReactNode;
42
+ }
43
+ /**
44
+ * Horizontal breathing room, and optionally a measure.
45
+ *
46
+ * Nothing to do with the grid — a Container holds a grid as happily as it holds
47
+ * a single paragraph, and a `GridContainer` needs no Container around it. The
48
+ * two are separate because the questions are separate: how far the content sits
49
+ * from the edge of the window, and how the content divides itself up.
50
+ *
51
+ * It draws no surface for the same reason `GridContainer` does not. The
52
+ * outermost element on a page is the one thing that must not decide what the
53
+ * page looks like.
54
+ */
55
+ export declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
@@ -0,0 +1 @@
1
+ import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{boxPaddingXClasses as m}from"../box/Box";const o={xs:"max-w-[30rem]",sm:"max-w-[40rem]",md:"max-w-[48rem]",lg:"max-w-[64rem]",xl:"max-w-[80rem]"};export const Container=e.forwardRef(function({maxWidth:e="none",padded:n=!0,size:a="md",density:t="default",centered:d=!0,render:s,className:i,children:c,...l},x){const f=["block w-full","none"===e?"":o[e],d?"mx-auto":"",n?m[t][a]:"",i??""].filter(Boolean).join(" ");return r({render:s,ref:x,props:{className:f,children:c,...l}})});
@@ -0,0 +1,2 @@
1
+ export { Container } from './Container';
2
+ export type { ContainerProps } from './Container';
@@ -0,0 +1 @@
1
+ export{Container}from"./Container";
@@ -0,0 +1,75 @@
1
+ import * as React from 'react';
2
+ import { type PickerLabels } from '../../internal/calendar';
3
+ import { type PickerShellProps } from '../../internal/picker';
4
+ import type { NebaWeekday } from '../../types';
5
+ /**
6
+ * What the four pickers agree on, so a caller who has learned one has learned
7
+ * the others. Spelled out here rather than in `internal/` because these are the
8
+ * props a reader of the docs is actually looking at.
9
+ */
10
+ export interface DatePickerProps extends PickerShellProps {
11
+ /** The chosen day. Use with `onValueChange` for a controlled picker. */
12
+ value?: Date | null;
13
+ /** The day the picker starts on, for an uncontrolled one. */
14
+ defaultValue?: Date | null;
15
+ onValueChange?: (value: Date | null) => void;
16
+ /** Whether the calendar is open. Use with `onOpenChange` to control it. */
17
+ open?: boolean;
18
+ defaultOpen?: boolean;
19
+ onOpenChange?: (open: boolean) => void;
20
+ /** Which month the calendar opens on when there is no value. @default this one */
21
+ defaultMonth?: Date;
22
+ /** The earliest day that may be chosen. Day-granular — the time is ignored. */
23
+ minDate?: Date | null;
24
+ /** The latest day that may be chosen. */
25
+ maxDate?: Date | null;
26
+ /**
27
+ * Blocks individual days that are inside the range but still not available —
28
+ * weekends, holidays, a room that is already booked.
29
+ */
30
+ shouldDisableDate?: (date: Date) => boolean;
31
+ /**
32
+ * BCP 47 tag deciding the month and weekday names, the order of the header's
33
+ * two buttons, and how the trigger writes the date. Defaults to the browser's.
34
+ */
35
+ locale?: string;
36
+ /** Which day the week starts on. Defaults to whatever the locale says. */
37
+ weekStartsOn?: NebaWeekday;
38
+ /**
39
+ * How the trigger writes the chosen date. Passed straight to `Intl`, so
40
+ * `{ dateStyle: 'full' }` and `{ year: '2-digit', month: 'narrow' }` both work.
41
+ * @default { dateStyle: 'medium' }
42
+ */
43
+ format?: Intl.DateTimeFormatOptions;
44
+ /** Shown in the trigger while nothing is chosen. */
45
+ placeholder?: React.ReactNode;
46
+ /** Offers the × that empties the control. @default false */
47
+ clearable?: boolean;
48
+ /** Offers the shortcut to today in the footer. @default true */
49
+ showTodayButton?: boolean;
50
+ /** Closes the popup as soon as a day is chosen. @default true */
51
+ closeOnSelect?: boolean;
52
+ /** The strings a screen reader hears. Every one has an English default. */
53
+ labels?: Partial<PickerLabels>;
54
+ /** Identifies the field when a form is submitted, as `YYYY-MM-DD`. */
55
+ name?: string;
56
+ }
57
+ /**
58
+ * One day, chosen from a calendar.
59
+ *
60
+ * The trigger is a TextField's shell wearing a calendar glyph, on purpose and
61
+ * for the reason Select's is: a form where the date field is a different height,
62
+ * radius or colour from the fields around it is a form that looks assembled.
63
+ *
64
+ * What the calendar is actually for is the header. A picker that only steps a
65
+ * month at a time puts a birthday thirty years back a hundred and eighty clicks
66
+ * away, so the month name and the year are each a button that opens a grid of
67
+ * its own — twelve months, then twelve years at a time. Any month of the year on
68
+ * screen is two clicks; any year at all is three.
69
+ *
70
+ * There is no typing into the trigger. Parsing a date out of free text is
71
+ * locale-dependent in a way that cannot be done honestly without a date library,
72
+ * and a field that understands `27/7/26` in one browser and not in the next is
73
+ * worse than one that never claimed to.
74
+ */
75
+ export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1 @@
1
+ import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{Button as l}from"../button/Button";import{Calendar as o,usePickerLabels as n}from"../../internal/calendar";import{CalendarIcon as r}from"../../internal/icons";import{PickerFooter as i,PickerShell as s}from"../../internal/picker";import{displaySamples as c,formatDate as d,isDayOutside as m,isValidDate as u,localeWeekStart as p,mergeDateAndTime as f,startOfDay as h,startOfMonth as b,toISODate as y,today as x,withPlaceholder as v}from"../../internal/date";import{cx as D}from"../../internal/styles";export const DatePicker=t.forwardRef(function({value:O,defaultValue:S,onValueChange:g,open:C,defaultOpen:k,onOpenChange:z,defaultMonth:w,minDate:j,maxDate:M,shouldDisableDate:V,locale:B,weekStartsOn:I,format:R={dateStyle:"medium"},placeholder:E,clearable:F=!1,showTodayButton:N=!0,closeOnSelect:P=!0,labels:T,name:q,size:A="md",color:G="primary",readOnly:H=!1,disabled:J=!1,startIcon:K,...L},Q){const U=n(T),W=I??p(B),[X,Y]=t.useState(S??null),Z=void 0!==O?O:X,[$,_]=t.useState(k??!1),ee=C??$,[ae,te]=t.useState(()=>b(u(Z)?Z:w??x()));t.useEffect(()=>{ee&&te(b(u(Z)?Z:w??x()))},[ee]);const le=e=>{e&&(H||J)||(void 0===C&&_(e),z?.(e))},oe=e=>{void 0===O&&Y(e),g?.(e)},ne=e=>{const a=u(Z)?f(e,Z):h(e);oe(a),te(b(a)),P&&le(!1)},re=x(),ie=m(re,j,M)||(V?.(re)??!1),se=N||F,ce=t.useMemo(()=>v(c(B,R),E),[B,R,E]);return e(s,{...L,size:A,color:G,readOnly:H,disabled:J,triggerRef:Q,startIcon:K??e(r,{}),display:u(Z)?d(Z,B,R):E??"",samples:ce,empty:!u(Z),clearable:F,onClear:()=>oe(null),open:ee,onOpenChange:le,labels:U,hiddenValues:q?[{name:q,value:u(Z)?y(Z):""}]:void 0,children:a("div",{className:D("flex flex-col",se&&"gap-1.5"),children:[e(o,{size:A,color:G,locale:B,weekStartsOn:W,month:ae,onMonthChange:te,selected:[Z],onSelect:ne,minDate:j,maxDate:M,shouldDisableDate:V,labels:U,autoFocus:!0}),se?a(i,{size:A,children:[F?e(l,{variant:"text",size:A,color:G,density:"compact",onClick:()=>{oe(null),le(!1)},children:U.clear}):null,N?e(l,{variant:"text",size:A,color:G,density:"compact",disabled:ie,onClick:()=>ne(re),children:U.today}):null]}):null]})})});
@@ -0,0 +1,2 @@
1
+ export { DatePicker } from './DatePicker';
2
+ export type { DatePickerProps } from './DatePicker';
@@ -0,0 +1 @@
1
+ export{DatePicker}from"./DatePicker";
@@ -0,0 +1,81 @@
1
+ import * as React from 'react';
2
+ import { type PickerLabels } from '../../internal/calendar';
3
+ import { type PickerShellProps } from '../../internal/picker';
4
+ import type { NebaWeekday } from '../../types';
5
+ /**
6
+ * Two ends, either of which may be missing.
7
+ *
8
+ * An object rather than a `[Date, Date]` tuple, and rather than two props. A
9
+ * range is one value — it is chosen in one gesture, cleared in one gesture and
10
+ * validated as a whole — and the two names are what stop a caller writing the
11
+ * end into the start. Half a range is a real state: it is what the picker holds
12
+ * between the first click and the second.
13
+ */
14
+ export interface DateRange {
15
+ start: Date | null;
16
+ end: Date | null;
17
+ }
18
+ /** A named range offered as a shortcut beside the calendars. */
19
+ export interface DateRangePreset {
20
+ label: React.ReactNode;
21
+ /**
22
+ * The range it stands for. A function when it depends on today, which is
23
+ * almost always — "the last 7 days" computed at render time is a range that
24
+ * would be wrong for anyone who left the tab open overnight.
25
+ */
26
+ value: DateRange | (() => DateRange);
27
+ }
28
+ export interface DateRangePickerProps extends PickerShellProps {
29
+ /** The chosen range. Use with `onValueChange` for a controlled picker. */
30
+ value?: DateRange | null;
31
+ defaultValue?: DateRange | null;
32
+ /** Always called with an object. A cleared range is `{ start: null, end: null }`. */
33
+ onValueChange?: (value: DateRange) => void;
34
+ open?: boolean;
35
+ defaultOpen?: boolean;
36
+ onOpenChange?: (open: boolean) => void;
37
+ /** Which month the left calendar opens on when there is no value. */
38
+ defaultMonth?: Date;
39
+ minDate?: Date | null;
40
+ maxDate?: Date | null;
41
+ shouldDisableDate?: (date: Date) => boolean;
42
+ locale?: string;
43
+ weekStartsOn?: NebaWeekday;
44
+ /** @default { dateStyle: 'medium' } */
45
+ format?: Intl.DateTimeFormatOptions;
46
+ /**
47
+ * How many months are on screen at once. Two is the default because a range
48
+ * that crosses a month boundary is the ordinary case, not the exception.
49
+ * @default 2
50
+ */
51
+ monthCount?: 1 | 2;
52
+ /** Shown in each half of the trigger while that end is unchosen. */
53
+ startPlaceholder?: React.ReactNode;
54
+ endPlaceholder?: React.ReactNode;
55
+ /** Shortcuts listed beside the calendars — "Last 7 days", "This month". */
56
+ presets?: readonly DateRangePreset[];
57
+ clearable?: boolean;
58
+ /** Closes the popup once both ends are chosen. @default true */
59
+ closeOnSelect?: boolean;
60
+ labels?: Partial<PickerLabels>;
61
+ /**
62
+ * Identifies the field when a form is submitted. Two hidden inputs of the same
63
+ * name, so the two ends arrive as `FormData.getAll(name)`.
64
+ */
65
+ name?: string;
66
+ }
67
+ /**
68
+ * A span between two days.
69
+ *
70
+ * Two months side by side, because a range that crosses a month boundary is the
71
+ * ordinary case and a one-month picker makes it a two-step navigation problem.
72
+ * The two panels are one calendar in two halves: the left one has no forward
73
+ * stepper, the right one has no back stepper, and either header's month and year
74
+ * buttons move both.
75
+ *
76
+ * The band between the ends is drawn as the pointer moves, before the second
77
+ * click lands. That preview is the whole affordance — without it the first click
78
+ * has no visible consequence and the control looks broken for the second or so
79
+ * between the two.
80
+ */
81
+ export declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1 @@
1
+ import{jsx as e,jsxs as l}from"react/jsx-runtime";import*as n from"react";import{Button as a}from"../button/Button";import{Calendar as t,usePickerLabels as r}from"../../internal/calendar";import{ArrowRightIcon as s,CalendarIcon as o}from"../../internal/icons";import{PickerFooter as i,PickerShell as c}from"../../internal/picker";import{WidthSizer as u}from"../../internal/sizer";import{addMonths as d,compareDay as m,displaySamples as h,formatDate as p,isValidDate as f,localeWeekStart as x,startOfDay as v,startOfMonth as g,toISODate as b,today as w,withPlaceholder as y}from"../../internal/date";import{cx as N,gapClasses as S,metaTextClasses as C}from"../../internal/styles";const D={start:null,end:null};export const DateRangePicker=n.forwardRef(function({value:O,defaultValue:k,onValueChange:z,open:P,defaultOpen:j,onOpenChange:B,defaultMonth:M,minDate:R,maxDate:V,shouldDisableDate:E,locale:I,weekStartsOn:F,format:q={dateStyle:"medium"},monthCount:A=2,startPlaceholder:G,endPlaceholder:H,presets:J,clearable:K=!1,closeOnSelect:L=!0,labels:Q,name:T,size:U="md",color:W="primary",readOnly:X=!1,disabled:Y=!1,startIcon:Z,...$},_){const ee=r(Q),le=F??x(I),[ne,ae]=n.useState(k??D),te=void 0!==O?O??D:ne,re=f(te.start)?te.start:null,se=f(te.end)?te.end:null,[oe,ie]=n.useState(j??!1),ce=P??oe,[ue,de]=n.useState(null),[me,he]=n.useState(null),[pe,fe]=n.useState(()=>g(re??M??w()));n.useEffect(()=>{ce?fe(g(re??M??w())):(de(null),he(null))},[ce]);const xe=e=>{e&&(X||Y)||(void 0===P&&ie(e),B?.(e))},ve=e=>{void 0===O&&ae(e),z?.(e)},ge=ue??re,be=null!==ue?me:se,we=(l,n)=>f(l)?p(l,I,q):e("span",{className:"text-(--neba-muted-fg)",children:n??""}),ye=d(pe,1),Ne=2===A,Se=h(I,q),Ce=null!==ue?ee.end:null===re?ee.start:null,De={size:U,color:W,locale:I,weekStartsOn:le,selected:[re,se,ue],rangeStart:ge,rangeEnd:be,onSelect:e=>{const l=v(e);if(null===ue)return de(l),he(l),void ve({start:l,end:null});const[n,a]=m(l,ue)<0?[l,ue]:[ue,l];de(null),he(null),ve({start:n,end:a}),L&&xe(!1)},onPreviewChange:e=>{null!==ue&&he(e??ue)},minDate:R,maxDate:V,shouldDisableDate:E,showOutsideDays:!1,labels:ee};return e(c,{...$,size:U,color:W,readOnly:X,disabled:Y,triggerRef:_,startIcon:Z??e(o,{}),display:l("span",{className:"flex min-w-0 items-center gap-1.5",children:[l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:we(re,G)}),e(u,{samples:y(Se,G)})]}),e("span",{"aria-hidden":"true",className:"flex shrink-0 items-center text-(--neba-muted-fg) rtl:rotate-180",children:e(s,{})}),l("span",{className:"flex min-w-0 flex-col",children:[e("span",{className:"truncate",children:we(se,H)}),e(u,{samples:y(Se,H)})]})]}),empty:null===re&&null===se,clearable:K,onClear:()=>ve(D),open:ce,onOpenChange:xe,labels:ee,hiddenValues:T?[{name:T,value:re?b(re):""},{name:T,value:se?b(se):""}]:void 0,children:l("div",{className:"flex flex-col gap-1.5",children:[l("div",{className:N("flex items-stretch",S[U]),children:[J&&J.length>0?e("div",{className:N("flex max-h-[calc(var(--n-cell,2rem)*8)] flex-col overflow-y-auto border-e pe-1.5","[border-color:var(--n-line)]"),children:J.map((l,n)=>e(a,{variant:"text",size:U,color:W,density:"compact",className:"justify-start whitespace-nowrap",onClick:()=>(e=>{const l="function"==typeof e.value?e.value():e.value;de(null),he(null),ve(l),f(l.start)&&fe(g(l.start)),L&&xe(!1)})(l),children:l.label},n))}):null,e(t,{...De,month:pe,onMonthChange:fe,showNextButton:!Ne,autoFocus:!0}),Ne?e(t,{...De,month:ye,onMonthChange:e=>fe(d(e,-1)),showPreviousButton:!1}):null]}),K||null!==Ce?l(i,{size:U,children:[null!==Ce?e("span",{className:N("me-auto text-(--neba-muted-fg)",C[U]),children:Ce}):null,K?e(a,{variant:"text",size:U,color:W,density:"compact",onClick:()=>{de(null),he(null),ve(D),xe(!1)},children:ee.clear}):null]}):null]})})});
@@ -0,0 +1,2 @@
1
+ export { DateRangePicker } from './DateRangePicker';
2
+ export type { DateRange, DateRangePickerProps, DateRangePreset } from './DateRangePicker';
@@ -0,0 +1 @@
1
+ export{DateRangePicker}from"./DateRangePicker";
@@ -0,0 +1,68 @@
1
+ import * as React from 'react';
2
+ import { type PickerLabels } from '../../internal/calendar';
3
+ import { type PickerShellProps } from '../../internal/picker';
4
+ import { type TimeUnit } from '../../internal/date';
5
+ import type { NebaWeekday } from '../../types';
6
+ export interface DateTimePickerProps extends PickerShellProps {
7
+ /** The chosen moment. Use with `onValueChange` for a controlled picker. */
8
+ value?: Date | null;
9
+ defaultValue?: Date | null;
10
+ onValueChange?: (value: Date | null) => void;
11
+ open?: boolean;
12
+ defaultOpen?: boolean;
13
+ onOpenChange?: (open: boolean) => void;
14
+ /** Which month the calendar opens on when there is no value. */
15
+ defaultMonth?: Date;
16
+ /**
17
+ * The earliest moment that may be chosen. Unlike DatePicker's, this one is
18
+ * read at full precision: the day it falls on stays available and the clock
19
+ * columns block the hours before it.
20
+ */
21
+ minDate?: Date | null;
22
+ /** The latest moment that may be chosen, likewise at full precision. */
23
+ maxDate?: Date | null;
24
+ shouldDisableDate?: (date: Date) => boolean;
25
+ shouldDisableTime?: (value: Date, unit: TimeUnit) => boolean;
26
+ locale?: string;
27
+ weekStartsOn?: NebaWeekday;
28
+ /**
29
+ * How the trigger writes the chosen moment. Passed straight to `Intl`.
30
+ * @default { dateStyle: 'medium', timeStyle: 'short' }
31
+ */
32
+ format?: Intl.DateTimeFormatOptions;
33
+ /** A 12-hour dial with an AM/PM column. Defaults to whatever the locale does. */
34
+ hour12?: boolean;
35
+ showSeconds?: boolean;
36
+ hourStep?: number;
37
+ minuteStep?: number;
38
+ secondStep?: number;
39
+ placeholder?: React.ReactNode;
40
+ clearable?: boolean;
41
+ /** Offers the shortcut to this moment in the footer. @default true */
42
+ showNowButton?: boolean;
43
+ /**
44
+ * Closes the popup as soon as a day is chosen. `false` here and `true` on
45
+ * DatePicker, because a moment is a day *and* a time and closing on the first
46
+ * of the two would leave the second one unanswered.
47
+ * @default false
48
+ */
49
+ closeOnSelect?: boolean;
50
+ labels?: Partial<PickerLabels>;
51
+ /** Identifies the field when a form is submitted, as `YYYY-MM-DDTHH:MM`. */
52
+ name?: string;
53
+ }
54
+ /**
55
+ * A day and a time, in one popup.
56
+ *
57
+ * Not a DatePicker that grew a clock and not a TimePicker that grew a calendar:
58
+ * the two panels sit side by side at exactly the same height — seven rows of
59
+ * cells each, which is why the calendar's grid and the clock's columns share the
60
+ * `--n-cell` ladder — so the popup is one rectangle rather than two of different
61
+ * sizes pushed together.
62
+ *
63
+ * The bounds do more work here than anywhere else. `minDate` is read at full
64
+ * precision, so a minimum of 09:30 on the 27th leaves the 27th selectable in the
65
+ * calendar and greys out the morning in the clock. That is the behaviour a
66
+ * "not before now" rule needs, and it is the one a day-granular check cannot give.
67
+ */
68
+ export declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<HTMLButtonElement>>;
@@ -0,0 +1 @@
1
+ import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as l from"react";import{Button as o}from"../button/Button";import{Calendar as n,TimeGrid as a,usePickerLabels as s}from"../../internal/calendar";import{CalendarIcon as i}from"../../internal/icons";import{PickerDivider as r,PickerFooter as c,PickerShell as d}from"../../internal/picker";import{displaySamples as m,formatDate as u,isDayOutside as h,isHour12 as p,isValidDate as f,localeWeekStart as S,mergeDateAndTime as b,startOfDay as y,startOfMonth as D,timeUnitSpan as g,toISODateTime as v,today as x,withPlaceholder as C,withTime as w}from"../../internal/date";import{cx as k,gapClasses as z}from"../../internal/styles";export const DateTimePicker=l.forwardRef(function({value:O,defaultValue:T,onValueChange:j,open:N,defaultOpen:V,onOpenChange:B,defaultMonth:I,minDate:M,maxDate:R,shouldDisableDate:E,shouldDisableTime:F,locale:P,weekStartsOn:q,format:A={dateStyle:"medium",timeStyle:"short"},hour12:G,showSeconds:H=!1,hourStep:J=1,minuteStep:K=1,secondStep:L=1,placeholder:Q,clearable:U=!1,showNowButton:W=!0,closeOnSelect:X=!1,labels:Y,name:Z,size:$="md",color:_="primary",density:ee="default",readOnly:te=!1,disabled:le=!1,startIcon:oe,...ne},ae){const se=s(Y),ie=q??S(P),re=G??p(P),[ce,de]=l.useState(T??null),me=void 0!==O?O:ce,[ue,he]=l.useState(V??!1),pe=N??ue,[fe,Se]=l.useState(()=>D(f(me)?me:I??x()));l.useEffect(()=>{pe&&Se(D(f(me)?me:I??x()))},[pe]);const be=e=>{e&&(te||le)||(void 0===N&&he(e),B?.(e))},ye=e=>{void 0===O&&de(e),j?.(e)},De=l.useCallback((e,t)=>{const[l,o]=g(t,e),n=y(e).getTime();return!!(f(M)&&n+1e3*o<M.getTime())||(!!(f(R)&&n+1e3*l>R.getTime())||(F?.(e,t)??!1))},[M,R,F]),ge=new Date,ve=w(ge,{seconds:H?ge.getSeconds():0}),xe=h(ve,M,R)||(E?.(ve)??!1)||De(ve,"second"),Ce=C(m(P,A),Q);return e(d,{...ne,size:$,color:_,density:ee,readOnly:te,disabled:le,triggerRef:ae,startIcon:oe??e(i,{}),display:f(me)?u(me,P,A):Q??"",samples:Ce,empty:!f(me),clearable:U,onClear:()=>ye(null),open:pe,onOpenChange:be,labels:se,hiddenValues:Z?[{name:Z,value:f(me)?v(me,H):""}]:void 0,children:t("div",{className:"flex flex-col gap-1.5",children:[t("div",{className:k("flex items-stretch",z[$]),children:[e(n,{size:$,color:_,locale:P,weekStartsOn:ie,month:fe,onMonthChange:Se,selected:[me],onSelect:e=>{const t=f(me)?b(e,me):y(e);ye(t),Se(D(t)),X&&be(!1)},minDate:M,maxDate:R,shouldDisableDate:E,labels:se,autoFocus:!0}),e(r,{}),e(a,{size:$,density:ee,locale:P,value:f(me)?me:null,referenceDate:f(me)?me:x(),onChange:ye,hour12:re,showSeconds:H,hourStep:J,minuteStep:K,secondStep:L,shouldDisableTime:De,labels:se})]}),t(c,{size:$,children:[U?e(o,{variant:"text",size:$,color:_,density:"compact",onClick:()=>{ye(null),be(!1)},children:se.clear}):null,W?e(o,{variant:"text",size:$,color:_,density:"compact",disabled:xe,onClick:()=>{ye(ve),Se(D(ve))},children:se.now}):null,e(o,{variant:"solid",size:$,color:_,density:"compact",onClick:()=>be(!1),children:se.done})]})]})})});
@@ -0,0 +1,2 @@
1
+ export { DateTimePicker } from './DateTimePicker';
2
+ export type { DateTimePickerProps } from './DateTimePicker';
@@ -0,0 +1 @@
1
+ export{DateTimePicker}from"./DateTimePicker";
@@ -1 +1 @@
1
- import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as l}from"@base-ui/react/dialog";import{boxPaddingXClasses as n,boxPaddingYClasses as i}from"../box/Box";import{CloseIcon as o}from"../../internal/icons";import{hasContent as r,metaTextClasses as t,radiusClasses as s,sheetBodyClasses as d,sheetHeaderGapClasses as c,sheetSectionGapClasses as m,sheetTitleClasses as f,surfaceClasses as u,surfaceSlots as p}from"../../internal/styles";const x={xs:"max-w-80",sm:"max-w-96",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl"},b=[u,"relative flex w-full flex-col overflow-hidden","border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),h=["fixed inset-0 z-50 bg-(--neba-scrim)","[backdrop-filter:blur(2px)]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),g="border-t [border-color:var(--n-line)]";export const DialogClose=l.Close;export function Dialog({size:u="md",color:v="primary",density:y="default",open:w,defaultOpen:j,onOpenChange:$,trigger:_,title:N,description:k,actions:C,dividers:z=!1,showClose:B=!0,closeLabel:D="Close",width:O,fullWidth:P=!0,fullScreen:T=!1,modal:W=!0,dismissible:L=!0,className:R,style:S,children:V}){const q=n[y][u],A=i[y][u],E=z?`${q} ${A}`:q,F=r(N)||r(k),G=r(C);return a(l.Root,{open:w,defaultOpen:j,modal:W,disablePointerDismissal:!L,onOpenChange:(e,a)=>{L||e||"escape-key"!==a.reason?$?.(e):a.cancel()},children:[_?e(l.Trigger,{render:_}):null,a(l.Portal,{children:[e(l.Backdrop,{className:`neba-portal ${h}`}),e(l.Viewport,{className:["neba-portal fixed inset-0 z-50 flex justify-center",T?"items-stretch":"items-center p-4"].join(" "),children:a(l.Popup,{className:[b,d[u],T?"h-full max-w-none rounded-none":`max-h-full ${s[u]} ${void 0===O?x[u]:""}`,T||P?"":"w-auto",z?"":`${A} ${m[u]}`,R??""].filter(Boolean).join(" "),style:{...p(v,3),...void 0===O?null:{maxWidth:"number"==typeof O?`${O}px`:O},...S},children:[F||B?a("div",{className:`flex shrink-0 items-start gap-3 ${E}`,children:[a("div",{className:`flex min-w-0 flex-1 flex-col ${c[u]}`,children:[r(N)?e(l.Title,{className:`font-semibold ${f[u]} m-0`,children:N}):null,r(k)?e(l.Description,{className:`m-0 text-(--neba-muted-fg) ${t[u]}`,children:k}):null]}),B?e(l.Close,{"aria-label":D,className:["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--neba-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","hover:bg-(--n-soft) hover:text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),children:e(o,{})}):null]}):null,r(V)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",E,z&&(F||B)?g:""].filter(Boolean).join(" "),children:V}):null,G?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",E,z?g:""].filter(Boolean).join(" "),children:C}):null]})})]})]})}
1
+ import{jsx as e,jsxs as a}from"react/jsx-runtime";import{Dialog as l}from"@base-ui/react/dialog";import{boxPaddingXClasses as n,boxPaddingYClasses as i}from"../box/Box";import{CloseIcon as o}from"../../internal/icons";import{hasContent as r,metaTextClasses as t,radiusClasses as s,sheetBodyClasses as d,sheetHeaderGapClasses as c,sheetSectionGapClasses as m,sheetTitleClasses as f,surfaceClasses as u,surfaceSlots as p}from"../../internal/styles";const x={xs:"max-w-80",sm:"max-w-96",md:"max-w-lg",lg:"max-w-2xl",xl:"max-w-4xl"},b=[u,"relative flex w-full flex-col overflow-hidden","border text-(--neba-fg) bg-(--n-panel-press)","[border-color:var(--n-line)]","[box-shadow:var(--neba-shadow-3),var(--neba-plate-glass)]","[outline:none]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),h=["fixed inset-0 z-50 bg-(--neba-scrim)","[backdrop-filter:blur(2px)]","[transition:opacity_var(--neba-duration)_var(--neba-ease)]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),g="border-t [border-color:var(--n-line)]";export const DialogClose=l.Close;export function Dialog({size:u="md",color:v="primary",density:y="default",open:w,defaultOpen:j,onOpenChange:$,trigger:_,title:N,description:k,actions:C,dividers:z=!1,showClose:B=!0,closeLabel:D="Close",width:O,fullWidth:P=!0,fullScreen:T=!1,modal:W=!0,dismissible:L=!0,className:R,style:S,children:V}){const q=n[y][u],A=i[y][u],E=z?`${q} ${A}`:q,F=r(N)||r(k),G=r(C);return a(l.Root,{open:w,defaultOpen:j,modal:W,disablePointerDismissal:!L,onOpenChange:(e,a)=>{L||e||"escape-key"!==a.reason?$?.(e):a.cancel()},children:[_?e(l.Trigger,{render:_}):null,a(l.Portal,{children:[e(l.Backdrop,{className:`neba-portal ${h}`}),e(l.Viewport,{className:["neba-portal fixed inset-0 z-50 flex justify-center",T?"items-stretch":"items-center p-4"].join(" "),children:a(l.Popup,{className:[b,d[u],T?"h-full max-w-none rounded-none":`max-h-full ${s[u]} ${void 0===O?x[u]:""}`,T||P?"":"w-auto",z?"":`${A} ${m[u]}`,R??""].filter(Boolean).join(" "),style:{...p(v,3),...void 0===O?null:{maxWidth:"number"==typeof O?`${O}px`:O},...S},children:[F||B?a("div",{className:`flex shrink-0 items-start gap-3 ${E}`,children:[a("div",{className:`flex min-w-0 flex-1 flex-col ${c[u]}`,children:[r(N)?e(l.Title,{className:`font-semibold ${f[u]} m-0`,children:N}):null,r(k)?e(l.Description,{className:`m-0 text-(--neba-muted-fg) ${t[u]}`,children:k}):null]}),B?e(l.Close,{"aria-label":D,className:["flex size-[1.6em] shrink-0 cursor-pointer items-center justify-center","rounded-full text-(--neba-muted-fg)","[&_svg]:size-[1.1em] [&_svg]:shrink-0","[transition:background-color_var(--neba-duration)_var(--neba-ease),color_var(--neba-duration)_var(--neba-ease)]","hover:bg-(--n-soft) hover:text-(--neba-fg)","focus-visible:[outline:2px_solid_var(--n-ring)] focus-visible:outline-offset-2"].join(" "),children:e(o,{})}):null]}):null,r(V)?e("div",{className:["min-h-0 flex-1 overflow-y-auto overscroll-contain",E,z&&(F||B)?g:"",z?"":"py-1 -my-1"].filter(Boolean).join(" "),children:V}):null,G?e("div",{className:["flex shrink-0 flex-wrap items-center justify-end gap-2",E,z?g:""].filter(Boolean).join(" "),children:C}):null]})})]})]})}
@@ -19,6 +19,25 @@ export interface DividerProps extends Omit<React.ComponentPropsWithoutRef<'div'>
19
19
  color?: NebaColor;
20
20
  /** Type scale of the label. Nothing else on a divider has a size. */
21
21
  size?: NebaSize;
22
+ /**
23
+ * How far the rule runs — the width of a horizontal divider, the height of a
24
+ * vertical one. A number is pixels; a string is any CSS length, so `'50%'`
25
+ * and `'12rem'` both work.
26
+ *
27
+ * `length` rather than `width`, because a divider is the one component whose
28
+ * long axis turns with `orientation`: a `width` that meant height half the
29
+ * time would be a worse name than a longer one.
30
+ *
31
+ * Left out, a horizontal divider is the full width of its container and a
32
+ * vertical one stretches to the height of the flex row it is in — which is
33
+ * what a rule between two things should do by default.
34
+ */
35
+ length?: number | string;
36
+ /**
37
+ * How thick the rule is. A number is pixels; a string is any CSS length.
38
+ * @default 1
39
+ */
40
+ thickness?: number | string;
22
41
  /** A label set into the line — "OR" between two sign-in options. */
23
42
  children?: React.ReactNode;
24
43
  /**
@@ -1 +1 @@
1
- import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{Separator as a}from"@base-ui/react/separator";import{metaTextClasses as l}from"../../internal/styles";const n="[border-color:var(--n-line)]",i={horizontal:{start:["w-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","w-4 shrink-0"]},vertical:{start:["h-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","h-4 shrink-0"]}},o={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const Divider=t.forwardRef(function({orientation:t="horizontal",color:s="primary",size:c="md",textAlign:f="center",className:m,style:d,children:h,...p},x){const u="vertical"===t,w={"--n-line":`var(--neba-${s}-line)`};if(!(null!=h&&!1!==h&&""!==h))return e(a,{ref:x,orientation:t,className:[u?"w-0 self-stretch border-l":"h-0 w-full border-t",n,m??""].filter(Boolean).join(" "),style:{...w,...d},...p});const[g,b]=i[t][f],v=u?"w-0 border-l":"h-0 border-t";return r(a,{ref:x,orientation:t,"aria-label":"string"==typeof h?h:void 0,className:["flex items-center",u?"w-auto flex-col self-stretch":"w-full",o[c],m??""].filter(Boolean).join(" "),style:{...w,...d},...p,children:[e("span",{"aria-hidden":"true",className:`${v} ${g} ${n}`}),e("span",{className:["shrink-0 whitespace-nowrap text-(--neba-muted-fg)",l[c],u?"[writing-mode:vertical-rl]":""].filter(Boolean).join(" "),children:h}),e("span",{"aria-hidden":"true",className:`${v} ${b} ${n}`})]})});
1
+ import{jsx as e,jsxs as r}from"react/jsx-runtime";import*as t from"react";import{Separator as n}from"@base-ui/react/separator";import{metaTextClasses as l}from"../../internal/styles";const i="[border-color:var(--n-line)]";function a(e){return"number"==typeof e?`${e}px`:e}const o={horizontal:{start:["w-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","w-4 shrink-0"]},vertical:{start:["h-4 shrink-0","flex-1"],center:["flex-1","flex-1"],end:["flex-1","h-4 shrink-0"]}},s={xs:"gap-1.5",sm:"gap-2",md:"gap-3",lg:"gap-3.5",xl:"gap-4"};export const Divider=t.forwardRef(function({orientation:t="horizontal",color:c="primary",size:d="md",length:f,thickness:h,textAlign:m="center",className:p,style:u,children:x,...w},b){const v="vertical"===t,g=null!=x&&!1!==x&&""!==x,$={"--n-line":`var(--neba-${c}-line)`,"--n-rule":a(h)??"1px"},y=a(f),j={...$,...void 0===y?null:v?{height:y}:{width:y},...u};if(!g)return e(n,{ref:b,orientation:t,className:[v?"w-0 border-l [border-left-width:var(--n-rule)] "+(void 0===y?"self-stretch":""):"h-0 w-full border-t [border-top-width:var(--n-rule)]",i,p??""].filter(Boolean).join(" "),style:j,...w});const[k,N]=o[t][m],z=v?"w-0 border-l [border-left-width:var(--n-rule)]":"h-0 border-t [border-top-width:var(--n-rule)]";return r(n,{ref:b,orientation:t,"aria-label":"string"==typeof x?x:void 0,className:["flex items-center",v?"w-auto flex-col "+(void 0===y?"self-stretch":""):"w-full",s[d],p??""].filter(Boolean).join(" "),style:j,...w,children:[e("span",{"aria-hidden":"true",className:`${z} ${k} ${i}`}),e("span",{className:["shrink-0 whitespace-nowrap text-(--neba-muted-fg)",l[d],v?"[writing-mode:vertical-rl]":""].filter(Boolean).join(" "),children:x}),e("span",{"aria-hidden":"true",className:`${z} ${N} ${i}`})]})});
@@ -0,0 +1,50 @@
1
+ import * as React from 'react';
2
+ import { useRender } from '@base-ui/react/use-render';
3
+ import type { NebaAlignSelf, NebaResponsive } from '../../types';
4
+ export interface GridProps extends React.ComponentPropsWithoutRef<'div'> {
5
+ /**
6
+ * How many of the container's columns the item takes. Read against the
7
+ * container's `columns`, so `span={6}` is a half of the default twelve and a
8
+ * quarter of `columns={24}`.
9
+ *
10
+ * Responsive: `span={{ xs: 12, md: 6, lg: 4 }}` is full width on a phone,
11
+ * half from 48rem and a third from 64rem. Every entry applies from its own
12
+ * breakpoint up, so two of them usually describe a whole layout.
13
+ *
14
+ * A span wider than the row is clamped to the row rather than overflowing.
15
+ * @default the container's full width
16
+ */
17
+ span?: NebaResponsive<number>;
18
+ /**
19
+ * Columns left empty *before* the item — space pushed in ahead of it, not an
20
+ * absolute position in the row. First in a twelve-column row, `offset={4}`
21
+ * with `span={4}` is the middle third; after an item that already took four
22
+ * columns, the same offset skips four more and lands on the last third.
23
+ *
24
+ * Responsive in the same way `span` is.
25
+ * @default 0
26
+ */
27
+ offset?: NebaResponsive<number>;
28
+ /** Overrides the row's `alignItems` for this item alone. */
29
+ alignSelf?: NebaAlignSelf;
30
+ /**
31
+ * Renders something other than a `<div>`: `render={<li />}`,
32
+ * `render={<article />}`. Base UI's own escape hatch.
33
+ */
34
+ render?: useRender.RenderProp;
35
+ children?: React.ReactNode;
36
+ }
37
+ /**
38
+ * One cell of a `GridContainer`.
39
+ *
40
+ * It is a width and nothing else — no surface, no padding, no typography. What
41
+ * goes inside brings its own, which is the whole reason a grid cell and a Box
42
+ * are two components: wrapping something in a layout should not change how it
43
+ * looks, and a cell that drew a sheet would make `span` a visual decision.
44
+ *
45
+ * The column count it divides by is inherited from the container as a custom
46
+ * property, so a `<Grid>` with no `<GridContainer>` above it falls back to
47
+ * twelve rather than breaking — but it will be a plain block in a plain parent,
48
+ * which is not a layout. Always wrap.
49
+ */
50
+ export declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
@@ -0,0 +1 @@
1
+ import*as e from"react";import{useRender as r}from"@base-ui/react/use-render";import{alignSelfClasses as n,offsetValue as o,responsiveSlots as t,spanValue as s}from"../../internal/grid";export const Grid=e.forwardRef(function({span:e,offset:a,alignSelf:i,render:f,className:l,style:c,children:d,...m},p){const u=["neba-grid-item",i?n[i]:"",l??""].filter(Boolean).join(" ");return r({render:f,ref:p,props:{className:u,style:{...t("span",e,s),...t("offset",a,o),...c},children:d,...m}})});
@@ -0,0 +1,2 @@
1
+ export { Grid } from './Grid';
2
+ export type { GridProps } from './Grid';
@@ -0,0 +1 @@
1
+ export{Grid}from"./Grid";