@rojaostudio/ds 1.0.2 → 2.0.0-next.1

package/dist/components/index.js

@@ -1,34 +1,59 @@
 import "../chunk-ORMEWXMH.js";
 import { Alert } from "./alert.js";
+import { AlertDialog } from "./alert-dialog.js";
+import { HoverCard } from "./hover-card.js";
+import { Dialog, DialogClose } from "./dialog.js";
+import { Sheet, SheetClose } from "./sheet.js";
+import { Drawer, DrawerClose } from "./drawer.js";
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator
+} from "./dropdown-menu.js";
+import { ContextMenu, ContextMenuItem, ContextMenuSeparator } from "./context-menu.js";
+import { Command, CommandGroup, CommandItem } from "./command.js";
 import { FilterChip, FilterChipGroup } from "./filter-chip.js";
 import { DataTableHeader, FilterDropdown } from "./data-table-header.js";
-import { Button, buttonVariants } from "./button.js";
-import { Badge } from "./badge.js";
-import { Card, CardHeader, CardTitle, CardBody, CardFooter } from "./card.js";
+import { Button } from "./button.js";
+import { Badge, formatBadgeValue } from "./badge.js";
+import { Status } from "./status.js";
+import { Delta } from "./delta.js";
+import { Progress } from "./progress.js";
+import { StarRating } from "./star-rating.js";
+import { Card, CardHeader, CardContent, CardFooter } from "./card.js";
+import { Tile } from "./tile.js";
+import { Kbd, KbdGroup } from "./kbd.js";
+import { Sparkline } from "./sparkline.js";
+import { Chart } from "./chart.js";
+import { Carousel, CarouselPlaceholder } from "./carousel.js";
+import { Item, ItemGroup } from "./item.js";
+import { Pricing, PricingPlan } from "./pricing.js";
 import { PricingCard } from "./pricing-card.js";
 import { Checkbox } from "./checkbox.js";
-import { Drawer } from "./drawer.js";
+import { CheckboxGroup } from "./checkbox-group.js";
 import { Input } from "./input.js";
-import { Modal } from "./modal.js";
+import { PasswordInput } from "./password-input.js";
 import { Radio } from "./radio.js";
-import { Select } from "./select.js";
+import { RadioGroup } from "./radio-group.js";
+import { Select, SelectItem } from "./select.js";
 import { Spinner } from "./spinner.js";
 import { Skeleton } from "./skeleton.js";
 import { StepProgress } from "./step-progress.js";
-import { EmptyState } from "./empty-state.js";
+import { Empty } from "./empty.js";
 import { InsightCard } from "./insight-card.js";
 import { SectionCard } from "./section-card.js";
 import { SectionHeader } from "./section-header.js";
 import { FloatingStepper } from "./floating-stepper.js";
+import { Stat } from "./stat.js";
 import { SummaryBar } from "./summary-bar.js";
 import { ToggleCard } from "./toggle-card.js";
-import { PixIcon } from "./pix-icon.js";
 import { ToggleCardCompact } from "./toggle-card-compact.js";
 import { ChipInput } from "./chip-input.js";
-import { FormCardHeader } from "./form-card-header.js";
 import { CopyField } from "./copy-field.js";
 import { QRDisplay } from "./qr-display.js";
-import { ChoiceCard } from "./choice-card.js";
+import { ChoiceCard, ChoiceCardGroup } from "./choice-card.js";
 import { OptionTile, OptionTileGrid } from "./option-tile.js";
 import { SelectableCard } from "./selectable-card.js";
 import { ChoicePreviewCard } from "./choice-preview-card.js";
@@ -36,165 +61,256 @@ import { SettingRow } from "./setting-row.js";
 import { SettingsList } from "./settings-list.js";
 import { Dropzone } from "./dropzone.js";
 import { MediaTile } from "./media-tile.js";
-import { ChatBubble } from "./chat-bubble.js";
+import { Attachment } from "./attachment.js";
+import { Bubble } from "./bubble.js";
+import { Marker } from "./marker.js";
+import { Message } from "./message.js";
+import { MessageScroller } from "./message-scroller.js";
+import { Questionnaire } from "./questionnaire.js";
 import { TypingIndicator } from "./typing-indicator.js";
 import { ChoiceCarousel } from "./choice-carousel.js";
-import { PageTabs } from "./page-tabs.js";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs.js";
+import { PageHeader } from "./page-header.js";
+import { Sidebar, SidebarItem, SidebarSection, SidebarSeparator } from "./sidebar.js";
+import { NavigationMenu } from "./navigation-menu.js";
 import { SavingBar } from "./saving-bar.js";
 import { SavingBarProvider, SavingBarRoot, usePageSavingBar } from "./saving-bar-context.js";
-import { FABProvider, FABRoot, useFAB, usePageFAB } from "./fab.js";
-import { Table, TableHead, TableBody, TableRow, Th, Td } from "./table.js";
+import { FAB, FABProvider, FABRoot, useFAB, usePageFAB } from "./fab.js";
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableStatus } from "./table.js";
 import { Textarea } from "./textarea.js";
 import { Toggle } from "./toggle.js";
+import { Switch } from "./switch.js";
 import { Tooltip } from "./tooltip.js";
-import { Toaster, ToastVisual, toast } from "./toaster.js";
-import { Divider } from "./divider.js";
-import { Avatar, AvatarGroup } from "./avatar.js";
+import { Toaster, ToastView, toast, useToast, toastClassName } from "./toast.js";
+import { Separator } from "./separator.js";
+import { Avatar, AvatarGroup, initials } from "./avatar.js";
 import { IconButton } from "./icon-button.js";
-import { Breadcrumb, homeItem } from "./breadcrumb.js";
-import { Pagination } from "./pagination.js";
-import { Label } from "./label.js";
-import { Popover } from "./popover.js";
-import { Menu, MenuItem, MenuSeparator, MenuLabel } from "./menu.js";
-import { Search } from "./search.js";
-import { ToggleGroup } from "./toggle-group.js";
+import { ButtonGroup } from "./button-group.js";
+import { ActionBar } from "./action-bar.js";
+import { FormActions } from "./form-actions.js";
+import { Breadcrumb } from "./breadcrumb.js";
+import { Pagination, pageItems } from "./pagination.js";
+import { Popover, PopoverClose } from "./popover.js";
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group.js";
 import { Accordion, AccordionItem } from "./accordion.js";
 import { Slider } from "./slider.js";
-import { BottomSheet } from "./bottom-sheet.js";
-import { ContextMenu } from "./context-menu.js";
+import { Listbox, ListboxOption } from "./listbox.js";
+import { Calendar } from "./calendar.js";
+import { FileInput, formatFileSize } from "./file-input.js";
+import { NumberInput } from "./number-input.js";
+import { InputOTP } from "./input-otp.js";
 import { Combobox } from "./combobox.js";
 import { DatePicker } from "./date-picker.js";
-import { TimePicker } from "./time-picker.js";
-import { Chip } from "./chips.js";
-import { BlockerCard } from "./blocker-card.js";
-import { PaywallBanner } from "./paywall-banner.js";
-import { PaywallContent, PaywallState, PaywallModal } from "./paywall.js";
+import { TimePicker, parseTime, formatTime } from "./time-picker.js";
+import { Chip } from "./chip.js";
 import { PageSkeleton, CardsSkeleton } from "./page-skeleton.js";
 import { CurrencyInput } from "./currency-input.js";
-import { ColorInput } from "./color-input.js";
-import { ImageUpload } from "./image-upload.js";
-import { ImageCropModal } from "./image-crop-modal.js";
-import { PhoneInput } from "./phone-input.js";
+import { ColorInput, normalizeHex } from "./color-input.js";
 import { RowActions } from "./row-actions.js";
 import { PageShell } from "./page-shell.js";
 import { DangerZone, DangerZoneItem } from "./danger-zone.js";
-import { Themed, themeClass } from "./themed.js";
-import { PhoneFrame } from "./phone-frame.js";
-import { CopilotHint } from "./copilot-hint.js";
-import { Notice } from "./notice.js";
+import { Banner } from "./banner.js";
+import { Benefits, BenefitsItem } from "./benefits.js";
+import { Contact } from "./contact.js";
+import { FAQ } from "./faq.js";
+import { Footer, FooterColumn } from "./footer.js";
+import { Newsletter } from "./newsletter.js";
+import { Testimonial, TestimonialItem } from "./testimonial.js";
+import { TopNavigation } from "./top-navigation.js";
+import { Phone } from "./phone.js";
+import { Browser } from "./browser.js";
+import { GoogleButton } from "./google-button.js";
+import { GoogleSignIn } from "./google-sign-in.js";
+import { GoogleConsent } from "./google-consent.js";
+import { GoogleAccountChooser } from "./google-account-chooser.js";
+import { WhatsAppChat } from "./whatsapp-chat.js";
+import { WhatsAppMessage } from "./whatsapp-message.js";
+import { WhatsAppNotification } from "./whatsapp-notification.js";
+import { WhatsAppTemplate, WhatsAppTemplateButton } from "./whatsapp-template.js";
 export {
   Accordion,
   AccordionItem,
+  ActionBar,
   Alert,
+  AlertDialog,
+  Attachment,
   Avatar,
   AvatarGroup,
   Badge,
-  BlockerCard,
-  BottomSheet,
+  Banner,
+  Benefits,
+  BenefitsItem,
   Breadcrumb,
+  Browser,
+  Bubble,
   Button,
+  ButtonGroup,
+  Calendar,
   Card,
-  CardBody,
+  CardContent,
   CardFooter,
   CardHeader,
-  CardTitle,
   CardsSkeleton,
-  ChatBubble,
+  Carousel,
+  CarouselPlaceholder,
+  Chart,
   Checkbox,
+  CheckboxGroup,
   Chip,
   ChipInput,
   ChoiceCard,
+  ChoiceCardGroup,
   ChoiceCarousel,
   ChoicePreviewCard,
   ColorInput,
   Combobox,
+  Command,
+  CommandGroup,
+  CommandItem,
+  Contact,
   ContextMenu,
-  CopilotHint,
+  ContextMenuItem,
+  ContextMenuSeparator,
   CopyField,
   CurrencyInput,
   DangerZone,
   DangerZoneItem,
   DataTableHeader,
   DatePicker,
-  Divider,
+  Delta,
+  Dialog,
+  DialogClose,
   Drawer,
+  DrawerClose,
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
   Dropzone,
-  EmptyState,
+  Empty,
+  FAB,
   FABProvider,
   FABRoot,
+  FAQ,
+  FileInput,
   FilterChip,
   FilterChipGroup,
   FilterDropdown,
   FloatingStepper,
-  FormCardHeader,
+  Footer,
+  FooterColumn,
+  FormActions,
+  GoogleAccountChooser,
+  GoogleButton,
+  GoogleConsent,
+  GoogleSignIn,
+  HoverCard,
   IconButton,
-  ImageCropModal,
-  ImageUpload,
   Input,
+  InputOTP,
   InsightCard,
-  Label,
+  Item,
+  ItemGroup,
+  Kbd,
+  KbdGroup,
+  Listbox,
+  ListboxOption,
+  Marker,
   MediaTile,
-  Menu,
-  MenuItem,
-  MenuLabel,
-  MenuSeparator,
-  Modal,
-  Notice,
+  Message,
+  MessageScroller,
+  NavigationMenu,
+  Newsletter,
+  NumberInput,
   OptionTile,
   OptionTileGrid,
+  PageHeader,
   PageShell,
   PageSkeleton,
-  PageTabs,
   Pagination,
-  PaywallBanner,
-  PaywallContent,
-  PaywallModal,
-  PaywallState,
-  PhoneFrame,
-  PhoneInput,
-  PixIcon,
+  PasswordInput,
+  Phone,
   Popover,
+  PopoverClose,
+  Pricing,
   PricingCard,
+  PricingPlan,
+  Progress,
   QRDisplay,
+  Questionnaire,
   Radio,
+  RadioGroup,
   RowActions,
   SavingBar,
   SavingBarProvider,
   SavingBarRoot,
-  Search,
   SectionCard,
   SectionHeader,
   Select,
+  SelectItem,
   SelectableCard,
+  Separator,
   SettingRow,
   SettingsList,
+  Sheet,
+  SheetClose,
+  Sidebar,
+  SidebarItem,
+  SidebarSection,
+  SidebarSeparator,
   Skeleton,
   Slider,
+  Sparkline,
   Spinner,
+  StarRating,
+  Stat,
+  Status,
   StepProgress,
   SummaryBar,
+  Switch,
   Table,
   TableBody,
+  TableCell,
   TableHead,
+  TableHeader,
   TableRow,
-  Td,
+  TableStatus,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Testimonial,
+  TestimonialItem,
   Textarea,
-  Th,
-  Themed,
+  Tile,
   TimePicker,
-  ToastVisual,
+  ToastView,
   Toaster,
   Toggle,
   ToggleCard,
   ToggleCardCompact,
   ToggleGroup,
+  ToggleGroupItem,
   Tooltip,
+  TopNavigation,
   TypingIndicator,
-  buttonVariants,
-  homeItem,
-  themeClass,
+  WhatsAppChat,
+  WhatsAppMessage,
+  WhatsAppNotification,
+  WhatsAppTemplate,
+  WhatsAppTemplateButton,
+  formatBadgeValue,
+  formatFileSize,
+  formatTime,
+  initials,
+  normalizeHex,
+  pageItems,
+  parseTime,
   toast,
+  toastClassName,
   useFAB,
   usePageFAB,
-  usePageSavingBar
+  usePageSavingBar,
+  useToast
 };

package/dist/components/input-otp.d.ts

@@ -0,0 +1,35 @@
+import * as react from 'react';
+import { ComponentPropsWithRef, ReactNode } from 'react';
+
+type InputOTPLength = 4 | 6;
+interface InputOTPProps extends Omit<ComponentPropsWithRef<'input'>, 'type' | 'maxLength' | 'pattern' | 'value' | 'defaultValue' | 'children' | 'size'> {
+    /** The field's name, such as "Código de verificação" (Figma: `showLabel` + `label`). Without it, pass aria-label. */
+    label?: ReactNode;
+    /** 4 or 6 digits (Figma: `length`). */
+    length?: InputOTPLength;
+    /** A dash in the middle of the 6-digit code (Figma: `showSeparator`). On by default; a 4-digit code has none. */
+    showSeparator?: boolean;
+    /** Where the code went, without the full address: a masked e-mail or phone (Figma: `showHint` + `hint`). */
+    hint?: ReactNode;
+    /** The code was refused (Figma: `error`): the boxes turn red. The digits stay, so the person can fix one. */
+    error?: boolean;
+    /** What went wrong and what to do. Replaces the hint and turns the error state on. */
+    errorMessage?: ReactNode;
+    /** Controlled: the digits typed so far. */
+    value?: string;
+    /** Uncontrolled: the digits at first. */
+    defaultValue?: string;
+    /** Called with the digits on every change (letters are dropped). */
+    onValueChange?: (value: string) => void;
+    /** Called once all the digits are in. */
+    onComplete?: (value: string) => void;
+}
+/**
+ * InputOTP — Figma [RDS] Forms/InputOTP. The verification code: one box per digit. One real
+ * <input autocomplete="one-time-code" inputmode="numeric"> lies over the boxes, so pasting the whole code and the
+ * SMS autofill just work, each digit moves on by itself, and Backspace takes the last one back. Disabled is the
+ * native one. Styles: input-otp.css.
+ */
+declare function InputOTP({ label, length, showSeparator, hint, error, errorMessage, value, defaultValue, onValueChange, onComplete, id, disabled, className, style, onChange, onFocus, onBlur, onSelect, ...input }: InputOTPProps): react.JSX.Element;
+
+export { InputOTP, type InputOTPLength, type InputOTPProps };

package/dist/components/input-otp.js

@@ -0,0 +1,119 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { hasContent, useFieldIds, warnIfUnlabelled } from "./internal/field.js";
+function InputOTP(_a) {
+  var _b = _a, {
+    label,
+    length = 6,
+    showSeparator = true,
+    hint,
+    error,
+    errorMessage,
+    value,
+    defaultValue = "",
+    onValueChange,
+    onComplete,
+    id,
+    disabled,
+    className,
+    style,
+    onChange,
+    onFocus,
+    onBlur,
+    onSelect
+  } = _b, input = __objRest(_b, [
+    "label",
+    "length",
+    "showSeparator",
+    "hint",
+    "error",
+    "errorMessage",
+    "value",
+    "defaultValue",
+    "onValueChange",
+    "onComplete",
+    "id",
+    "disabled",
+    "className",
+    "style",
+    "onChange",
+    "onFocus",
+    "onBlur",
+    "onSelect"
+  ]);
+  warnIfUnlabelled("InputOTP", label, input["aria-label"], input["aria-labelledby"]);
+  const { controlId, hintId, errorId, invalid, describedBy } = useFieldIds(id, hint, error, errorMessage);
+  const [own, setOwn] = useState(defaultValue.replace(/\D/g, ""));
+  const [focused, setFocused] = useState(false);
+  const code = (value != null ? value : own).slice(0, length);
+  const split = showSeparator && length === 6 ? 3 : -1;
+  const active = focused ? Math.min(code.length, length - 1) : -1;
+  function change(event) {
+    const digits = event.target.value.replace(/\D/g, "").slice(0, length);
+    setOwn(digits);
+    onChange == null ? void 0 : onChange(event);
+    onValueChange == null ? void 0 : onValueChange(digits);
+    if (digits.length === length && digits !== code) onComplete == null ? void 0 : onComplete(digits);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["rds-otp", invalid && "rds-otp--error", disabled && "rds-otp--disabled", className].filter(Boolean).join(" "),
+      style,
+      children: [
+        hasContent(label) && /* @__PURE__ */ jsx("label", { htmlFor: controlId, className: "rds-otp__label", children: label }),
+        /* @__PURE__ */ jsxs("div", { className: "rds-otp__slots", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            __spreadProps(__spreadValues({}, input), {
+              id: controlId,
+              className: "rds-otp__input",
+              type: "text",
+              inputMode: "numeric",
+              autoComplete: "one-time-code",
+              pattern: `\\d{${length}}`,
+              disabled,
+              "aria-invalid": invalid || void 0,
+              "aria-describedby": [describedBy, input["aria-describedby"]].filter(Boolean).join(" ") || void 0,
+              value: code,
+              onChange: change,
+              onFocus: (event) => {
+                setFocused(true);
+                onFocus == null ? void 0 : onFocus(event);
+              },
+              onBlur: (event) => {
+                setFocused(false);
+                onBlur == null ? void 0 : onBlur(event);
+              },
+              onSelect: (event) => {
+                const target = event.currentTarget;
+                if (target.selectionStart !== target.value.length) target.setSelectionRange(target.value.length, target.value.length);
+                onSelect == null ? void 0 : onSelect(event);
+              }
+            })
+          ),
+          Array.from({ length }, (_, i) => {
+            var _a2;
+            return /* @__PURE__ */ jsxs("span", { className: "rds-otp__group", "aria-hidden": "true", children: [
+              i === split && /* @__PURE__ */ jsx("span", { className: "rds-otp__separator", children: "\u2013" }),
+              /* @__PURE__ */ jsxs("span", { className: ["rds-otp__slot", i === active && "rds-otp__slot--active"].filter(Boolean).join(" "), children: [
+                (_a2 = code[i]) != null ? _a2 : "",
+                i === active && !code[i] && /* @__PURE__ */ jsx("span", { className: "rds-otp__caret" })
+              ] })
+            ] }, i);
+          })
+        ] }),
+        errorId ? /* @__PURE__ */ jsx("span", { id: errorId, className: "rds-otp__support rds-otp__error-message", children: errorMessage }) : hintId && /* @__PURE__ */ jsx("span", { id: hintId, className: "rds-otp__support rds-otp__hint", children: hint })
+      ]
+    }
+  );
+}
+export {
+  InputOTP
+};

package/dist/components/input.d.ts

@@ -1,25 +1,31 @@
 import * as react from 'react';
-import { InputHTMLAttributes, ReactNode } from 'react';
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { FieldTextProps } from './internal/field.js';
+export { FieldLabelPosition } from './internal/field.js';
 
-type InputSize = 'sm' | 'md' | 'lg';
-interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
-    label?: string;
-    helper?: string;
-    error?: string;
-    size?: InputSize;
-    required?: boolean;
-    optional?: boolean;
-    iconLeft?: ReactNode;
-    iconRight?: ReactNode;
+interface InputProps extends FieldTextProps, Omit<ComponentPropsWithRef<'input'>, 'prefix' | 'children' | 'size'> {
+    /** An icon on the left, such as a magnifier on a search (Figma: `showLeadingIcon` + `leadingIcon`). Decorative. */
+    leadingIcon?: ReactNode;
+    /** Text before the value, such as R$ (Figma: `showPrefix` + `prefix`). Not read with the value: if it matters, say it in the label. */
     prefix?: ReactNode;
+    /** Text after the value, such as kg (Figma: `showSuffix` + `suffix`). */
     suffix?: ReactNode;
+    /** A decorative icon on the right (Figma: `showTrailingIcon` + `trailingIcon`). Hidden while the clear button shows. */
+    trailingIcon?: ReactNode;
+    /** A clear button on the right while there is a value (Figma: `showClear`). Focus goes back to the field. */
     clearable?: boolean;
+    /** Called after the clear button empties the field (onChange fires too, with an empty value). */
     onClear?: () => void;
-    /** Em type="password", mostra botão de revelar. default = true. */
-    passwordReveal?: boolean;
-    /** Conta caracteres (mostra "X/Y" se maxLength definido). */
-    showCount?: boolean;
+    /** The clear button's accessible name. */
+    clearLabel?: string;
 }
-declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+/**
+ * Input — Figma [RDS] Forms/Input. A one-line text field with its own label, hint and error.
+ * email, tel, url, number and search are this Input with the right `type` and `autoComplete`; a search
+ * is a leading magnifier plus `clearable`, a currency a `prefix`. The value is the native one
+ * (Figma: `text`): `value` + `onChange`, or `defaultValue`. Disabled is the native one. Styles: input.css
+ * and internal/field.css.
+ */
+declare function Input({ label, labelPosition, hint, error, errorMessage, required, leadingIcon, prefix, suffix, trailingIcon, clearable, onClear, clearLabel, id, disabled, className, style, onChange, ref, ...input }: InputProps): react.JSX.Element;
 
-export { Input, type InputProps, type InputSize };
+export { Input, type InputProps };