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.
- package/README.md +27 -16
- package/dist/components/avatar/Avatar.d.ts +100 -0
- package/dist/components/avatar/Avatar.js +1 -0
- package/dist/components/avatar/index.d.ts +2 -0
- package/dist/components/avatar/index.js +1 -0
- package/dist/components/blockquote/Blockquote.d.ts +65 -0
- package/dist/components/blockquote/Blockquote.js +1 -0
- package/dist/components/blockquote/index.d.ts +2 -0
- package/dist/components/blockquote/index.js +1 -0
- package/dist/components/breadcrumb/Breadcrumb.d.ts +92 -0
- package/dist/components/breadcrumb/Breadcrumb.js +1 -0
- package/dist/components/breadcrumb/index.d.ts +2 -0
- package/dist/components/breadcrumb/index.js +1 -0
- package/dist/components/carousel/Carousel.d.ts +74 -0
- package/dist/components/carousel/Carousel.js +1 -0
- package/dist/components/carousel/index.d.ts +2 -0
- package/dist/components/carousel/index.js +1 -0
- package/dist/components/chat-bubble/ChatBubble.d.ts +114 -0
- package/dist/components/chat-bubble/ChatBubble.js +1 -0
- package/dist/components/chat-bubble/index.d.ts +2 -0
- package/dist/components/chat-bubble/index.js +1 -0
- package/dist/components/checkbox/Checkbox.js +1 -1
- package/dist/components/combobox/Combobox.js +1 -1
- package/dist/components/container/Container.d.ts +55 -0
- package/dist/components/container/Container.js +1 -0
- package/dist/components/container/index.d.ts +2 -0
- package/dist/components/container/index.js +1 -0
- package/dist/components/date-picker/DatePicker.d.ts +75 -0
- package/dist/components/date-picker/DatePicker.js +1 -0
- package/dist/components/date-picker/index.d.ts +2 -0
- package/dist/components/date-picker/index.js +1 -0
- package/dist/components/date-range-picker/DateRangePicker.d.ts +81 -0
- package/dist/components/date-range-picker/DateRangePicker.js +1 -0
- package/dist/components/date-range-picker/index.d.ts +2 -0
- package/dist/components/date-range-picker/index.js +1 -0
- package/dist/components/date-time-picker/DateTimePicker.d.ts +68 -0
- package/dist/components/date-time-picker/DateTimePicker.js +1 -0
- package/dist/components/date-time-picker/index.d.ts +2 -0
- package/dist/components/date-time-picker/index.js +1 -0
- package/dist/components/dialog/Dialog.js +1 -1
- package/dist/components/divider/Divider.d.ts +19 -0
- package/dist/components/divider/Divider.js +1 -1
- package/dist/components/grid/Grid.d.ts +50 -0
- package/dist/components/grid/Grid.js +1 -0
- package/dist/components/grid/index.d.ts +2 -0
- package/dist/components/grid/index.js +1 -0
- package/dist/components/grid-container/GridContainer.d.ts +79 -0
- package/dist/components/grid-container/GridContainer.js +1 -0
- package/dist/components/grid-container/index.d.ts +2 -0
- package/dist/components/grid-container/index.js +1 -0
- package/dist/components/highlight/Highlight.d.ts +84 -0
- package/dist/components/highlight/Highlight.js +1 -0
- package/dist/components/highlight/index.d.ts +2 -0
- package/dist/components/highlight/index.js +1 -0
- package/dist/components/icon/Icon.d.ts +58 -0
- package/dist/components/icon/Icon.js +1 -0
- package/dist/components/icon/index.d.ts +2 -0
- package/dist/components/icon/index.js +1 -0
- package/dist/components/icon-button/IconButton.d.ts +39 -0
- package/dist/components/icon-button/IconButton.js +1 -0
- package/dist/components/icon-button/index.d.ts +2 -0
- package/dist/components/icon-button/index.js +1 -0
- package/dist/components/otp-field/OtpField.d.ts +85 -0
- package/dist/components/otp-field/OtpField.js +1 -0
- package/dist/components/otp-field/index.d.ts +2 -0
- package/dist/components/otp-field/index.js +1 -0
- package/dist/components/pagination/Pagination.js +1 -1
- package/dist/components/panes/Panes.d.ts +78 -0
- package/dist/components/panes/Panes.js +1 -0
- package/dist/components/panes/index.d.ts +2 -0
- package/dist/components/panes/index.js +1 -0
- package/dist/components/pill/Pill.d.ts +80 -0
- package/dist/components/pill/Pill.js +1 -0
- package/dist/components/pill/index.d.ts +2 -0
- package/dist/components/pill/index.js +1 -0
- package/dist/components/radio-group/RadioGroup.js +1 -1
- package/dist/components/segmented-button/SegmentedButton.d.ts +77 -0
- package/dist/components/segmented-button/SegmentedButton.js +1 -0
- package/dist/components/segmented-button/index.d.ts +2 -0
- package/dist/components/segmented-button/index.js +1 -0
- package/dist/components/select/Select.js +1 -1
- package/dist/components/shortcut/Shortcut.d.ts +60 -0
- package/dist/components/shortcut/Shortcut.js +1 -0
- package/dist/components/shortcut/index.d.ts +2 -0
- package/dist/components/shortcut/index.js +1 -0
- package/dist/components/spoiler/Spoiler.d.ts +95 -0
- package/dist/components/spoiler/Spoiler.js +1 -0
- package/dist/components/spoiler/index.d.ts +2 -0
- package/dist/components/spoiler/index.js +1 -0
- package/dist/components/statistic/Statistic.d.ts +91 -0
- package/dist/components/statistic/Statistic.js +1 -0
- package/dist/components/statistic/index.d.ts +2 -0
- package/dist/components/statistic/index.js +1 -0
- package/dist/components/switch/Switch.js +1 -1
- package/dist/components/text-link/TextLink.d.ts +82 -0
- package/dist/components/text-link/TextLink.js +1 -0
- package/dist/components/text-link/index.d.ts +2 -0
- package/dist/components/text-link/index.js +1 -0
- package/dist/components/time-picker/TimePicker.d.ts +76 -0
- package/dist/components/time-picker/TimePicker.js +1 -0
- package/dist/components/time-picker/index.d.ts +2 -0
- package/dist/components/time-picker/index.js +1 -0
- package/dist/components/timeline/Timeline.d.ts +98 -0
- package/dist/components/timeline/Timeline.js +1 -0
- package/dist/components/timeline/index.d.ts +2 -0
- package/dist/components/timeline/index.js +1 -0
- package/dist/components/toolbar/Toolbar.d.ts +67 -0
- package/dist/components/toolbar/Toolbar.js +1 -0
- package/dist/components/toolbar/index.d.ts +2 -0
- package/dist/components/toolbar/index.js +1 -0
- package/dist/components/tree-view/TreeView.d.ts +115 -0
- package/dist/components/tree-view/TreeView.js +1 -0
- package/dist/components/tree-view/index.d.ts +2 -0
- package/dist/components/tree-view/index.js +1 -0
- package/dist/index.d.ts +26 -0
- package/dist/index.js +1 -1
- package/dist/internal/calendar.d.ts +149 -0
- package/dist/internal/calendar.js +1 -0
- package/dist/internal/date.d.ts +170 -0
- package/dist/internal/date.js +1 -0
- package/dist/internal/grid.d.ts +69 -0
- package/dist/internal/grid.js +1 -0
- package/dist/internal/i18n.d.ts +78 -0
- package/dist/internal/i18n.js +1 -0
- package/dist/internal/icons.d.ts +54 -0
- package/dist/internal/icons.js +1 -1
- package/dist/internal/picker.d.ts +111 -0
- package/dist/internal/picker.js +1 -0
- package/dist/internal/sizer.d.ts +33 -0
- package/dist/internal/sizer.js +1 -0
- package/dist/internal/styles.d.ts +33 -0
- package/dist/internal/styles.js +1 -1
- package/dist/styles.css +2 -758
- package/dist/tailwind.css +1017 -0
- package/dist/types.d.ts +65 -0
- 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 @@
|
|
|
1
|
+
export{ChatBubble}from"./ChatBubble";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as
|
|
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
|
|
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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
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
|
|
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 @@
|
|
|
1
|
+
export{Grid}from"./Grid";
|