forlogic-core 1.16.3 → 1.16.5
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 +113 -109
- package/dist/README.md +113 -109
- package/dist/components/modules/AccessDeniedDialog.d.ts +41 -0
- package/dist/components/modules/ModuleAccessGuard.d.ts +3 -1
- package/dist/components/modules/ModuleOfferContent.d.ts +20 -0
- package/dist/components/modules/ModulesContent.d.ts +15 -0
- package/dist/components/modules/ModulesFooterCards.d.ts +6 -0
- package/dist/components/modules/index.d.ts +8 -0
- package/dist/components/modules/types.d.ts +2 -0
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.js +1 -1
- package/docs/DESIGN_SYSTEM.md +17 -32
- package/package.json +4 -2
- package/dist/assets/AccordionDoc-BnfxyOi9.js +0 -31
- package/dist/assets/ActionButtonDoc-b4F_J8gn.js +0 -47
- package/dist/assets/AlertDoc-PkiHguSJ.js +0 -37
- package/dist/assets/AppHeaderDoc-CsFMZGV0.js +0 -67
- package/dist/assets/AppSidebarDoc-Bg71N-zq.js +0 -196
- package/dist/assets/AuthDoc-DDm57y_J.js +0 -192
- package/dist/assets/AvatarDoc-C6wiZIZR.js +0 -11
- package/dist/assets/BadgeDoc-Bsg7cfm0.js +0 -36
- package/dist/assets/BaseFormDoc-DeIlV273.js +0 -169
- package/dist/assets/BodyContentDoc-Q3DGvyN9.js +0 -83
- package/dist/assets/BreadcrumbDoc-ChsVFjMF.js +0 -75
- package/dist/assets/ButtonDoc-C7Q31Bh3.js +0 -41
- package/dist/assets/ButtonGroupDoc-Bn5vhjBq.js +0 -7
- package/dist/assets/CalendarDoc-iVjNyxyr.js +0 -81
- package/dist/assets/CardDoc-D511dll7.js +0 -49
- package/dist/assets/ChartDoc-CQyYOEHL.js +0 -111
- package/dist/assets/CheckboxDoc-Cjsy4XAq.js +0 -55
- package/dist/assets/ColorPickerDoc-hnYJUWpF.js +0 -10
- package/dist/assets/ColorsFoundationDoc-B8Z4tAyZ.js +0 -13
- package/dist/assets/ComboTreeDoc-ChEbW4a3.js +0 -21
- package/dist/assets/ComboboxDoc-CHWeGE_F.js +0 -134
- package/dist/assets/ComponentDocTemplate-BtOCnlM2.js +0 -1
- package/dist/assets/ContextMenuDoc-C3mFO_Yx.js +0 -182
- package/dist/assets/ContextsDoc-ChEbQxom.js +0 -184
- package/dist/assets/CreateCrudPageDoc-C9tXisCF.js +0 -106
- package/dist/assets/CrudActionBarDoc-Cp1L4gpO.js +0 -112
- package/dist/assets/CrudGridDoc-D-kSFBAQ.js +0 -85
- package/dist/assets/CrudOverviewDoc-CeLBwg-B.js +0 -14
- package/dist/assets/CrudPrimitivesDoc-B2u1vZog.js +0 -164
- package/dist/assets/CrudTableDoc-CvV-II_X.js +0 -95
- package/dist/assets/DataListDoc-BLRii0jB.js +0 -13
- package/dist/assets/DesignSystemHome-TE0Ubaup.js +0 -1
- package/dist/assets/DialogDoc--LC5Jvat.js +0 -981
- package/dist/assets/DropdownMenuDoc-oPlEriRY.js +0 -175
- package/dist/assets/EmptyStateDoc-rNqfWKok.js +0 -35
- package/dist/assets/EnvironmentsDoc-CT7l5s2u.js +0 -96
- package/dist/assets/ErrorBoundaryDoc-rPHOUygA.js +0 -111
- package/dist/assets/ExampleCard-DfuMYM6E.js +0 -1
- package/dist/assets/FormDoc-B0L_QaCT.js +0 -81
- package/dist/assets/FoundationOverview-Dbb8rBsU.js +0 -1
- package/dist/assets/GridDoc-ifcGA2Yw.js +0 -28
- package/dist/assets/HooksDoc-CUOT_3Du.js +0 -665
- package/dist/assets/HoverCardDoc-CdTU2QkI.js +0 -31
- package/dist/assets/I18nDoc-CMEvFqsz.js +0 -232
- package/dist/assets/IconPickerDoc-DF9hEwnJ.js +0 -10
- package/dist/assets/IconsFoundationDoc-D4Y0wKbm.js +0 -33
- package/dist/assets/InputDoc-d_IL4dsq.js +0 -211
- package/dist/assets/LabelDoc-Dr64ISiJ.js +0 -42
- package/dist/assets/LeadershipDoc-BnrTuaeV.js +0 -416
- package/dist/assets/MediaDoc-CLuVprAr.js +0 -459
- package/dist/assets/MenubarDoc-CW7L4QJ4.js +0 -165
- package/dist/assets/ModulesDialogDoc-CUb_g4X-.js +0 -71
- package/dist/assets/NavigationMenuDoc-Csc0U6bV.js +0 -116
- package/dist/assets/OnboardingDialogDoc-3RtjNH1O.js +0 -55
- package/dist/assets/PaginationDoc-BGurD4xQ.js +0 -27
- package/dist/assets/PaginationDoc-DqFyou6O.js +0 -98
- package/dist/assets/PlacesDoc-Dyx8gsqb.js +0 -226
- package/dist/assets/PopoverDoc-DHF-ItUX.js +0 -64
- package/dist/assets/ProgressDoc-DXKV-fkI.js +0 -29
- package/dist/assets/QualiexUserFieldDoc-BbP7w-Pu.js +0 -149
- package/dist/assets/RadioGroupDoc-D845uweM.js +0 -57
- package/dist/assets/RadiusDoc-vN4tTsay.js +0 -7
- package/dist/assets/RequiredFieldsCounterDoc-TzR9r-U9.js +0 -58
- package/dist/assets/ResizableDoc-Bkfz_25O.js +0 -104
- package/dist/assets/RichTextEditorDoc-BUQrg7M8.js +0 -24
- package/dist/assets/ScrollAreaDoc-B6ODYHMX.js +0 -28
- package/dist/assets/SecurityDoc-Chbt6w1s.js +0 -204
- package/dist/assets/SelectDoc-BhcpBIAO.js +0 -80
- package/dist/assets/SeparatorDoc-C3fhatb0.js +0 -4
- package/dist/assets/ServicesDoc-_uao-HA_.js +0 -308
- package/dist/assets/ShadowsDoc-DpkO_TZQ.js +0 -9
- package/dist/assets/SignDoc-BJtnoT6I.js +0 -66
- package/dist/assets/SkeletonDoc-BZS07PJh.js +0 -54
- package/dist/assets/SliderDoc-D2ApV3XT.js +0 -41
- package/dist/assets/SpacingDoc-PNrU24B2.js +0 -12
- package/dist/assets/SplitButtonDoc-D5tUF2Ja.js +0 -53
- package/dist/assets/StepSelectorDoc-Cj0ALYar.js +0 -41
- package/dist/assets/SwitchDoc-DtsT8oh_.js +0 -56
- package/dist/assets/TableDoc-BC-jQnXu.js +0 -128
- package/dist/assets/TableOfContents-DBMJMbI4.js +0 -1
- package/dist/assets/TabsDoc-DtXJ0xY5.js +0 -42
- package/dist/assets/TextareaDoc-nuW5tqBQ.js +0 -46
- package/dist/assets/ToastDoc-D1aX5zda.js +0 -157
- package/dist/assets/ToggleDoc-ILass4CS.js +0 -51
- package/dist/assets/TooltipDoc-lPbdWe_9.js +0 -58
- package/dist/assets/TruncatedCellDoc-DOAzbF2F.js +0 -12
- package/dist/assets/TypographyFoundationDoc-3ZD-rQZw.js +0 -7
- package/dist/assets/UtilitiesDoc-D7lkYhuz.js +0 -145
- package/dist/assets/blocks-Jy49RoqJ.js +0 -1
- package/dist/assets/calendar-days-Cvf2zLJl.js +0 -1
- package/dist/assets/circle-plus-MnG9kjyq.js +0 -1
- package/dist/assets/circle-x-B9ouupla.js +0 -1
- package/dist/assets/crown-BweN5jpI.js +0 -1
- package/dist/assets/date-picker-ttyYeYvC.js +0 -1
- package/dist/assets/disabled-menu-item-WlpPOqxg.js +0 -1
- package/dist/assets/drawer-DvU6_eK5.js +0 -3
- package/dist/assets/file-pen-line-C0VV-QjF.js +0 -1
- package/dist/assets/git-branch-DCjGGwvF.js +0 -1
- package/dist/assets/globe-BdFDFP_k.js +0 -1
- package/dist/assets/grip-vertical-CgXp0oI-.js +0 -1
- package/dist/assets/hash-BAYi_wfk.js +0 -1
- package/dist/assets/index-BtX5DZqb.js +0 -310
- package/dist/assets/index-C1So5Sai.css +0 -1
- package/dist/assets/life-buoy-BydIgTyJ.js +0 -1
- package/dist/assets/lucide-react-ZIMhRYmb.js +0 -1
- package/dist/assets/monitor-B6txWJPg.js +0 -1
- package/dist/assets/package-DNe3FsCh.js +0 -1
- package/dist/assets/pen-CzTmQ16z.js +0 -1
- package/dist/assets/pin-CJJgLEBz.js +0 -1
- package/dist/assets/radio-group-Btv_BY60.js +0 -1
- package/dist/assets/server-XQDXtrjm.js +0 -1
- package/dist/assets/share-2-Dz_89MJb.js +0 -1
- package/dist/assets/step-selector-D0_Y1dow.js +0 -1
- package/dist/assets/text-align-start-WsHo7CNJ.js +0 -1
- package/dist/assets/trash-CeK-mWnM.js +0 -1
- package/dist/assets/useMockCrud-RV9z9n5x.js +0 -1
- package/dist/assets/user-check-CrbWcnPN.js +0 -1
- package/dist/assets/user-plus-Dce9DbqQ.js +0 -1
- package/dist/index.html +0 -35
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import{j as e,L as a}from"./index-BtX5DZqb.js";import{C as d}from"./ComponentDocTemplate-BtOCnlM2.js";import{R as l,a as s}from"./radio-group-Btv_BY60.js";import"./ExampleCard-DfuMYM6E.js";import"./TableOfContents-DBMJMbI4.js";function m(){return e.jsx(d,{title:"Radio Group",description:"Um conjunto de botões marcáveis—conhecidos como botões de rádio—onde apenas um pode ser marcado por vez.",component:e.jsxs(l,{defaultValue:"option-one",children:[e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(s,{value:"option-one",id:"option-one"}),e.jsx(a,{htmlFor:"option-one",children:"Option One"})]}),e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(s,{value:"option-two",id:"option-two"}),e.jsx(a,{htmlFor:"option-two",children:"Option Two"})]})]}),usage:`import { RadioGroup, RadioGroupItem } from "forlogic-core"
|
|
2
|
-
|
|
3
|
-
<RadioGroup defaultValue="option-one">
|
|
4
|
-
<div className="flex items-center space-x-2">
|
|
5
|
-
<RadioGroupItem value="option-one" id="r1" />
|
|
6
|
-
<Label htmlFor="r1">Option One</Label>
|
|
7
|
-
</div>
|
|
8
|
-
<div className="flex items-center space-x-2">
|
|
9
|
-
<RadioGroupItem value="option-two" id="r2" />
|
|
10
|
-
<Label htmlFor="r2">Option Two</Label>
|
|
11
|
-
</div>
|
|
12
|
-
</RadioGroup>`,examples:[{title:"Básico",preview:e.jsxs(l,{defaultValue:"comfortable",children:[e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(s,{value:"default",id:"r1"}),e.jsx(a,{htmlFor:"r1",children:"Default"})]}),e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(s,{value:"comfortable",id:"r2"}),e.jsx(a,{htmlFor:"r2",children:"Comfortable"})]}),e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(s,{value:"compact",id:"r3"}),e.jsx(a,{htmlFor:"r3",children:"Compact"})]})]}),code:`<RadioGroup defaultValue="comfortable">
|
|
13
|
-
<div className="flex items-center space-x-2">
|
|
14
|
-
<RadioGroupItem value="default" id="r1" />
|
|
15
|
-
<Label htmlFor="r1">Default</Label>
|
|
16
|
-
</div>
|
|
17
|
-
<div className="flex items-center space-x-2">
|
|
18
|
-
<RadioGroupItem value="comfortable" id="r2" />
|
|
19
|
-
<Label htmlFor="r2">Comfortable</Label>
|
|
20
|
-
</div>
|
|
21
|
-
<div className="flex items-center space-x-2">
|
|
22
|
-
<RadioGroupItem value="compact" id="r3" />
|
|
23
|
-
<Label htmlFor="r3">Compact</Label>
|
|
24
|
-
</div>
|
|
25
|
-
</RadioGroup>`},{title:"Com Descrições",preview:e.jsxs(l,{defaultValue:"card",className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(s,{value:"card",id:"card"}),e.jsxs("div",{className:"space-y-0.5",children:[e.jsx(a,{htmlFor:"card",children:"Cartão de Crédito"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Pague com cartão de crédito"})]})]}),e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(s,{value:"paypal",id:"paypal"}),e.jsxs("div",{className:"space-y-0.5",children:[e.jsx(a,{htmlFor:"paypal",children:"PayPal"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Pague com sua conta PayPal"})]})]}),e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(s,{value:"bank",id:"bank"}),e.jsxs("div",{className:"space-y-0.5",children:[e.jsx(a,{htmlFor:"bank",children:"Transferência Bancária"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Pague diretamente da sua conta"})]})]})]}),code:`<RadioGroup defaultValue="card">
|
|
26
|
-
<div className="flex items-center space-x-2">
|
|
27
|
-
<RadioGroupItem value="card" id="card" />
|
|
28
|
-
<div className="space-y-0.5">
|
|
29
|
-
<Label htmlFor="card">Cartão de Crédito</Label>
|
|
30
|
-
<p className="text-sm text-muted-foreground">
|
|
31
|
-
Pague com cartão de crédito
|
|
32
|
-
</p>
|
|
33
|
-
</div>
|
|
34
|
-
</div>
|
|
35
|
-
</RadioGroup>`},{title:"Estados",preview:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(l,{defaultValue:"enabled",children:[e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(s,{value:"enabled",id:"enabled"}),e.jsx(a,{htmlFor:"enabled",children:"Habilitado"})]}),e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(s,{value:"enabled2",id:"enabled2"}),e.jsx(a,{htmlFor:"enabled2",children:"Habilitado (não selecionado)"})]})]}),e.jsxs(l,{disabled:!0,defaultValue:"disabled1",children:[e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(s,{value:"disabled1",id:"disabled1"}),e.jsx(a,{htmlFor:"disabled1",className:"text-muted-foreground",children:"Desabilitado (selecionado)"})]}),e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx(s,{value:"disabled2",id:"disabled2"}),e.jsx(a,{htmlFor:"disabled2",className:"text-muted-foreground",children:"Desabilitado"})]})]})]}),code:`<RadioGroup defaultValue="enabled">
|
|
36
|
-
<div className="flex items-center space-x-2">
|
|
37
|
-
<RadioGroupItem value="enabled" id="enabled" />
|
|
38
|
-
<Label htmlFor="enabled">Habilitado</Label>
|
|
39
|
-
</div>
|
|
40
|
-
</RadioGroup>
|
|
41
|
-
|
|
42
|
-
<RadioGroup disabled defaultValue="disabled1">
|
|
43
|
-
<div className="flex items-center space-x-2">
|
|
44
|
-
<RadioGroupItem value="disabled1" id="disabled1" />
|
|
45
|
-
<Label htmlFor="disabled1">Desabilitado</Label>
|
|
46
|
-
</div>
|
|
47
|
-
</RadioGroup>`},{title:"Casos de Uso - Plano de Assinatura",preview:e.jsxs(l,{defaultValue:"pro",className:"space-y-3",children:[e.jsxs("div",{className:"flex items-start space-x-2",children:[e.jsx(s,{value:"free",id:"free",className:"mt-1"}),e.jsxs("div",{className:"space-y-1",children:[e.jsx(a,{htmlFor:"free",className:"font-semibold",children:"Free"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"R$ 0/mês - Ideal para começar"}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"✓ 5 projetos • ✓ 1GB storage • ✓ Suporte por email"})]})]}),e.jsxs("div",{className:"flex items-start space-x-2",children:[e.jsx(s,{value:"pro",id:"pro",className:"mt-1"}),e.jsxs("div",{className:"space-y-1",children:[e.jsx(a,{htmlFor:"pro",className:"font-semibold",children:"Pro"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"R$ 29/mês - Para times pequenos"}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"✓ Projetos ilimitados • ✓ 50GB storage • ✓ Suporte prioritário"})]})]}),e.jsxs("div",{className:"flex items-start space-x-2",children:[e.jsx(s,{value:"enterprise",id:"enterprise",className:"mt-1"}),e.jsxs("div",{className:"space-y-1",children:[e.jsx(a,{htmlFor:"enterprise",className:"font-semibold",children:"Enterprise"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"R$ 99/mês - Para empresas"}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"✓ Tudo do Pro • ✓ 500GB storage • ✓ Suporte 24/7 • ✓ SLA"})]})]})]}),code:`<RadioGroup defaultValue="pro">
|
|
48
|
-
<div className="flex items-start space-x-2">
|
|
49
|
-
<RadioGroupItem value="free" id="free" />
|
|
50
|
-
<div className="space-y-1">
|
|
51
|
-
<Label htmlFor="free">Free</Label>
|
|
52
|
-
<p className="text-sm text-muted-foreground">
|
|
53
|
-
R$ 0/mês - Ideal para começar
|
|
54
|
-
</p>
|
|
55
|
-
</div>
|
|
56
|
-
</div>
|
|
57
|
-
</RadioGroup>`}],props:[{name:"defaultValue",type:"string",default:"-",description:"O valor selecionado padrão."},{name:"value",type:"string",default:"-",description:"O valor selecionado controlado."},{name:"onValueChange",type:"(value: string) => void",default:"-",description:"Manipulador de evento quando o valor muda."},{name:"disabled",type:"boolean",default:"false",description:"Se o grupo de rádio está desabilitado."}],accessibility:["Navegação completa por teclado","Teclas de seta para selecionar opções","Segue o padrão de grupo de rádio WAI-ARIA","Gerenciamento adequado de foco"]})}export{m as RadioGroupDoc};
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import{j as e,C as d,a as r,b as a,c as l,d as n}from"./index-BtX5DZqb.js";function t(){const c=[{name:"none",value:"0px",class:"rounded-none"},{name:"sm",value:"2px",class:"rounded-sm"},{name:"default",value:"4px",class:"rounded"},{name:"md",value:"6px",class:"rounded-md"},{name:"lg",value:"8px",class:"rounded-lg"},{name:"xl",value:"12px",class:"rounded-xl"},{name:"2xl",value:"16px",class:"rounded-2xl"},{name:"3xl",value:"24px",class:"rounded-3xl"},{name:"full",value:"9999px",class:"rounded-full"}];return e.jsxs("div",{className:"space-y-8",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx("h1",{className:"text-4xl font-bold tracking-tight",children:"Sistema de Raio de Borda"}),e.jsx("p",{className:"text-lg text-muted-foreground",children:"Arredondamento de cantos consistente que cria harmonia visual e define a personalidade da interface."})]}),e.jsxs(d,{children:[e.jsxs(r,{children:[e.jsx(a,{children:"Escala de Raio de Borda"}),e.jsx(l,{children:"De cantos retos (0px) a totalmente arredondados (9999px)"})]}),e.jsx(n,{className:"space-y-6",children:c.map(s=>e.jsxs("div",{className:"space-y-2",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("code",{className:"text-sm font-mono text-muted-foreground w-20",children:s.name}),e.jsx("span",{className:"text-sm text-muted-foreground",children:s.value})]}),e.jsx("code",{className:"text-xs text-muted-foreground",children:s.class})]}),e.jsx("div",{className:`h-24 bg-primary ${s.class} flex items-center justify-center`,children:e.jsx("span",{className:"text-primary-foreground text-sm font-medium",children:s.name})})]},s.name))})]}),e.jsxs(d,{children:[e.jsx(r,{children:e.jsx(a,{children:"Padrões de Uso Comuns"})}),e.jsxs(n,{className:"space-y-6",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx("h3",{className:"text-sm font-semibold",children:"Botões"}),e.jsxs("p",{className:"text-xs text-muted-foreground mb-3",children:["Raio padrão de botão: ",e.jsx("code",{children:"rounded-md"})," (6px)"]}),e.jsxs("div",{className:"flex gap-3 flex-wrap",children:[e.jsx("button",{className:"px-4 py-2 bg-primary text-primary-foreground rounded-md",children:"Botão Padrão"}),e.jsx("button",{className:"px-4 py-2 bg-secondary text-secondary-foreground rounded-md",children:"Secundário"}),e.jsx("button",{className:"px-4 py-2 border border-input rounded-md",children:"Contorno"})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("h3",{className:"text-sm font-semibold",children:"Cards"}),e.jsxs("p",{className:"text-xs text-muted-foreground mb-3",children:["Standard card radius: ",e.jsx("code",{children:"rounded-lg"})," (8px)"]}),e.jsxs("div",{className:"p-6 bg-card border rounded-lg shadow-sm",children:[e.jsx("h4",{className:"font-semibold mb-2",children:"Título do Card"}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Cards usam rounded-lg para uma sensação moderna e acessível."})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("h3",{className:"text-sm font-semibold",children:"Inputs"}),e.jsxs("p",{className:"text-xs text-muted-foreground mb-3",children:["Raio padrão de input: ",e.jsx("code",{children:"rounded-md"})," (6px)"]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx("input",{type:"text",placeholder:"Campo de texto",className:"w-full px-3 py-2 border border-input rounded-md bg-background"}),e.jsx("input",{type:"email",placeholder:"Campo de email",className:"w-full px-3 py-2 border border-input rounded-md bg-background"})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("h3",{className:"text-sm font-semibold",children:"Avatares & Ícones"}),e.jsxs("p",{className:"text-xs text-muted-foreground mb-3",children:["Círculo completo: ",e.jsx("code",{children:"rounded-full"})]}),e.jsxs("div",{className:"flex gap-3 items-center",children:[e.jsx("div",{className:"h-12 w-12 bg-primary rounded-full flex items-center justify-center text-primary-foreground font-semibold",children:"AB"}),e.jsx("div",{className:"h-12 w-12 bg-secondary rounded-full flex items-center justify-center text-secondary-foreground font-semibold",children:"CD"}),e.jsx("div",{className:"h-12 w-12 bg-accent rounded-full flex items-center justify-center text-accent-foreground font-semibold",children:"EF"})]})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("h3",{className:"text-sm font-semibold",children:"Badges & Tags"}),e.jsxs("p",{className:"text-xs text-muted-foreground mb-3",children:["Forma de pílula: ",e.jsx("code",{children:"rounded-full"})]}),e.jsxs("div",{className:"flex gap-2 flex-wrap",children:[e.jsx("span",{className:"px-3 py-1 bg-primary text-primary-foreground text-xs font-medium rounded-full",children:"Primário"}),e.jsx("span",{className:"px-3 py-1 bg-secondary text-secondary-foreground text-xs font-medium rounded-full",children:"Secundário"}),e.jsx("span",{className:"px-3 py-1 bg-success text-success-foreground text-xs font-medium rounded-full",children:"Sucesso"})]})]})]})]}),e.jsxs(d,{children:[e.jsxs(r,{children:[e.jsx(a,{children:"Raio de Borda Direcional"}),e.jsx(l,{children:"Aplicar raio em cantos específicos"})]}),e.jsx(n,{className:"space-y-4",children:e.jsxs("div",{className:"grid grid-cols-2 md:grid-cols-4 gap-4",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx("p",{className:"text-xs text-muted-foreground",children:"Topo"}),e.jsx("div",{className:"h-24 bg-primary rounded-t-lg flex items-center justify-center",children:e.jsx("span",{className:"text-primary-foreground text-xs",children:"rounded-t-lg"})})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("p",{className:"text-xs text-muted-foreground",children:"Baixo"}),e.jsx("div",{className:"h-24 bg-primary rounded-b-lg flex items-center justify-center",children:e.jsx("span",{className:"text-primary-foreground text-xs",children:"rounded-b-lg"})})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("p",{className:"text-xs text-muted-foreground",children:"Esquerda"}),e.jsx("div",{className:"h-24 bg-primary rounded-l-lg flex items-center justify-center",children:e.jsx("span",{className:"text-primary-foreground text-xs",children:"rounded-l-lg"})})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("p",{className:"text-xs text-muted-foreground",children:"Direita"}),e.jsx("div",{className:"h-24 bg-primary rounded-r-lg flex items-center justify-center",children:e.jsx("span",{className:"text-primary-foreground text-xs",children:"rounded-r-lg"})})]})]})})]}),e.jsxs(d,{children:[e.jsx(r,{children:e.jsx(a,{children:"Diretrizes de Raio de Borda"})}),e.jsxs(n,{className:"prose prose-slate dark:prose-invert max-w-none",children:[e.jsx("h3",{children:"Princípios de Design"}),e.jsxs("ul",{children:[e.jsxs("li",{children:[e.jsx("strong",{children:"Consistência"}),": Use o mesmo raio para tipos de componentes similares"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Hierarquia"}),": Componentes maiores podem usar valores de raio maiores"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Contexto"}),": Combine o raio com a função e importância do componente"]}),e.jsxs("li",{children:[e.jsx("strong",{children:"Harmonia"}),": Garanta que as escolhas de raio funcionem juntas na interface"]})]}),e.jsx("h3",{children:"Recomendações por Componente"}),e.jsxs("table",{className:"min-w-full",children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{className:"text-left",children:"Componente"}),e.jsx("th",{className:"text-left",children:"Raio"})]})}),e.jsxs("tbody",{children:[e.jsxs("tr",{children:[e.jsx("td",{children:"Botões"}),e.jsx("td",{children:e.jsx("code",{children:"rounded-md"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"Cards"}),e.jsx("td",{children:e.jsx("code",{children:"rounded-lg"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"Inputs"}),e.jsx("td",{children:e.jsx("code",{children:"rounded-md"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"Modais"}),e.jsx("td",{children:e.jsx("code",{children:"rounded-lg"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"Badges"}),e.jsx("td",{children:e.jsx("code",{children:"rounded-full"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"Avatares"}),e.jsx("td",{children:e.jsx("code",{children:"rounded-full"})})]}),e.jsxs("tr",{children:[e.jsx("td",{children:"Tooltips"}),e.jsx("td",{children:e.jsx("code",{children:"rounded-md"})})]})]})]}),e.jsx("h3",{children:"Melhores Práticas"}),e.jsxs("ul",{children:[e.jsxs("li",{children:["Use ",e.jsx("code",{children:"rounded-none"})," com moderação - cantos retos podem parecer ásperos"]}),e.jsx("li",{children:"Combine raio de borda com tamanho do componente (maior = mais raio)"}),e.jsxs("li",{children:["Use ",e.jsx("code",{children:"rounded-full"})," para elementos circulares (avatares, botões de ícone)"]}),e.jsx("li",{children:"Mantenha valores de raio consistentes dentro de famílias de componentes"}),e.jsx("li",{children:"Teste como o raio aparece em diferentes tamanhos de tela"})]}),e.jsx("h4",{className:"font-semibold mb-3 mt-6",children:"Exemplos de Código"}),e.jsxs("div",{className:"space-y-4 not-prose",children:[e.jsxs("div",{children:[e.jsx("div",{className:"text-sm font-medium mb-2 text-green-600 dark:text-green-400",children:"✅ Correto"}),e.jsx("pre",{className:"bg-muted p-3 rounded-md text-xs overflow-x-auto",children:e.jsx("code",{children:`<Button className="rounded-md">Enviar</Button>
|
|
2
|
-
<Card className="rounded-lg">...</Card>
|
|
3
|
-
|
|
4
|
-
// Raio direcional para elementos conectados
|
|
5
|
-
<div className="rounded-t-lg">Cabeçalho</div>
|
|
6
|
-
<div className="rounded-b-lg">Rodapé</div>`})})]}),e.jsxs("div",{children:[e.jsx("div",{className:"text-sm font-medium mb-2 text-red-600 dark:text-red-400",children:"❌ Incorreto"}),e.jsx("pre",{className:"bg-muted p-3 rounded-md text-xs overflow-x-auto",children:e.jsx("code",{children:`<Button className="rounded-3xl">Enviar</Button>
|
|
7
|
-
<Card className="rounded-none">...</Card>`})})]})]})]})]})]})}export{t as RadiusDoc};
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import{j as e,ah as q,l as d,aL as y,cS as j,cT as C,cU as b,cV as N,r as x,L as f,I as g}from"./index-BtX5DZqb.js";import{C as w}from"./ComponentDocTemplate-BtOCnlM2.js";import"./ExampleCard-DfuMYM6E.js";import"./TableOfContents-DBMJMbI4.js";function o({filled:l,total:a,missingFields:i,size:c="sm",className:n,completeText:m="Campos obrigatórios preenchidos",incompleteText:r}){const t=l===a&&a>0,p={sm:{text:"text-xs",icon:"h-3.5 w-3.5",gap:"gap-1.5"},md:{text:"text-sm",icon:"h-4 w-4",gap:"gap-2"},lg:{text:"text-base",icon:"h-5 w-5",gap:"gap-2.5"}},{text:s,icon:h,gap:F}=p[c],T=`${l}/${a} campos obrigatórios`,R=r?.replace("{filled}",String(l)).replace("{total}",String(a))??T,u=e.jsxs("div",{className:d("flex items-center transition-all duration-300",F,s,t?"text-success":"text-muted-foreground",i&&i.length>0&&"cursor-help",n),children:[t?e.jsx(q,{className:d(h,"animate-success-pop")}):e.jsx(y,{className:d(h,"transition-transform")}),e.jsx("span",{className:d("transition-all duration-300",t&&"font-medium"),children:t?m:R})]});return t?e.jsx(j,{children:e.jsxs(C,{children:[e.jsx(b,{asChild:!0,children:u}),e.jsx(N,{side:"top",children:e.jsx("span",{className:"text-xs",children:"Todos os campos obrigatórios preenchidos ✓"})})]})}):i&&i.length>0?e.jsx(j,{children:e.jsxs(C,{children:[e.jsx(b,{asChild:!0,children:u}),e.jsx(N,{side:"top",className:"max-w-[250px]",children:e.jsxs("div",{className:"text-xs",children:[e.jsx("p",{className:"font-medium mb-1",children:"Campos faltantes:"}),e.jsx("ul",{className:"list-disc list-inside space-y-0.5",children:i.map(v=>e.jsx("li",{children:v},v))})]})})]})}):u}function z(){const[l,a]=x.useState(""),[i,c]=x.useState(""),[n,m]=x.useState(""),r=[{label:"Nome",value:l},{label:"Email",value:i},{label:"Telefone",value:n}],t=r.filter(s=>s.value.trim()!=="").length,p=r.filter(s=>s.value.trim()==="").map(s=>s.label);return e.jsxs("div",{className:"space-y-4 w-full max-w-sm",children:[e.jsx(o,{filled:t,total:3,missingFields:p,size:"md"}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(f,{children:"Nome *"}),e.jsx(g,{value:l,onChange:s=>a(s.target.value),placeholder:"Digite seu nome"})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(f,{children:"Email *"}),e.jsx(g,{value:i,onChange:s=>c(s.target.value),placeholder:"Digite seu email"})]}),e.jsxs("div",{className:"space-y-1.5",children:[e.jsx(f,{children:"Telefone *"}),e.jsx(g,{value:n,onChange:s=>m(s.target.value),placeholder:"Digite seu telefone"})]})]})]})}function P(){return e.jsx(w,{title:"RequiredFieldsCounter",description:"Indica o progresso de preenchimento de campos obrigatórios em formulários com feedback visual e tooltips informativos.",installation:'import { RequiredFieldsCounter } from "@/design-system/components/RequiredFieldsCounter"',component:e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsx(o,{filled:2,total:5}),e.jsx(o,{filled:5,total:5})]}),usage:`import { RequiredFieldsCounter } from "@/design-system/components/RequiredFieldsCounter"
|
|
2
|
-
|
|
3
|
-
// Progresso parcial
|
|
4
|
-
<RequiredFieldsCounter filled={2} total={5} />
|
|
5
|
-
|
|
6
|
-
// Formulário completo
|
|
7
|
-
<RequiredFieldsCounter filled={5} total={5} />`,examples:[{title:"Estado Básico",description:"Mostra o progresso de preenchimento com ícone de informação",preview:e.jsx(o,{filled:2,total:5}),code:"<RequiredFieldsCounter filled={2} total={5} />"},{title:"Formulário Completo",description:"Quando todos os campos são preenchidos, exibe ícone de check com animação",preview:e.jsx(o,{filled:5,total:5}),code:"<RequiredFieldsCounter filled={5} total={5} />"},{title:"Com Campos Faltantes",description:"Ao passar missingFields, um tooltip lista os campos pendentes",preview:e.jsx(o,{filled:3,total:5,missingFields:["Nome","Email"]}),code:`<RequiredFieldsCounter
|
|
8
|
-
filled={3}
|
|
9
|
-
total={5}
|
|
10
|
-
missingFields={["Nome", "Email"]}
|
|
11
|
-
/>`},{title:"Tamanhos",description:"Disponível em três tamanhos: sm (padrão), md e lg",preview:e.jsxs("div",{className:"flex flex-col gap-3",children:[e.jsx(o,{filled:2,total:4,size:"sm"}),e.jsx(o,{filled:2,total:4,size:"md"}),e.jsx(o,{filled:2,total:4,size:"lg"})]}),code:`<RequiredFieldsCounter filled={2} total={4} size="sm" />
|
|
12
|
-
<RequiredFieldsCounter filled={2} total={4} size="md" />
|
|
13
|
-
<RequiredFieldsCounter filled={2} total={4} size="lg" />`},{title:"Uso em Header",description:"Tamanho lg ideal para headers de página e formulários com destaque",preview:e.jsxs("div",{className:"flex items-center justify-between p-4 border rounded-lg bg-card w-full",children:[e.jsx("h2",{className:"text-lg font-semibold",children:"Novo Plano de Controle"}),e.jsx(o,{filled:3,total:8,size:"lg",missingFields:["Código","Título","Responsável","Data","Modelo"]})]}),code:`<div className="flex items-center justify-between p-4 border rounded-lg">
|
|
14
|
-
<h2 className="text-lg font-semibold">Novo Plano de Controle</h2>
|
|
15
|
-
<RequiredFieldsCounter
|
|
16
|
-
filled={3}
|
|
17
|
-
total={8}
|
|
18
|
-
size="lg"
|
|
19
|
-
missingFields={["Código", "Título", "Responsável", "Data", "Modelo"]}
|
|
20
|
-
/>
|
|
21
|
-
</div>`},{title:"Banner de Status",description:"Use lg em banners de progresso ou conclusão para maior visibilidade",preview:e.jsx("div",{className:"bg-muted/50 rounded-lg p-4 flex items-center justify-center w-full",children:e.jsx(o,{filled:5,total:5,size:"lg",completeText:"Formulário completo! Pronto para enviar."})}),code:`<div className="bg-muted/50 rounded-lg p-4 flex items-center justify-center">
|
|
22
|
-
<RequiredFieldsCounter
|
|
23
|
-
filled={5}
|
|
24
|
-
total={5}
|
|
25
|
-
size="lg"
|
|
26
|
-
completeText="Formulário completo! Pronto para enviar."
|
|
27
|
-
/>
|
|
28
|
-
</div>`},{title:"Texto Customizado",description:"Personalize os textos de estado completo e incompleto",preview:e.jsxs("div",{className:"flex flex-col gap-3",children:[e.jsx(o,{filled:2,total:4,incompleteText:"{filled} de {total} preenchidos"}),e.jsx(o,{filled:4,total:4,completeText:"Formulário completo!"})]}),code:`<RequiredFieldsCounter
|
|
29
|
-
filled={2}
|
|
30
|
-
total={4}
|
|
31
|
-
incompleteText="{filled} de {total} preenchidos"
|
|
32
|
-
/>
|
|
33
|
-
|
|
34
|
-
<RequiredFieldsCounter
|
|
35
|
-
filled={4}
|
|
36
|
-
total={4}
|
|
37
|
-
completeText="Formulário completo!"
|
|
38
|
-
/>`},{title:"Demo Interativa",description:"Preencha os campos para ver o contador atualizar em tempo real",preview:e.jsx(z,{}),code:`function FormExample() {
|
|
39
|
-
const [name, setName] = useState('');
|
|
40
|
-
const [email, setEmail] = useState('');
|
|
41
|
-
|
|
42
|
-
const filled = [name, email].filter(v => v.trim() !== '').length;
|
|
43
|
-
const missing = [];
|
|
44
|
-
if (!name.trim()) missing.push('Nome');
|
|
45
|
-
if (!email.trim()) missing.push('Email');
|
|
46
|
-
|
|
47
|
-
return (
|
|
48
|
-
<div className="space-y-4">
|
|
49
|
-
<RequiredFieldsCounter
|
|
50
|
-
filled={filled}
|
|
51
|
-
total={2}
|
|
52
|
-
missingFields={missing}
|
|
53
|
-
/>
|
|
54
|
-
<Input value={name} onChange={(e) => setName(e.target.value)} />
|
|
55
|
-
<Input value={email} onChange={(e) => setEmail(e.target.value)} />
|
|
56
|
-
</div>
|
|
57
|
-
);
|
|
58
|
-
}`}],props:[{name:"filled",type:"number",description:"Quantidade de campos obrigatórios preenchidos"},{name:"total",type:"number",description:"Total de campos obrigatórios no formulário"},{name:"missingFields",type:"string[]",description:"Lista de nomes dos campos faltantes (exibe tooltip)"},{name:"size",type:'"sm" | "md" | "lg"',default:'"sm"',description:"Tamanho do componente: sm para inline/formulários, md para cards, lg para headers/banners"},{name:"className",type:"string",description:"Classes CSS adicionais"},{name:"completeText",type:"string",default:'"Campos obrigatórios preenchidos"',description:"Texto exibido quando todos os campos estão preenchidos"},{name:"incompleteText",type:"string",description:"Texto customizado para estado incompleto. Use {filled} e {total} como placeholders"}],accessibility:["Usa Tooltip para fornecer informações adicionais sobre campos faltantes","Cores semânticas (success para completo, muted para incompleto) auxiliam na identificação visual","Animação sutil no ícone de check fornece feedback de conclusão","Texto sempre visível, não depende apenas de cor para transmitir informação"],notes:['O componente usa a animação "success-pop" definida no tailwind.config.ts','Importar de "@/shared/components" ou diretamente de "@/shared/components/RequiredFieldsCounter"',"Ideal para uso em headers de formulários ou ao lado de botões de submit"]})}export{P as RequiredFieldsCounterDoc};
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
import{r as d,an as wn,j as m,l as en}from"./index-BtX5DZqb.js";import{C as En}from"./ComponentDocTemplate-BtOCnlM2.js";import{G as Nn}from"./grip-vertical-CgXp0oI-.js";import"./ExampleCard-DfuMYM6E.js";import"./TableOfContents-DBMJMbI4.js";const Ce=d.createContext(null);Ce.displayName="PanelGroupContext";const A={group:"data-panel-group",groupDirection:"data-panel-group-direction",groupId:"data-panel-group-id",panel:"data-panel",panelCollapsible:"data-panel-collapsible",panelId:"data-panel-id",panelSize:"data-panel-size",resizeHandle:"data-resize-handle",resizeHandleActive:"data-resize-handle-active",resizeHandleEnabled:"data-panel-resize-handle-enabled",resizeHandleId:"data-panel-resize-handle-id",resizeHandleState:"data-resize-handle-state"},Fe=10,ie=d.useLayoutEffect,qe=wn.useId,Cn=typeof qe=="function"?qe:()=>null;let In=0;function Be(e=null){const n=Cn(),t=d.useRef(e||n||null);return t.current===null&&(t.current=""+In++),e??t.current}function nn({children:e,className:n="",collapsedSize:t,collapsible:i,defaultSize:o,forwardedRef:a,id:r,maxSize:l,minSize:s,onCollapse:x,onExpand:w,onResize:p,order:u,style:y,tagName:g="div",...N}){const E=d.useContext(Ce);if(E===null)throw Error("Panel components must be rendered within a PanelGroup container");const{collapsePanel:P,expandPanel:L,getPanelSize:j,getPanelStyle:M,groupId:K,isPanelCollapsed:I,reevaluatePanelConstraints:R,registerPanel:V,resizePanel:J,unregisterPanel:B}=E,G=Be(r),k=d.useRef({callbacks:{onCollapse:x,onExpand:w,onResize:p},constraints:{collapsedSize:t,collapsible:i,defaultSize:o,maxSize:l,minSize:s},id:G,idIsFromProps:r!==void 0,order:u});d.useRef({didLogMissingDefaultSizeWarning:!1}),ie(()=>{const{callbacks:_,constraints:$}=k.current,T={...$};k.current.id=G,k.current.idIsFromProps=r!==void 0,k.current.order=u,_.onCollapse=x,_.onExpand=w,_.onResize=p,$.collapsedSize=t,$.collapsible=i,$.defaultSize=o,$.maxSize=l,$.minSize=s,(T.collapsedSize!==$.collapsedSize||T.collapsible!==$.collapsible||T.maxSize!==$.maxSize||T.minSize!==$.minSize)&&R(k.current,T)}),ie(()=>{const _=k.current;return V(_),()=>{B(_)}},[u,G,V,B]),d.useImperativeHandle(a,()=>({collapse:()=>{P(k.current)},expand:_=>{L(k.current,_)},getId(){return G},getSize(){return j(k.current)},isCollapsed(){return I(k.current)},isExpanded(){return!I(k.current)},resize:_=>{J(k.current,_)}}),[P,L,j,I,G,J]);const ne=M(k.current,o);return d.createElement(g,{...N,children:e,className:n,id:G,style:{...ne,...y},[A.groupId]:K,[A.panel]:"",[A.panelCollapsible]:i||void 0,[A.panelId]:G,[A.panelSize]:parseFloat(""+ne.flexGrow).toFixed(1)})}const tn=d.forwardRef((e,n)=>d.createElement(nn,{...e,forwardedRef:n}));nn.displayName="Panel";tn.displayName="forwardRef(Panel)";let Te=null,Re=-1,Q=null;function Ln(e,n,t){const i=(n&sn)!==0,o=(n&un)!==0,a=(n&cn)!==0,r=(n&dn)!==0;if(n){if(i)return a?"se-resize":r?"ne-resize":"e-resize";if(o)return a?"sw-resize":r?"nw-resize":"w-resize";if(a)return"s-resize";if(r)return"n-resize"}switch(e){case"horizontal":return"ew-resize";case"intersection":return"move";case"vertical":return"ns-resize"}}function Hn(){Q!==null&&(document.head.removeChild(Q),Te=null,Q=null,Re=-1)}function je(e,n,t){var i,o;const a=Ln(e,n);if(Te!==a){if(Te=a,Q===null&&(Q=document.createElement("style"),document.head.appendChild(Q)),Re>=0){var r;(r=Q.sheet)===null||r===void 0||r.removeRule(Re)}Re=(i=(o=Q.sheet)===null||o===void 0?void 0:o.insertRule(`*{cursor: ${a} !important;}`))!==null&&i!==void 0?i:-1}}function an(e){return e.type==="keydown"}function on(e){return e.type.startsWith("pointer")}function rn(e){return e.type.startsWith("mouse")}function Ie(e){if(on(e)){if(e.isPrimary)return{x:e.clientX,y:e.clientY}}else if(rn(e))return{x:e.clientX,y:e.clientY};return{x:1/0,y:1/0}}function An(){if(typeof matchMedia=="function")return matchMedia("(pointer:coarse)").matches?"coarse":"fine"}function kn(e,n,t){return e.x<n.x+n.width&&e.x+e.width>n.x&&e.y<n.y+n.height&&e.y+e.height>n.y}function jn(e,n){if(e===n)throw new Error("Cannot compare node with itself");const t={a:Xe(e),b:Xe(n)};let i;for(;t.a.at(-1)===t.b.at(-1);)e=t.a.pop(),n=t.b.pop(),i=e;v(i,"Stacking order can only be calculated for elements with a common ancestor");const o={a:Oe(Ke(t.a)),b:Oe(Ke(t.b))};if(o.a===o.b){const a=i.childNodes,r={a:t.a.at(-1),b:t.b.at(-1)};let l=a.length;for(;l--;){const s=a[l];if(s===r.a)return 1;if(s===r.b)return-1}}return Math.sign(o.a-o.b)}const Dn=/\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;function Mn(e){var n;const t=getComputedStyle((n=ln(e))!==null&&n!==void 0?n:e).display;return t==="flex"||t==="inline-flex"}function $n(e){const n=getComputedStyle(e);return!!(n.position==="fixed"||n.zIndex!=="auto"&&(n.position!=="static"||Mn(e))||+n.opacity<1||"transform"in n&&n.transform!=="none"||"webkitTransform"in n&&n.webkitTransform!=="none"||"mixBlendMode"in n&&n.mixBlendMode!=="normal"||"filter"in n&&n.filter!=="none"||"webkitFilter"in n&&n.webkitFilter!=="none"||"isolation"in n&&n.isolation==="isolate"||Dn.test(n.willChange)||n.webkitOverflowScrolling==="touch")}function Ke(e){let n=e.length;for(;n--;){const t=e[n];if(v(t,"Missing node"),$n(t))return t}return null}function Oe(e){return e&&Number(getComputedStyle(e).zIndex)||0}function Xe(e){const n=[];for(;e;)n.push(e),e=ln(e);return n}function ln(e){const{parentNode:n}=e;return n&&n instanceof ShadowRoot?n.host:n}const sn=1,un=2,cn=4,dn=8,_n=An()==="coarse";let q=[],ue=!1,ee=new Map,Le=new Map;const ge=new Set;function Gn(e,n,t,i,o){var a;const{ownerDocument:r}=n,l={direction:t,element:n,hitAreaMargins:i,setResizeHandlerState:o},s=(a=ee.get(r))!==null&&a!==void 0?a:0;return ee.set(r,s+1),ge.add(l),we(),function(){var w;Le.delete(e),ge.delete(l);const p=(w=ee.get(r))!==null&&w!==void 0?w:1;if(ee.set(r,p-1),we(),p===1&&ee.delete(r),q.includes(l)){const u=q.indexOf(l);u>=0&&q.splice(u,1),He(),o("up",!0,null)}}}function Tn(e){const{target:n}=e,{x:t,y:i}=Ie(e);ue=!0,Ue({target:n,x:t,y:i}),we(),q.length>0&&(Ee("down",e),He(),e.preventDefault(),fn(n)||e.stopImmediatePropagation())}function De(e){const{x:n,y:t}=Ie(e);if(ue&&e.type!=="pointerleave"&&e.buttons===0&&(ue=!1,Ee("up",e)),!ue){const{target:i}=e;Ue({target:i,x:n,y:t})}Ee("move",e),He(),q.length>0&&e.preventDefault()}function Me(e){const{target:n}=e,{x:t,y:i}=Ie(e);Le.clear(),ue=!1,q.length>0&&(e.preventDefault(),fn(n)||e.stopImmediatePropagation()),Ee("up",e),Ue({target:n,x:t,y:i}),He(),we()}function fn(e){let n=e;for(;n;){if(n.hasAttribute(A.resizeHandle))return!0;n=n.parentElement}return!1}function Ue({target:e,x:n,y:t}){q.splice(0);let i=null;(e instanceof HTMLElement||e instanceof SVGElement)&&(i=e),ge.forEach(o=>{const{element:a,hitAreaMargins:r}=o,l=a.getBoundingClientRect(),{bottom:s,left:x,right:w,top:p}=l,u=_n?r.coarse:r.fine;if(n>=x-u&&n<=w+u&&t>=p-u&&t<=s+u){if(i!==null&&document.contains(i)&&a!==i&&!a.contains(i)&&!i.contains(a)&&jn(i,a)>0){let g=i,N=!1;for(;g&&!g.contains(a);){if(kn(g.getBoundingClientRect(),l)){N=!0;break}g=g.parentElement}if(N)return}q.push(o)}})}function $e(e,n){Le.set(e,n)}function He(){let e=!1,n=!1;q.forEach(i=>{const{direction:o}=i;o==="horizontal"?e=!0:n=!0});let t=0;Le.forEach(i=>{t|=i}),e&&n?je("intersection",t):e?je("horizontal",t):n?je("vertical",t):Hn()}let _e;function we(){var e;(e=_e)===null||e===void 0||e.abort(),_e=new AbortController;const n={capture:!0,signal:_e.signal};ge.size&&(ue?(q.length>0&&ee.forEach((t,i)=>{const{body:o}=i;t>0&&(o.addEventListener("contextmenu",Me,n),o.addEventListener("pointerleave",De,n),o.addEventListener("pointermove",De,n))}),ee.forEach((t,i)=>{const{body:o}=i;o.addEventListener("pointerup",Me,n),o.addEventListener("pointercancel",Me,n)})):ee.forEach((t,i)=>{const{body:o}=i;t>0&&(o.addEventListener("pointerdown",Tn,n),o.addEventListener("pointermove",De,n))}))}function Ee(e,n){ge.forEach(t=>{const{setResizeHandlerState:i}=t,o=q.includes(t);i(e,o,n)})}function Fn(){const[e,n]=d.useState(0);return d.useCallback(()=>n(t=>t+1),[])}function v(e,n){if(!e)throw console.error(n),Error(n)}function ae(e,n,t=Fe){return e.toFixed(t)===n.toFixed(t)?0:e>n?1:-1}function Y(e,n,t=Fe){return ae(e,n,t)===0}function U(e,n,t){return ae(e,n,t)===0}function Bn(e,n,t){if(e.length!==n.length)return!1;for(let i=0;i<e.length;i++){const o=e[i],a=n[i];if(!U(o,a,t))return!1}return!0}function se({panelConstraints:e,panelIndex:n,size:t}){const i=e[n];v(i!=null,`Panel constraints not found for index ${n}`);let{collapsedSize:o=0,collapsible:a,maxSize:r=100,minSize:l=0}=i;if(ae(t,l)<0)if(a){const s=(o+l)/2;ae(t,s)<0?t=o:t=l}else t=l;return t=Math.min(r,t),t=parseFloat(t.toFixed(Fe)),t}function ze({delta:e,initialLayout:n,panelConstraints:t,pivotIndices:i,prevLayout:o,trigger:a}){if(U(e,0))return n;const r=[...n],[l,s]=i;v(l!=null,"Invalid first pivot index"),v(s!=null,"Invalid second pivot index");let x=0;if(a==="keyboard"){{const p=e<0?s:l,u=t[p];v(u,`Panel constraints not found for index ${p}`);const{collapsedSize:y=0,collapsible:g,minSize:N=0}=u;if(g){const E=n[p];if(v(E!=null,`Previous layout not found for panel index ${p}`),U(E,y)){const P=N-E;ae(P,Math.abs(e))>0&&(e=e<0?0-P:P)}}}{const p=e<0?l:s,u=t[p];v(u,`No panel constraints found for index ${p}`);const{collapsedSize:y=0,collapsible:g,minSize:N=0}=u;if(g){const E=n[p];if(v(E!=null,`Previous layout not found for panel index ${p}`),U(E,N)){const P=E-y;ae(P,Math.abs(e))>0&&(e=e<0?0-P:P)}}}}{const p=e<0?1:-1;let u=e<0?s:l,y=0;for(;;){const N=n[u];v(N!=null,`Previous layout not found for panel index ${u}`);const P=se({panelConstraints:t,panelIndex:u,size:100})-N;if(y+=P,u+=p,u<0||u>=t.length)break}const g=Math.min(Math.abs(e),Math.abs(y));e=e<0?0-g:g}{let u=e<0?l:s;for(;u>=0&&u<t.length;){const y=Math.abs(e)-Math.abs(x),g=n[u];v(g!=null,`Previous layout not found for panel index ${u}`);const N=g-y,E=se({panelConstraints:t,panelIndex:u,size:N});if(!U(g,E)&&(x+=g-E,r[u]=E,x.toFixed(3).localeCompare(Math.abs(e).toFixed(3),void 0,{numeric:!0})>=0))break;e<0?u--:u++}}if(Bn(o,r))return o;{const p=e<0?s:l,u=n[p];v(u!=null,`Previous layout not found for panel index ${p}`);const y=u+x,g=se({panelConstraints:t,panelIndex:p,size:y});if(r[p]=g,!U(g,y)){let N=y-g,P=e<0?s:l;for(;P>=0&&P<t.length;){const L=r[P];v(L!=null,`Previous layout not found for panel index ${P}`);const j=L+N,M=se({panelConstraints:t,panelIndex:P,size:j});if(U(L,M)||(N-=M-L,r[P]=M),U(N,0))break;e>0?P--:P++}}}const w=r.reduce((p,u)=>u+p,0);return U(w,100)?r:o}function Un({layout:e,panelsArray:n,pivotIndices:t}){let i=0,o=100,a=0,r=0;const l=t[0];v(l!=null,"No pivot index found"),n.forEach((p,u)=>{const{constraints:y}=p,{maxSize:g=100,minSize:N=0}=y;u===l?(i=N,o=g):(a+=N,r+=g)});const s=Math.min(o,100-a),x=Math.max(i,100-r),w=e[l];return{valueMax:s,valueMin:x,valueNow:w}}function be(e,n=document){return Array.from(n.querySelectorAll(`[${A.resizeHandleId}][data-panel-group-id="${e}"]`))}function pn(e,n,t=document){const o=be(e,t).findIndex(a=>a.getAttribute(A.resizeHandleId)===n);return o??null}function mn(e,n,t){const i=pn(e,n,t);return i!=null?[i,i+1]:[-1,-1]}function Vn(e){return e instanceof HTMLElement?!0:typeof e=="object"&&e!==null&&"tagName"in e&&"getAttribute"in e}function hn(e,n=document){if(Vn(n)&&n.dataset.panelGroupId==e)return n;const t=n.querySelector(`[data-panel-group][data-panel-group-id="${e}"]`);return t||null}function Ae(e,n=document){const t=n.querySelector(`[${A.resizeHandleId}="${e}"]`);return t||null}function Wn(e,n,t,i=document){var o,a,r,l;const s=Ae(n,i),x=be(e,i),w=s?x.indexOf(s):-1,p=(o=(a=t[w])===null||a===void 0?void 0:a.id)!==null&&o!==void 0?o:null,u=(r=(l=t[w+1])===null||l===void 0?void 0:l.id)!==null&&r!==void 0?r:null;return[p,u]}function qn({committedValuesRef:e,eagerValuesRef:n,groupId:t,layout:i,panelDataArray:o,panelGroupElement:a,setLayout:r}){d.useRef({didWarnAboutMissingResizeHandle:!1}),ie(()=>{if(!a)return;const l=be(t,a);for(let s=0;s<o.length-1;s++){const{valueMax:x,valueMin:w,valueNow:p}=Un({layout:i,panelsArray:o,pivotIndices:[s,s+1]}),u=l[s];if(u!=null){const y=o[s];v(y,`No panel data found for index "${s}"`),u.setAttribute("aria-controls",y.id),u.setAttribute("aria-valuemax",""+Math.round(x)),u.setAttribute("aria-valuemin",""+Math.round(w)),u.setAttribute("aria-valuenow",p!=null?""+Math.round(p):"")}}return()=>{l.forEach((s,x)=>{s.removeAttribute("aria-controls"),s.removeAttribute("aria-valuemax"),s.removeAttribute("aria-valuemin"),s.removeAttribute("aria-valuenow")})}},[t,i,o,a]),d.useEffect(()=>{if(!a)return;const l=n.current;v(l,"Eager values not found");const{panelDataArray:s}=l,x=hn(t,a);v(x!=null,`No group found for id "${t}"`);const w=be(t,a);v(w,`No resize handles found for group id "${t}"`);const p=w.map(u=>{const y=u.getAttribute(A.resizeHandleId);v(y,"Resize handle element has no handle id attribute");const[g,N]=Wn(t,y,s,a);if(g==null||N==null)return()=>{};const E=P=>{if(!P.defaultPrevented)switch(P.key){case"Enter":{P.preventDefault();const L=s.findIndex(j=>j.id===g);if(L>=0){const j=s[L];v(j,`No panel data found for index ${L}`);const M=i[L],{collapsedSize:K=0,collapsible:I,minSize:R=0}=j.constraints;if(M!=null&&I){const V=ze({delta:U(M,K)?R-K:K-M,initialLayout:i,panelConstraints:s.map(J=>J.constraints),pivotIndices:mn(t,y,a),prevLayout:i,trigger:"keyboard"});i!==V&&r(V)}}break}}};return u.addEventListener("keydown",E),()=>{u.removeEventListener("keydown",E)}});return()=>{p.forEach(u=>u())}},[a,e,n,t,i,o,r])}function Je(e,n){if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(e[t]!==n[t])return!1;return!0}function zn(e,n){const t=e==="horizontal",{x:i,y:o}=Ie(n);return t?i:o}function Kn(e,n,t,i,o){const a=t==="horizontal",r=Ae(n,o);v(r,`No resize handle element found for id "${n}"`);const l=r.getAttribute(A.groupId);v(l,"Resize handle element has no group id attribute");let{initialCursorPosition:s}=i;const x=zn(t,e),w=hn(l,o);v(w,`No group element found for id "${l}"`);const p=w.getBoundingClientRect(),u=a?p.width:p.height;return(x-s)/u*100}function On(e,n,t,i,o,a){if(an(e)){const r=t==="horizontal";let l=0;e.shiftKey?l=100:o!=null?l=o:l=10;let s=0;switch(e.key){case"ArrowDown":s=r?0:l;break;case"ArrowLeft":s=r?-l:0;break;case"ArrowRight":s=r?l:0;break;case"ArrowUp":s=r?0:-l;break;case"End":s=100;break;case"Home":s=-100;break}return s}else return i==null?0:Kn(e,n,t,i,a)}function Xn({panelDataArray:e}){const n=Array(e.length),t=e.map(a=>a.constraints);let i=0,o=100;for(let a=0;a<e.length;a++){const r=t[a];v(r,`Panel constraints not found for index ${a}`);const{defaultSize:l}=r;l!=null&&(i++,n[a]=l,o-=l)}for(let a=0;a<e.length;a++){const r=t[a];v(r,`Panel constraints not found for index ${a}`);const{defaultSize:l}=r;if(l!=null)continue;const s=e.length-i,x=o/s;i++,n[a]=x,o-=x}return n}function re(e,n,t){n.forEach((i,o)=>{const a=e[o];v(a,`Panel data not found for index ${o}`);const{callbacks:r,constraints:l,id:s}=a,{collapsedSize:x=0,collapsible:w}=l,p=t[s];if(p==null||i!==p){t[s]=i;const{onCollapse:u,onExpand:y,onResize:g}=r;g&&g(i,p),w&&(u||y)&&(y&&(p==null||Y(p,x))&&!Y(i,x)&&y(),u&&(p==null||!Y(p,x))&&Y(i,x)&&u())}})}function Pe(e,n){if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(e[t]!=n[t])return!1;return!0}function Jn({defaultSize:e,dragState:n,layout:t,panelData:i,panelIndex:o,precision:a=3}){const r=t[o];let l;return r==null?l=e!=null?e.toFixed(a):"1":i.length===1?l="1":l=r.toFixed(a),{flexBasis:0,flexGrow:l,flexShrink:1,overflow:"hidden",pointerEvents:n!==null?"none":void 0}}function Yn(e,n=10){let t=null;return(...o)=>{t!==null&&clearTimeout(t),t=setTimeout(()=>{e(...o)},n)}}function Ye(e){try{if(typeof localStorage<"u")e.getItem=n=>localStorage.getItem(n),e.setItem=(n,t)=>{localStorage.setItem(n,t)};else throw new Error("localStorage not supported in this environment")}catch(n){console.error(n),e.getItem=()=>null,e.setItem=()=>{}}}function xn(e){return`react-resizable-panels:${e}`}function gn(e){return e.map(n=>{const{constraints:t,id:i,idIsFromProps:o,order:a}=n;return o?i:a?`${a}:${JSON.stringify(t)}`:JSON.stringify(t)}).sort((n,t)=>n.localeCompare(t)).join(",")}function bn(e,n){try{const t=xn(e),i=n.getItem(t);if(i){const o=JSON.parse(i);if(typeof o=="object"&&o!=null)return o}}catch{}return null}function Zn(e,n,t){var i,o;const a=(i=bn(e,t))!==null&&i!==void 0?i:{},r=gn(n);return(o=a[r])!==null&&o!==void 0?o:null}function Qn(e,n,t,i,o){var a;const r=xn(e),l=gn(n),s=(a=bn(e,o))!==null&&a!==void 0?a:{};s[l]={expandToSizes:Object.fromEntries(t.entries()),layout:i};try{o.setItem(r,JSON.stringify(s))}catch(x){console.error(x)}}function Ze({layout:e,panelConstraints:n}){const t=[...e],i=t.reduce((a,r)=>a+r,0);if(t.length!==n.length)throw Error(`Invalid ${n.length} panel layout: ${t.map(a=>`${a}%`).join(", ")}`);if(!U(i,100)&&t.length>0)for(let a=0;a<n.length;a++){const r=t[a];v(r!=null,`No layout data found for index ${a}`);const l=100/i*r;t[a]=l}let o=0;for(let a=0;a<n.length;a++){const r=t[a];v(r!=null,`No layout data found for index ${a}`);const l=se({panelConstraints:n,panelIndex:a,size:r});r!=l&&(o+=r-l,t[a]=l)}if(!U(o,0))for(let a=0;a<n.length;a++){const r=t[a];v(r!=null,`No layout data found for index ${a}`);const l=r+o,s=se({panelConstraints:n,panelIndex:a,size:l});if(r!==s&&(o-=s-r,t[a]=s,U(o,0)))break}return t}const et=100,xe={getItem:e=>(Ye(xe),xe.getItem(e)),setItem:(e,n)=>{Ye(xe),xe.setItem(e,n)}},Qe={};function vn({autoSaveId:e=null,children:n,className:t="",direction:i,forwardedRef:o,id:a=null,onLayout:r=null,keyboardResizeBy:l=null,storage:s=xe,style:x,tagName:w="div",...p}){const u=Be(a),y=d.useRef(null),[g,N]=d.useState(null),[E,P]=d.useState([]),L=Fn(),j=d.useRef({}),M=d.useRef(new Map),K=d.useRef(0),I=d.useRef({autoSaveId:e,direction:i,dragState:g,id:u,keyboardResizeBy:l,onLayout:r,storage:s}),R=d.useRef({layout:E,panelDataArray:[],panelDataArrayChanged:!1});d.useRef({didLogIdAndOrderWarning:!1,didLogPanelConstraintsWarning:!1,prevPanelIds:[]}),d.useImperativeHandle(o,()=>({getId:()=>I.current.id,getLayout:()=>{const{layout:c}=R.current;return c},setLayout:c=>{const{onLayout:z}=I.current,{layout:S,panelDataArray:h}=R.current,f=Ze({layout:c,panelConstraints:h.map(b=>b.constraints)});Je(S,f)||(P(f),R.current.layout=f,z&&z(f),re(h,f,j.current))}}),[]),ie(()=>{I.current.autoSaveId=e,I.current.direction=i,I.current.dragState=g,I.current.id=u,I.current.onLayout=r,I.current.storage=s}),qn({committedValuesRef:I,eagerValuesRef:R,groupId:u,layout:E,panelDataArray:R.current.panelDataArray,setLayout:P,panelGroupElement:y.current}),d.useEffect(()=>{const{panelDataArray:c}=R.current;if(e){if(E.length===0||E.length!==c.length)return;let z=Qe[e];z==null&&(z=Yn(Qn,et),Qe[e]=z);const S=[...c],h=new Map(M.current);z(e,S,h,E,s)}},[e,E,s]),d.useEffect(()=>{});const V=d.useCallback(c=>{const{onLayout:z}=I.current,{layout:S,panelDataArray:h}=R.current;if(c.constraints.collapsible){const f=h.map(O=>O.constraints),{collapsedSize:b=0,panelSize:C,pivotIndices:D}=te(h,c,S);if(v(C!=null,`Panel size not found for panel "${c.id}"`),!Y(C,b)){M.current.set(c.id,C);const X=le(h,c)===h.length-1?C-b:b-C,H=ze({delta:X,initialLayout:S,panelConstraints:f,pivotIndices:D,prevLayout:S,trigger:"imperative-api"});Pe(S,H)||(P(H),R.current.layout=H,z&&z(H),re(h,H,j.current))}}},[]),J=d.useCallback((c,z)=>{const{onLayout:S}=I.current,{layout:h,panelDataArray:f}=R.current;if(c.constraints.collapsible){const b=f.map(W=>W.constraints),{collapsedSize:C=0,panelSize:D=0,minSize:O=0,pivotIndices:X}=te(f,c,h),H=z??O;if(Y(D,C)){const W=M.current.get(c.id),me=W!=null&&W>=H?W:H,ke=le(f,c)===f.length-1?D-me:me-D,F=ze({delta:ke,initialLayout:h,panelConstraints:b,pivotIndices:X,prevLayout:h,trigger:"imperative-api"});Pe(h,F)||(P(F),R.current.layout=F,S&&S(F),re(f,F,j.current))}}},[]),B=d.useCallback(c=>{const{layout:z,panelDataArray:S}=R.current,{panelSize:h}=te(S,c,z);return v(h!=null,`Panel size not found for panel "${c.id}"`),h},[]),G=d.useCallback((c,z)=>{const{panelDataArray:S}=R.current,h=le(S,c);return Jn({defaultSize:z,dragState:g,layout:E,panelData:S,panelIndex:h})},[g,E]),k=d.useCallback(c=>{const{layout:z,panelDataArray:S}=R.current,{collapsedSize:h=0,collapsible:f,panelSize:b}=te(S,c,z);return v(b!=null,`Panel size not found for panel "${c.id}"`),f===!0&&Y(b,h)},[]),ne=d.useCallback(c=>{const{layout:z,panelDataArray:S}=R.current,{collapsedSize:h=0,collapsible:f,panelSize:b}=te(S,c,z);return v(b!=null,`Panel size not found for panel "${c.id}"`),!f||ae(b,h)>0},[]),_=d.useCallback(c=>{const{panelDataArray:z}=R.current;z.push(c),z.sort((S,h)=>{const f=S.order,b=h.order;return f==null&&b==null?0:f==null?-1:b==null?1:f-b}),R.current.panelDataArrayChanged=!0,L()},[L]);ie(()=>{if(R.current.panelDataArrayChanged){R.current.panelDataArrayChanged=!1;const{autoSaveId:c,onLayout:z,storage:S}=I.current,{layout:h,panelDataArray:f}=R.current;let b=null;if(c){const D=Zn(c,f,S);D&&(M.current=new Map(Object.entries(D.expandToSizes)),b=D.layout)}b==null&&(b=Xn({panelDataArray:f}));const C=Ze({layout:b,panelConstraints:f.map(D=>D.constraints)});Je(h,C)||(P(C),R.current.layout=C,z&&z(C),re(f,C,j.current))}}),ie(()=>{const c=R.current;return()=>{c.layout=[]}},[]);const $=d.useCallback(c=>{let z=!1;const S=y.current;return S&&window.getComputedStyle(S,null).getPropertyValue("direction")==="rtl"&&(z=!0),function(f){f.preventDefault();const b=y.current;if(!b)return()=>null;const{direction:C,dragState:D,id:O,keyboardResizeBy:X,onLayout:H}=I.current,{layout:W,panelDataArray:me}=R.current,{initialLayout:Se}=D??{},ke=mn(O,c,b);let F=On(f,c,C,D,X,b);const Ve=C==="horizontal";Ve&&z&&(F=-F);const Pn=me.map(Rn=>Rn.constraints),he=ze({delta:F,initialLayout:Se??W,panelConstraints:Pn,pivotIndices:ke,prevLayout:W,trigger:an(f)?"keyboard":"mouse-or-touch"}),We=!Pe(W,he);(on(f)||rn(f))&&K.current!=F&&(K.current=F,!We&&F!==0?Ve?$e(c,F<0?sn:un):$e(c,F<0?cn:dn):$e(c,0)),We&&(P(he),R.current.layout=he,H&&H(he),re(me,he,j.current))}},[]),T=d.useCallback((c,z)=>{const{onLayout:S}=I.current,{layout:h,panelDataArray:f}=R.current,b=f.map(W=>W.constraints),{panelSize:C,pivotIndices:D}=te(f,c,h);v(C!=null,`Panel size not found for panel "${c.id}"`);const X=le(f,c)===f.length-1?C-z:z-C,H=ze({delta:X,initialLayout:h,panelConstraints:b,pivotIndices:D,prevLayout:h,trigger:"imperative-api"});Pe(h,H)||(P(H),R.current.layout=H,S&&S(H),re(f,H,j.current))},[]),ce=d.useCallback((c,z)=>{const{layout:S,panelDataArray:h}=R.current,{collapsedSize:f=0,collapsible:b}=z,{collapsedSize:C=0,collapsible:D,maxSize:O=100,minSize:X=0}=c.constraints,{panelSize:H}=te(h,c,S);H!=null&&(b&&D&&Y(H,f)?Y(f,C)||T(c,C):H<X?T(c,X):H>O&&T(c,O))},[T]),de=d.useCallback((c,z)=>{const{direction:S}=I.current,{layout:h}=R.current;if(!y.current)return;const f=Ae(c,y.current);v(f,`Drag handle element not found for id "${c}"`);const b=zn(S,z);N({dragHandleId:c,dragHandleRect:f.getBoundingClientRect(),initialCursorPosition:b,initialLayout:h})},[]),fe=d.useCallback(()=>{N(null)},[]),ye=d.useCallback(c=>{const{panelDataArray:z}=R.current,S=le(z,c);S>=0&&(z.splice(S,1),delete j.current[c.id],R.current.panelDataArrayChanged=!0,L())},[L]),oe=d.useMemo(()=>({collapsePanel:V,direction:i,dragState:g,expandPanel:J,getPanelSize:B,getPanelStyle:G,groupId:u,isPanelCollapsed:k,isPanelExpanded:ne,reevaluatePanelConstraints:ce,registerPanel:_,registerResizeHandle:$,resizePanel:T,startDragging:de,stopDragging:fe,unregisterPanel:ye,panelGroupElement:y.current}),[V,g,i,J,B,G,u,k,ne,ce,_,$,T,de,fe,ye]),pe={display:"flex",flexDirection:i==="horizontal"?"row":"column",height:"100%",overflow:"hidden",width:"100%"};return d.createElement(Ce.Provider,{value:oe},d.createElement(w,{...p,children:n,className:t,id:a,ref:y,style:{...pe,...x},[A.group]:"",[A.groupDirection]:i,[A.groupId]:u}))}const yn=d.forwardRef((e,n)=>d.createElement(vn,{...e,forwardedRef:n}));vn.displayName="PanelGroup";yn.displayName="forwardRef(PanelGroup)";function le(e,n){return e.findIndex(t=>t===n||t.id===n.id)}function te(e,n,t){const i=le(e,n),a=i===e.length-1?[i-1,i]:[i,i+1],r=t[i];return{...n.constraints,panelSize:r,pivotIndices:a}}function nt({disabled:e,handleId:n,resizeHandler:t,panelGroupElement:i}){d.useEffect(()=>{if(e||t==null||i==null)return;const o=Ae(n,i);if(o==null)return;const a=r=>{if(!r.defaultPrevented)switch(r.key){case"ArrowDown":case"ArrowLeft":case"ArrowRight":case"ArrowUp":case"End":case"Home":{r.preventDefault(),t(r);break}case"F6":{r.preventDefault();const l=o.getAttribute(A.groupId);v(l,`No group element found for id "${l}"`);const s=be(l,i),x=pn(l,n,i);v(x!==null,`No resize element found for id "${n}"`);const w=r.shiftKey?x>0?x-1:s.length-1:x+1<s.length?x+1:0;s[w].focus();break}}};return o.addEventListener("keydown",a),()=>{o.removeEventListener("keydown",a)}},[i,e,n,t])}function Sn({children:e=null,className:n="",disabled:t=!1,hitAreaMargins:i,id:o,onBlur:a,onClick:r,onDragging:l,onFocus:s,onPointerDown:x,onPointerUp:w,style:p={},tabIndex:u=0,tagName:y="div",...g}){var N,E;const P=d.useRef(null),L=d.useRef({onClick:r,onDragging:l,onPointerDown:x,onPointerUp:w});d.useEffect(()=>{L.current.onClick=r,L.current.onDragging=l,L.current.onPointerDown=x,L.current.onPointerUp=w});const j=d.useContext(Ce);if(j===null)throw Error("PanelResizeHandle components must be rendered within a PanelGroup container");const{direction:M,groupId:K,registerResizeHandle:I,startDragging:R,stopDragging:V,panelGroupElement:J}=j,B=Be(o),[G,k]=d.useState("inactive"),[ne,_]=d.useState(!1),[$,T]=d.useState(null),ce=d.useRef({state:G});ie(()=>{ce.current.state=G}),d.useEffect(()=>{if(t)T(null);else{const oe=I(B);T(()=>oe)}},[t,B,I]);const de=(N=i?.coarse)!==null&&N!==void 0?N:15,fe=(E=i?.fine)!==null&&E!==void 0?E:5;d.useEffect(()=>{if(t||$==null)return;const oe=P.current;v(oe,"Element ref not attached");let pe=!1;return Gn(B,oe,M,{coarse:de,fine:fe},(z,S,h)=>{if(!S){k("inactive");return}switch(z){case"down":{k("drag"),pe=!1,v(h,'Expected event to be defined for "down" action'),R(B,h);const{onDragging:f,onPointerDown:b}=L.current;f?.(!0),b?.();break}case"move":{const{state:f}=ce.current;pe=!0,f!=="drag"&&k("hover"),v(h,'Expected event to be defined for "move" action'),$(h);break}case"up":{k("hover"),V();const{onClick:f,onDragging:b,onPointerUp:C}=L.current;b?.(!1),C?.(),pe||f?.();break}}})},[de,M,t,fe,I,B,$,R,V]),nt({disabled:t,handleId:B,resizeHandler:$,panelGroupElement:J});const ye={touchAction:"none",userSelect:"none"};return d.createElement(y,{...g,children:e,className:n,id:o,onBlur:()=>{_(!1),a?.()},onFocus:()=>{_(!0),s?.()},ref:P,role:"separator",style:{...ye,...p},tabIndex:u,[A.groupDirection]:M,[A.groupId]:K,[A.resizeHandle]:"",[A.resizeHandleActive]:G==="drag"?"pointer":ne?"keyboard":void 0,[A.resizeHandleEnabled]:!t,[A.resizeHandleId]:B,[A.resizeHandleState]:G})}Sn.displayName="PanelResizeHandle";const Ne=({className:e,...n})=>m.jsx(yn,{className:en("flex h-full w-full data-[panel-group-direction=vertical]:flex-col",e),...n}),Z=tn,ve=({withHandle:e,className:n,...t})=>m.jsx(Sn,{className:en("relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",n),...t,children:e&&m.jsx("div",{className:"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border",children:m.jsx(Nn,{className:"h-2.5 w-2.5"})})}),tt=`import {
|
|
2
|
-
ResizablePanelGroup,
|
|
3
|
-
ResizablePanel,
|
|
4
|
-
ResizableHandle
|
|
5
|
-
} from 'forlogic-core/modular';
|
|
6
|
-
|
|
7
|
-
function ResizableLayout() {
|
|
8
|
-
return (
|
|
9
|
-
<ResizablePanelGroup direction="horizontal" className="min-h-[200px]">
|
|
10
|
-
<ResizablePanel defaultSize={25}>
|
|
11
|
-
<div className="p-4">Painel Esquerdo</div>
|
|
12
|
-
</ResizablePanel>
|
|
13
|
-
<ResizableHandle withHandle />
|
|
14
|
-
<ResizablePanel defaultSize={75}>
|
|
15
|
-
<div className="p-4">Painel Direito</div>
|
|
16
|
-
</ResizablePanel>
|
|
17
|
-
</ResizablePanelGroup>
|
|
18
|
-
);
|
|
19
|
-
}`,it=`// Layout horizontal (padrão)
|
|
20
|
-
<ResizablePanelGroup direction="horizontal" className="min-h-[200px] border rounded-lg">
|
|
21
|
-
<ResizablePanel defaultSize={30} minSize={20}>
|
|
22
|
-
<div className="h-full bg-muted/50 p-4">
|
|
23
|
-
<h4 className="font-medium">Sidebar</h4>
|
|
24
|
-
<p className="text-sm text-muted-foreground">Largura mínima 20%</p>
|
|
25
|
-
</div>
|
|
26
|
-
</ResizablePanel>
|
|
27
|
-
<ResizableHandle withHandle />
|
|
28
|
-
<ResizablePanel defaultSize={70}>
|
|
29
|
-
<div className="h-full p-4">
|
|
30
|
-
<h4 className="font-medium">Conteúdo Principal</h4>
|
|
31
|
-
<p className="text-sm text-muted-foreground">Área redimensionável</p>
|
|
32
|
-
</div>
|
|
33
|
-
</ResizablePanel>
|
|
34
|
-
</ResizablePanelGroup>`,at=`// Layout vertical
|
|
35
|
-
<ResizablePanelGroup direction="vertical" className="min-h-[400px] border rounded-lg">
|
|
36
|
-
<ResizablePanel defaultSize={25}>
|
|
37
|
-
<div className="h-full bg-muted/50 p-4">
|
|
38
|
-
<h4 className="font-medium">Header</h4>
|
|
39
|
-
</div>
|
|
40
|
-
</ResizablePanel>
|
|
41
|
-
<ResizableHandle withHandle />
|
|
42
|
-
<ResizablePanel defaultSize={50}>
|
|
43
|
-
<div className="h-full p-4">
|
|
44
|
-
<h4 className="font-medium">Conteúdo</h4>
|
|
45
|
-
</div>
|
|
46
|
-
</ResizablePanel>
|
|
47
|
-
<ResizableHandle withHandle />
|
|
48
|
-
<ResizablePanel defaultSize={25}>
|
|
49
|
-
<div className="h-full bg-muted/50 p-4">
|
|
50
|
-
<h4 className="font-medium">Footer</h4>
|
|
51
|
-
</div>
|
|
52
|
-
</ResizablePanel>
|
|
53
|
-
</ResizablePanelGroup>`,ot=`// Layout aninhado (horizontal + vertical)
|
|
54
|
-
<ResizablePanelGroup direction="horizontal" className="min-h-[400px] border rounded-lg">
|
|
55
|
-
<ResizablePanel defaultSize={25} minSize={15}>
|
|
56
|
-
<div className="h-full bg-muted/50 p-4">
|
|
57
|
-
<h4 className="font-medium">Navegação</h4>
|
|
58
|
-
</div>
|
|
59
|
-
</ResizablePanel>
|
|
60
|
-
<ResizableHandle />
|
|
61
|
-
<ResizablePanel defaultSize={75}>
|
|
62
|
-
<ResizablePanelGroup direction="vertical">
|
|
63
|
-
<ResizablePanel defaultSize={70}>
|
|
64
|
-
<div className="h-full p-4">
|
|
65
|
-
<h4 className="font-medium">Editor</h4>
|
|
66
|
-
</div>
|
|
67
|
-
</ResizablePanel>
|
|
68
|
-
<ResizableHandle withHandle />
|
|
69
|
-
<ResizablePanel defaultSize={30}>
|
|
70
|
-
<div className="h-full bg-muted/30 p-4">
|
|
71
|
-
<h4 className="font-medium">Terminal</h4>
|
|
72
|
-
</div>
|
|
73
|
-
</ResizablePanel>
|
|
74
|
-
</ResizablePanelGroup>
|
|
75
|
-
</ResizablePanel>
|
|
76
|
-
</ResizablePanelGroup>`,rt=`// Persistir tamanhos com onLayout
|
|
77
|
-
import { useState, useEffect } from 'react';
|
|
78
|
-
|
|
79
|
-
function PersistentLayout() {
|
|
80
|
-
const [sizes, setSizes] = useState<number[]>(() => {
|
|
81
|
-
const saved = localStorage.getItem('panel-sizes');
|
|
82
|
-
return saved ? JSON.parse(saved) : [25, 75];
|
|
83
|
-
});
|
|
84
|
-
|
|
85
|
-
const handleLayout = (newSizes: number[]) => {
|
|
86
|
-
setSizes(newSizes);
|
|
87
|
-
localStorage.setItem('panel-sizes', JSON.stringify(newSizes));
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
return (
|
|
91
|
-
<ResizablePanelGroup
|
|
92
|
-
direction="horizontal"
|
|
93
|
-
onLayout={handleLayout}
|
|
94
|
-
>
|
|
95
|
-
<ResizablePanel defaultSize={sizes[0]}>
|
|
96
|
-
Painel 1
|
|
97
|
-
</ResizablePanel>
|
|
98
|
-
<ResizableHandle />
|
|
99
|
-
<ResizablePanel defaultSize={sizes[1]}>
|
|
100
|
-
Painel 2
|
|
101
|
-
</ResizablePanel>
|
|
102
|
-
</ResizablePanelGroup>
|
|
103
|
-
);
|
|
104
|
-
}`;function Ge(){return m.jsxs(Ne,{direction:"horizontal",className:"min-h-[200px] border rounded-lg",children:[m.jsx(Z,{defaultSize:30,minSize:20,children:m.jsxs("div",{className:"h-full bg-muted/50 p-4 flex flex-col justify-center",children:[m.jsx("h4",{className:"font-medium text-sm",children:"Sidebar"}),m.jsx("p",{className:"text-xs text-muted-foreground mt-1",children:"Largura mínima 20%"})]})}),m.jsx(ve,{withHandle:!0}),m.jsx(Z,{defaultSize:70,children:m.jsxs("div",{className:"h-full p-4 flex flex-col justify-center",children:[m.jsx("h4",{className:"font-medium text-sm",children:"Conteúdo Principal"}),m.jsx("p",{className:"text-xs text-muted-foreground mt-1",children:"Arraste a alça para redimensionar"})]})})]})}function lt(){return m.jsxs(Ne,{direction:"vertical",className:"min-h-[300px] border rounded-lg",children:[m.jsx(Z,{defaultSize:25,children:m.jsx("div",{className:"h-full bg-muted/50 p-4 flex items-center",children:m.jsx("h4",{className:"font-medium text-sm",children:"Header"})})}),m.jsx(ve,{withHandle:!0}),m.jsx(Z,{defaultSize:50,children:m.jsx("div",{className:"h-full p-4 flex items-center",children:m.jsx("h4",{className:"font-medium text-sm",children:"Conteúdo"})})}),m.jsx(ve,{withHandle:!0}),m.jsx(Z,{defaultSize:25,children:m.jsx("div",{className:"h-full bg-muted/50 p-4 flex items-center",children:m.jsx("h4",{className:"font-medium text-sm",children:"Footer"})})})]})}function st(){return m.jsxs(Ne,{direction:"horizontal",className:"min-h-[350px] border rounded-lg",children:[m.jsx(Z,{defaultSize:25,minSize:15,children:m.jsxs("div",{className:"h-full bg-muted/50 p-4",children:[m.jsx("h4",{className:"font-medium text-sm",children:"Navegação"}),m.jsxs("div",{className:"mt-4 space-y-2",children:[m.jsx("div",{className:"text-xs text-muted-foreground p-2 bg-background rounded",children:"Item 1"}),m.jsx("div",{className:"text-xs text-muted-foreground p-2 bg-background rounded",children:"Item 2"}),m.jsx("div",{className:"text-xs text-muted-foreground p-2 bg-background rounded",children:"Item 3"})]})]})}),m.jsx(ve,{}),m.jsx(Z,{defaultSize:75,children:m.jsxs(Ne,{direction:"vertical",children:[m.jsx(Z,{defaultSize:70,children:m.jsxs("div",{className:"h-full p-4",children:[m.jsx("h4",{className:"font-medium text-sm",children:"Editor"}),m.jsx("div",{className:"mt-2 p-2 bg-muted/30 rounded text-xs font-mono text-muted-foreground",children:'const hello = "world";'})]})}),m.jsx(ve,{withHandle:!0}),m.jsx(Z,{defaultSize:30,children:m.jsxs("div",{className:"h-full bg-muted/30 p-4",children:[m.jsx("h4",{className:"font-medium text-sm",children:"Terminal"}),m.jsx("div",{className:"mt-2 text-xs font-mono text-muted-foreground",children:"$ npm run dev"})]})})]})})]})}function mt(){return m.jsx(En,{title:"Resizable",description:"Painéis redimensionáveis para criar layouts flexíveis e adaptáveis. Baseado em react-resizable-panels.",usage:tt,component:m.jsx(Ge,{}),examples:[{title:"Layout Horizontal",description:"Disposição lado a lado com alça de redimensionamento.",preview:m.jsx(Ge,{}),code:it},{title:"Layout Vertical",description:"Painéis empilhados verticalmente.",preview:m.jsx(lt,{}),code:at},{title:"Layout Aninhado",description:"Combine layouts horizontais e verticais para interfaces complexas como IDEs.",preview:m.jsx(st,{}),code:ot},{title:"Persistência de Layout",description:"Salve o estado do layout no localStorage usando onLayout.",preview:m.jsx(Ge,{}),code:rt}],props:[{name:"direction",type:'"horizontal" | "vertical"',default:'"horizontal"',description:"Direção do redimensionamento dos painéis."},{name:"onLayout",type:"(sizes: number[]) => void",default:"-",description:"Callback chamado quando o layout muda. Útil para persistência."},{name:"defaultSize",type:"number",default:"-",description:"Tamanho inicial do painel em porcentagem (0-100)."},{name:"minSize",type:"number",default:"10",description:"Tamanho mínimo do painel em porcentagem."},{name:"maxSize",type:"number",default:"100",description:"Tamanho máximo do painel em porcentagem."},{name:"collapsible",type:"boolean",default:"false",description:"Permite colapsar o painel completamente."},{name:"collapsedSize",type:"number",default:"0",description:"Tamanho do painel quando colapsado."},{name:"withHandle",type:"boolean",default:"false",description:"Exibe um indicador visual na alça de redimensionamento."}],accessibility:["Suporte completo a navegação por teclado","Alças de redimensionamento focáveis com Tab","Use setas do teclado para redimensionar quando focado na alça","Focus ring visível para acessibilidade"],notes:["ResizablePanelGroup deve envolver todos os ResizablePanel e ResizableHandle.","Use withHandle no ResizableHandle para melhor UX com indicador visual.","minSize e maxSize são valores percentuais (0-100).","A soma de defaultSize dos painéis deve ser 100.","Combine com hooks de resize (useColumnResize, useSidebarResize) para casos específicos."]})}export{mt as default};
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import{r as t,j as e,cW as o}from"./index-BtX5DZqb.js";import{C as d}from"./ComponentDocTemplate-BtOCnlM2.js";import"./ExampleCard-DfuMYM6E.js";import"./TableOfContents-DBMJMbI4.js";function h(){const[a,i]=t.useState("<p>Este é um <strong>texto de exemplo</strong> com <em>formatação</em>.</p>"),[s,n]=t.useState(""),[l,r]=t.useState("");return e.jsx(d,{title:"Rich Text Editor",description:"Editor de texto rico construído com Tiptap, suportando formatação visual, edição de código HTML e preview. Ideal para formulários que precisam de conteúdo formatado.",component:e.jsx("div",{className:"w-full",children:e.jsx(o,{value:a,onChange:i,placeholder:"Escreva algo aqui..."})}),usage:`import { RichTextEditor } from "forlogic-core"
|
|
2
|
-
|
|
3
|
-
const [content, setContent] = useState('')
|
|
4
|
-
|
|
5
|
-
<RichTextEditor
|
|
6
|
-
value={content}
|
|
7
|
-
onChange={setContent}
|
|
8
|
-
placeholder="Escreva algo aqui..."
|
|
9
|
-
/>`,examples:[{title:"Editor Simples",description:"Editor básico sem dica de variável",preview:e.jsx("div",{className:"w-full",children:e.jsx(o,{value:s,onChange:n,showVariableHint:!1,placeholder:"Digite o conteúdo..."})}),code:`<RichTextEditor
|
|
10
|
-
value={content}
|
|
11
|
-
onChange={setContent}
|
|
12
|
-
showVariableHint={false}
|
|
13
|
-
placeholder="Digite o conteúdo..."
|
|
14
|
-
/>`},{title:"Editor Minimal",description:"Apenas o editor visual sem toggle de modos",preview:e.jsx("div",{className:"w-full",children:e.jsx(o,{value:l,onChange:r,showModeToggle:!1,showVariableHint:!1,minHeight:"150px"})}),code:`<RichTextEditor
|
|
15
|
-
value={content}
|
|
16
|
-
onChange={setContent}
|
|
17
|
-
showModeToggle={false}
|
|
18
|
-
showVariableHint={false}
|
|
19
|
-
minHeight="150px"
|
|
20
|
-
/>`},{title:"Editor Desabilitado",description:"Editor em modo somente leitura",preview:e.jsx("div",{className:"w-full",children:e.jsx(o,{value:"<p>Este conteúdo <strong>não pode</strong> ser editado.</p>",onChange:()=>{},disabled:!0,showModeToggle:!1,showVariableHint:!1,minHeight:"100px"})}),code:`<RichTextEditor
|
|
21
|
-
value={content}
|
|
22
|
-
onChange={setContent}
|
|
23
|
-
disabled
|
|
24
|
-
/>`}],props:[{name:"value",type:"string",default:"-",description:"Conteúdo HTML atual do editor."},{name:"onChange",type:"(value: string) => void",default:"-",description:"Callback chamado quando o conteúdo muda."},{name:"disabled",type:"boolean",default:"false",description:"Desabilita a edição."},{name:"placeholder",type:"string",default:'"Escreva o conteúdo aqui..."',description:"Texto placeholder quando vazio."},{name:"minHeight",type:"string",default:'"300px"',description:"Altura mínima do editor."},{name:"showModeToggle",type:"boolean",default:"true",description:"Mostra botões de alternância Visual/Código/Preview."},{name:"showVariableHint",type:"boolean",default:"true",description:"Mostra dica sobre uso de variáveis {{variavel}}."},{name:"className",type:"string",default:"-",description:"Classes CSS adicionais para o container."}],accessibility:["Toolbar com botões acessíveis via teclado","Títulos com atributos title para tooltips","Suporte a atalhos de teclado (Ctrl+B, Ctrl+I, etc.)","Contraste adequado nos estados ativo/inativo","Focus visível em todos os elementos interativos"]})}export{h as RichTextEditorDoc};
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import{j as e,cJ as l,eo as i,aq as t}from"./index-BtX5DZqb.js";import{C as s}from"./ComponentDocTemplate-BtOCnlM2.js";import"./ExampleCard-DfuMYM6E.js";import"./TableOfContents-DBMJMbI4.js";function n(){const o=Array.from({length:50}).map((a,r)=>`Item ${r+1}`);return e.jsx(l,{className:"h-72 w-48 rounded-md border",children:e.jsxs("div",{className:"p-4",children:[e.jsx("h4",{className:"mb-4 text-sm font-medium leading-none",children:"Tags"}),o.map(a=>e.jsxs("div",{children:[e.jsx("div",{className:"text-sm",children:a}),e.jsx(t,{className:"my-2"})]},a))]})})}function c(){const o=Array.from({length:20}).map((a,r)=>`Coluna ${r+1}`);return e.jsxs(l,{className:"w-96 whitespace-nowrap rounded-md border",children:[e.jsx("div",{className:"flex w-max space-x-4 p-4",children:o.map(a=>e.jsxs("div",{className:"w-[150px] shrink-0 rounded-md border p-4",children:[e.jsx("div",{className:"text-sm font-medium",children:a}),e.jsx("div",{className:"text-xs text-muted-foreground",children:"Conteúdo de exemplo"})]},a))}),e.jsx(i,{orientation:"horizontal"})]})}function h(){return e.jsx(s,{title:"ScrollArea",description:"Área de rolagem customizada com scrollbars estilizadas, baseada no Radix UI ScrollArea.",component:e.jsx(n,{}),usage:`import { ScrollArea, ScrollBar } from "forlogic-core"
|
|
2
|
-
|
|
3
|
-
<ScrollArea className="h-72 w-48 rounded-md border">
|
|
4
|
-
<div className="p-4">
|
|
5
|
-
{items.map((item) => (
|
|
6
|
-
<div key={item.id}>{item.content}</div>
|
|
7
|
-
))}
|
|
8
|
-
</div>
|
|
9
|
-
</ScrollArea>
|
|
10
|
-
|
|
11
|
-
// Scroll horizontal:
|
|
12
|
-
<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
|
|
13
|
-
<div className="flex w-max space-x-4 p-4">
|
|
14
|
-
{items.map((item) => (
|
|
15
|
-
<div key={item.id} className="w-[150px] shrink-0">{item.content}</div>
|
|
16
|
-
))}
|
|
17
|
-
</div>
|
|
18
|
-
<ScrollBar orientation="horizontal" />
|
|
19
|
-
</ScrollArea>`,examples:[{title:"Scroll Horizontal",description:'Use ScrollBar com orientation="horizontal" para rolagem lateral.',preview:e.jsx(c,{}),code:`<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
|
|
20
|
-
<div className="flex w-max space-x-4 p-4">
|
|
21
|
-
{items.map((item) => (
|
|
22
|
-
<div key={item.id} className="w-[150px] shrink-0 rounded-md border p-4">
|
|
23
|
-
{item.content}
|
|
24
|
-
</div>
|
|
25
|
-
))}
|
|
26
|
-
</div>
|
|
27
|
-
<ScrollBar orientation="horizontal" />
|
|
28
|
-
</ScrollArea>`}],props:[{name:"className",type:"string",default:"-",description:"Classes CSS para o container root."},{name:"children",type:"ReactNode",default:"-",description:"Conteúdo rolável."},{name:"ScrollBar.orientation",type:'"vertical" | "horizontal"',default:'"vertical"',description:"Direção da scrollbar."}],notes:["O ScrollArea vertical é o padrão — não precisa de ScrollBar explícito.",'Para scroll horizontal, adicione <ScrollBar orientation="horizontal" /> como filho direto.',"Usado internamente pela DesignSystemSidebar, AppSidebar, e outros componentes com overflow.","Mantém bordas arredondadas do container pai (rounded-[inherit])."],accessibility:["Scrollbars customizadas mantêm comportamento nativo de rolagem.","Funciona com teclado, trackpad e touch.","Compatível com leitores de tela."]})}export{h as ScrollAreaDoc};
|