@dust-tt/sparkle 0.2.263 → 0.2.265-rc-1

package/dist/esm/stories/Label.stories.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-label").LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+};
+export default meta;
+export declare const LabelDemo: () => React.JSX.Element;
+//# sourceMappingURL=Label.stories.d.ts.map

package/dist/esm/stories/Label.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Label.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,QAAA,MAAM,IAAI;;;CAGoB,CAAC;AAE/B,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,SAAS,yBAYrB,CAAC"}

package/dist/esm/stories/Label.stories.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { Checkbox, Label } from "../index_with_tw_base";
+var meta = {
+    title: "Primitives/Label",
+    component: Label,
+};
+export default meta;
+export var LabelDemo = function () {
+    var handleChange = function () {
+        // This function intentionally left blank
+    };
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "s-flex s-items-center s-space-x-2" },
+            React.createElement(Checkbox, { onChange: handleChange }),
+            React.createElement(Label, { htmlFor: "terms" }, "Accept terms and conditions"))));
+};
+//# sourceMappingURL=Label.stories.js.map

package/dist/esm/stories/Label.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.stories.js","sourceRoot":"","sources":["../../../src/stories/Label.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAExD,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,KAAK;CACY,CAAC;AAE/B,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,SAAS,GAAG;IACvB,IAAM,YAAY,GAAG;QACnB,yCAAyC;IAC3C,CAAC,CAAC;IACF,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,mCAAmC;YAChD,oBAAC,QAAQ,IAAC,QAAQ,EAAE,YAAY,GAAI;YACpC,oBAAC,KAAK,IAAC,OAAO,EAAC,OAAO,kCAAoC,CACtD,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/stories/Modal.stories.js

@@ -22,7 +22,7 @@ export var ModalExample = function () {
             React.createElement("div", { className: "s-flex s-flex-col s-gap-3" },
                 React.createElement("div", { className: "s-mt-4 s-flex-none s-text-left" }, "I'm the modal content"),
                 React.createElement("div", { className: "s-w-64" },
-                    React.createElement(Input, { placeholder: "Input placeholder", className: "s-mt-4", value: inputValue, onChange: setInputValue, name: "input-name" })))),
+                    React.createElement(Input, { placeholder: "Input placeholder", className: "s-mt-4", value: inputValue, onChange: function (e) { return setInputValue(e.target.value); }, name: "input-name" })))),
         React.createElement(Modal, { isOpen: isOpenWithActionAndChange, onClose: function () { return setIsOpenWithActionAndChange(false); }, action: {
                 labelVisible: true,
                 label: "An action",

package/dist/esm/stories/Modal.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../src/stories/Modal.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../src/stories/Modal.stories.tsx"],"names":[],"mappings":"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"}

package/dist/sparkle.css

@@ -1876,6 +1876,11 @@ select {
   border-color: rgb(241 245 249 / var(--tw-border-opacity));
 }
 
+.s-border-border-dark {
+  --tw-border-opacity: 1;
+  border-color: rgb(226 232 240 / var(--tw-border-opacity));
+}
+
 .s-border-cyan-100 {
   --tw-border-opacity: 1;
   border-color: rgb(207 250 254 / var(--tw-border-opacity));
@@ -3371,16 +3376,6 @@ select {
   padding-right: 1.5rem;
 }
 
-.s-py-0 {
-  padding-top: 0px;
-  padding-bottom: 0px;
-}
-
-.s-py-0\.5 {
-  padding-top: 0.125rem;
-  padding-bottom: 0.125rem;
-}
-
 .s-py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -3436,14 +3431,6 @@ select {
   padding-bottom: 2rem;
 }
 
-.s-pl-0 {
-  padding-left: 0px;
-}
-
-.s-pl-0\.5 {
-  padding-left: 0.125rem;
-}
-
 .s-pl-1 {
   padding-left: 0.25rem;
 }
@@ -3504,10 +3491,6 @@ select {
   padding-right: 1rem;
 }
 
-.s-pr-5 {
-  padding-right: 1.25rem;
-}
-
 .s-pr-6 {
   padding-right: 1.5rem;
 }
@@ -3806,6 +3789,11 @@ select {
   color: rgb(2 44 34 / var(--tw-text-opacity));
 }
 
+.s-text-foreground {
+  --tw-text-opacity: 1;
+  color: rgb(2 6 23 / var(--tw-text-opacity));
+}
+
 .s-text-fuchsia-700 {
   --tw-text-opacity: 1;
   color: rgb(162 28 175 / var(--tw-text-opacity));
@@ -4511,6 +4499,38 @@ select {
   }
 }
 
+.file\:s-border-0::file-selector-button {
+  border-width: 0px;
+}
+
+.file\:s-bg-transparent::file-selector-button {
+  background-color: transparent;
+}
+
+.file\:s-text-sm::file-selector-button {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.file\:s-font-medium::file-selector-button {
+  font-weight: 500;
+}
+
+.file\:s-text-foreground::file-selector-button {
+  --tw-text-opacity: 1;
+  color: rgb(2 6 23 / var(--tw-text-opacity));
+}
+
+.placeholder\:s-text-muted-foreground::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
+.placeholder\:s-text-muted-foreground::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
 .first\:s-pt-0:first-child {
   padding-top: 0px;
 }
@@ -4731,6 +4751,26 @@ select {
   --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity));
 }
 
+.focus-visible\:s-border-primary-400:focus-visible {
+  --tw-border-opacity: 1;
+  border-color: rgb(148 163 184 / var(--tw-border-opacity));
+}
+
+.focus-visible\:s-outline-none:focus-visible {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus-visible\:s-ring-2:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus-visible\:s-ring-offset-2:focus-visible {
+  --tw-ring-offset-width: 2px;
+}
+
 .active\:s-scale-100:active {
   --tw-scale-x: 1;
   --tw-scale-y: 1;
@@ -4848,6 +4888,19 @@ select {
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
 
+.disabled\:s-cursor-not-allowed:disabled {
+  cursor: not-allowed;
+}
+
+.disabled\:s-text-muted-foreground:disabled {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
+.disabled\:s-opacity-50:disabled {
+  opacity: 0.5;
+}
+
 .s-group\/col:hover .group-hover\/col\:s-text-action-400 {
   --tw-text-opacity: 1;
   color: rgb(96 165 250 / var(--tw-text-opacity));
@@ -4930,6 +4983,14 @@ select {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.s-peer:disabled ~ .peer-disabled\:s-cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+.s-peer:disabled ~ .peer-disabled\:s-opacity-70 {
+  opacity: 0.7;
+}
+
 .data-\[disabled\]\:s-pointer-events-none[data-disabled] {
   pointer-events: none;
 }
@@ -5208,16 +5269,6 @@ select {
   color: rgb(252 165 165 / var(--tw-text-opacity));
 }
 
-:is(.s-dark .dark\:s-placeholder-element-700-dark)::-moz-placeholder {
-  --tw-placeholder-opacity: 1;
-  color: rgb(203 213 225 / var(--tw-placeholder-opacity));
-}
-
-:is(.s-dark .dark\:s-placeholder-element-700-dark)::placeholder {
-  --tw-placeholder-opacity: 1;
-  color: rgb(203 213 225 / var(--tw-placeholder-opacity));
-}
-
 :is(.s-dark .dark\:s-ring-structure-300-dark) {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(71 85 105 / var(--tw-ring-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.263",
+  "version": "0.2.265-rc-1",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",
@@ -95,6 +95,7 @@
     "@emoji-mart/react": "^1.1.1",
     "@headlessui/react": "^1.7.19",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",

package/src/components/Button.tsx

@@ -10,7 +10,6 @@ import { Tooltip } from "@sparkle/components/Tooltip";
 import { ChevronDownIcon, ChevronUpDownIcon } from "@sparkle/icons/solid";
 import { classNames } from "@sparkle/lib/utils";
 
-import { Avatar } from "./Avatar";
 import { Icon, IconProps } from "./Icon";
 
 const BUTTON_VARIANTS = [
@@ -19,7 +18,6 @@ const BUTTON_VARIANTS = [
   "secondary",
   "secondaryWarning",
   "tertiary",
-  "avatar",
 ] as const;
 
 export type ButtonVariantType = (typeof BUTTON_VARIANTS)[number];
@@ -34,31 +32,23 @@ export type ButtonProps = {
   label: string;
   labelVisible?: boolean;
   icon?: ComponentType;
-  avatar?: string;
   className?: string;
   tooltipPosition?: React.ComponentProps<typeof Tooltip>["side"];
   disabledTooltip?: boolean;
 };
 
 const textClasses = {
-  xs: "s-text-xs s-font-semibold",
-  sm: "s-text-sm s-font-semibold",
-  md: "s-text-base s-font-bold",
-  lg: "s-text-lg s-font-bold",
+  xs: "s-text-xs s-font-semibold s-rounded-lg",
+  sm: "s-text-sm s-font-semibold s-rounded-xl",
+  md: "s-text-base s-font-bold s-rounded-2xl",
+  lg: "s-text-lg s-font-bold s-rounded-3xl",
 };
 
 const sizeClasses = {
-  xs: "s-gap-x-1 s-px-3 s-h-7",
-  sm: "s-gap-x-1 s-px-4 s-h-9",
-  md: "s-gap-x-1.5 s-px-5 s-h-12",
-  lg: "s-gap-x-3 s-px-6 s-h-16",
-};
-
-const sizeAvatarClasses = {
-  xs: "s-gap-x-1 s-pl-0.5 s-pr-3 s-py-0.5",
-  sm: "s-gap-x-1 s-pl-0.5 s-pr-4 s-py-0.5",
-  md: "s-gap-x-1.5 s-pl-1 s-pr-5 s-py-1",
-  lg: "s-gap-x-2 s-pl-0 s-pr-6 s-py-0",
+  xs: "s-gap-x-1 s-px-2 s-h-7",
+  sm: "s-gap-x-1 s-px-3 s-h-9",
+  md: "s-gap-x-1.5 s-px-4 s-h-12",
+  lg: "s-gap-x-3 s-px-5 s-h-16",
 };
 
 const containerClasses = {
@@ -142,23 +132,6 @@ const variantClasses = {
         "dark:s-text-element-600-dark dark:s-border-structure-100-dark dark:s-bg-structure-200-dark",
     },
   },
-  avatar: {
-    base: "s-text-element-800 s-border-structure-200 s-bg-structure-0",
-    hover:
-      "hover:s-bg-action-50 hover:s-text-action-500 hover:s-border-action-200",
-    active:
-      "active:s-bg-action-100 active:s-text-action-600 active:s-border-action-500",
-    disabled: "s-text-element-500 s-border-structure-200 s-bg-structure-0",
-    dark: {
-      base: "dark:s-text-element-700-dark dark:s-border-structure-300-dark dark:s-bg-structure-100-dark",
-      hover:
-        "dark:hover:s-bg-action-50-dark dark:hover:s-border-action-300-dark",
-      active:
-        "dark:active:s-bg-action-100-dark dark:active:s-border-action-500-dark",
-      disabled:
-        "dark:s-text-element-600-dark dark:s-border-structure-100-dark dark:s-bg-structure-200-dark",
-    },
-  },
 };
 
 const transitionClasses =
@@ -178,13 +151,12 @@ export function Button({
   icon,
   className = "",
   tooltipPosition,
-  hasMagnifying = true,
+  hasMagnifying = false,
   disabledTooltip = false,
-  avatar,
 }: ButtonProps) {
   let buttonClasses = classNames(
-    "s-inline-flex s-items-center s-border s-scale-100 s-box-border s-whitespace-nowrap s-rounded-full",
-    !avatar ? sizeClasses[size] : sizeAvatarClasses[size],
+    "s-inline-flex s-items-center s-border s-scale-100 s-box-border s-whitespace-nowrap",
+    sizeClasses[size],
     textClasses[size],
     className
   );
@@ -220,7 +192,6 @@ export function Button({
       aria-label={label}
     >
       {icon && <Icon visual={icon} size={size as IconProps["size"]} />}
-      {avatar && <Avatar size={size} visual={avatar} isRounded />}
       {labelVisible ? (
         <div className={classNames("s-truncate", finalContainerClasses)}>
           {label}

package/src/components/Input.tsx

@@ -1,88 +1,54 @@
 import React, { forwardRef } from "react";
 
-import { classNames } from "@sparkle/lib/utils";
+import { cn } from "@sparkle/lib/utils";
 
-const sizeInputClasses = {
-  sm: "s-text-base s-rounded-md s-py-1.5 s-pl-4 s-pr-8",
-  md: "s-text-lg s-rounded-lg s-py-2 s-pl-4 s-pr-10",
-};
+import { Label } from "./Label";
 
-type InputProps = {
-  placeholder: string;
-  size?: "sm" | "md";
-  value: string | null;
-  onChange?: (value: string) => void;
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
   error?: string | null;
   showErrorLabel?: boolean;
-  name: string;
-  isPassword?: boolean;
-  disabled?: boolean;
   className?: string;
   label?: string;
-  maxLength?: number;
-};
+}
+
+const inputStyleClasses = cn(
+  "s-text-sm s-bg-background s-rounded-xl s-border s-border-border-dark s-flex s-h-9 s-w-full s-px-3 s-py-1.5 ",
+  "file:s-border-0 file:s-bg-transparent file:s-text-sm file:s-font-medium file:s-text-foreground",
+  "placeholder:s-text-muted-foreground",
+  "focus-visible:s-outline-none focus-visible:s-ring-2 focus-visible:s-ring-offset-2 focus-visible:s-ring-ring focus-visible:s-border-primary-400",
+  "disabled:s-cursor-not-allowed disabled:s-opacity-50 disabled:s-text-muted-foreground"
+);
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      placeholder,
-      value,
-      size = "sm",
-      onChange,
-      error,
-      showErrorLabel = false,
-      name,
-      isPassword = false,
-      disabled = false,
-      className = "",
-      label,
-      maxLength,
-    },
-    ref
-  ) => {
+  ({ className, error, label, showErrorLabel = false, ...props }, ref) => {
     return (
       <div className="s-flex s-flex-col s-gap-1 s-p-px">
         {label && (
-          <label
-            htmlFor={name}
-            className="s-pb-1 s-text-sm s-font-medium s-text-element-700 dark:s-text-element-700-dark"
+          <Label
+            htmlFor={props.name}
+            className="s-pb-1 s-text-element-700 dark:s-text-element-700-dark"
           >
             {label}
-          </label>
+          </Label>
         )}
         <input
           ref={ref}
-          type={isPassword ? "password" : "text"}
-          name={name}
-          id={name}
-          maxLength={maxLength}
-          className={classNames(
-            "s-w-full s-border-0 s-outline-none s-ring-1 focus:s-outline-none focus:s-ring-2",
-            "s-bg-structure-50 s-placeholder-element-700",
-            "dark:s-bg-structure-50-dark dark:s-placeholder-element-700-dark",
-            sizeInputClasses[size],
-            "s-transition-all s-duration-300 s-ease-out",
-            className ?? "",
+          className={cn(
+            inputStyleClasses,
+            className,
             !error
-              ? classNames(
+              ? cn(
                   "s-ring-structure-200 focus:s-ring-action-300",
                   "dark:s-ring-structure-300-dark dark:focus:s-ring-action-300-dark"
                 )
-              : classNames(
+              : cn(
                   "s-ring-warning-200 focus:s-ring-warning-300",
                   "dark:s-ring-warning-200-dark dark:focus:s-ring-warning-300-dark"
-                ),
-            disabled
-              ? "s-text-element-500 hover:s-cursor-not-allowed"
-              : "s-text-element-900 dark:s-text-element-800-dark"
+                )
           )}
-          placeholder={placeholder}
-          value={value ?? ""}
-          onChange={(e) => {
-            onChange?.(e.target.value);
-          }}
-          data-1p-ignore={!isPassword}
-          disabled={disabled}
+          data-1p-ignore={props.type !== "password"}
+          {...props}
         />
         <div className="s-ml-2 s-text-sm s-text-warning-500">
           {showErrorLabel && error ? error : null}

package/src/components/Label.tsx

@@ -0,0 +1,23 @@
+import * as LabelPrimitive from "@radix-ui/react-label";
+import * as React from "react";
+
+import { cn } from "@sparkle/lib/utils";
+
+const labelVariants = cn(
+  "s-text-sm s-font-medium s-text-foreground s-leading-none",
+  "peer-disabled:s-cursor-not-allowed peer-disabled:s-opacity-70"
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants, className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/src/components/Searchbar.tsx

@@ -7,9 +7,9 @@ import { classNames } from "@sparkle/lib/utils";
 import { IconButton } from "./IconButton";
 
 const sizeClasses = {
-  xs: "s-text-xs s-h-[26px] s-pl-3 s-pr-6 s-pt-1.5",
-  sm: "s-text-sm s-h-[34px] s-pl-4 s-pr-8 s-pt-1.5",
-  md: "s-text-base s-h-[46px] s-pl-6 s-pr-10 s-pt-1.5",
+  xs: "s-text-xs s-h-[26px] s-pl-3 s-pr-6 s-pt-1.5 s-rounded-lg",
+  sm: "s-text-sm s-h-[34px] s-pl-4 s-pr-8 s-pt-1.5 s-rounded-xl",
+  md: "s-text-base s-h-[46px] s-pl-6 s-pr-10 s-pt-1.5 s-rounded-2xl",
 };
 const iconClasses = {
   xs: "s-pr-2",
@@ -55,7 +55,7 @@ export const Searchbar = forwardRef<HTMLInputElement, SearchbarProps>(
           ref={ref}
           className={classNames(
             "s-border-0 s-outline-none s-ring-1 s-ring-structure-200 focus:s-outline-none focus:s-ring-2",
-            "s-w-full s-rounded-full s-bg-structure-50 s-font-normal s-placeholder-element-600",
+            "s-w-full s-bg-structure-50 s-font-normal s-placeholder-element-600",
             "s-ring-structure-200 focus:s-ring-action-300",
             "dark:s-ring-structure-300-dark dark:focus:s-ring-action-300-dark",
             "s-transition-all s-duration-300 s-ease-out",

package/src/components/index.ts

@@ -21,7 +21,7 @@ export { default as DropzoneOverlay } from "./DropzoneOverlay";
 export { ElementDialog } from "./ElementDialog";
 export { ElementModal } from "./ElementModal";
 export type { EmojiMartData } from "./EmojiPicker";
-export { DataEmojiMart,EmojiPicker } from "./EmojiPicker";
+export { DataEmojiMart, EmojiPicker } from "./EmojiPicker";
 export { FilterChips } from "./FilterChips";
 export { Div3D, Hover3D } from "./Hover3D";
 export { Hoverable } from "./Hoverable";
@@ -30,6 +30,7 @@ export { IconButton } from "./IconButton";
 export { IconToggleButton } from "./IconToggleButton";
 export { Input } from "./Input";
 export { Item } from "./Item";
+export { Label } from "./Label";
 export { Markdown } from "./Markdown";
 export { Modal } from "./Modal";
 export {
@@ -53,7 +54,12 @@ export { Notification } from "./Notification";
 export { Page } from "./Page";
 export { PaginatedCitationsGrid } from "./PaginatedCitationsGrid";
 export { Pagination } from "./Pagination";
-export { Popover, PopoverContent, PopoverRoot, PopoverTrigger } from "./Popover";
+export {
+  Popover,
+  PopoverContent,
+  PopoverRoot,
+  PopoverTrigger,
+} from "./Popover";
 export { Popup } from "./Popup";
 export { PriceTable } from "./PriceTable";
 export { RadioButton } from "./RadioButton";
@@ -71,4 +77,4 @@ export {
   TooltipTrigger,
 } from "./Tooltip";
 export { Tree } from "./Tree";
-export { ZoomableImageCitationWrapper } from "./ZoomableImageCitationWrapper";
+export { ZoomableImageCitationWrapper } from "./ZoomableImageCitationWrapper";

package/src/stories/Button.stories.tsx

@@ -256,53 +256,6 @@ export const ButtonExamples = () => (
         disabled
       />
     </div>
-    <div className="s-flex s-items-center s-gap-4">
-      <Button
-        variant="avatar"
-        size="lg"
-        label="@soupinou"
-        avatar="https://dust.tt/static/droidavatar/Droid_Indigo_7.jpg"
-      />
-      <Button
-        variant="avatar"
-        size="md"
-        label="@soupinou"
-        avatar="https://dust.tt/static/droidavatar/Droid_Indigo_7.jpg"
-      />
-      <Button
-        variant="avatar"
-        size="md"
-        label="@soupinou"
-        avatar="https://dust.tt/static/droidavatar/Droid_Indigo_7.jpg"
-        disabled={true}
-      />
-      <Button
-        variant="avatar"
-        size="sm"
-        label="@soupinou"
-        avatar="https://dust.tt/static/droidavatar/Droid_Indigo_7.jpg"
-      />
-      <Button
-        variant="avatar"
-        size="sm"
-        label="@soupinou"
-        avatar="https://dust.tt/static/droidavatar/Droid_Indigo_7.jpg"
-        disabled
-      />
-      <Button
-        variant="avatar"
-        size="xs"
-        label="@soupinou"
-        avatar="https://dust.tt/static/droidavatar/Droid_Indigo_7.jpg"
-      />
-      <Button
-        variant="avatar"
-        size="xs"
-        label="@soupinou"
-        avatar="https://dust.tt/static/droidavatar/Droid_Indigo_7.jpg"
-        disabled
-      />
-    </div>
   </div>
 );
 

package/src/stories/DataTable.stories.tsx

@@ -200,7 +200,7 @@ export const DataTableExample = () => {
         name="filter"
         placeholder="Filter"
         value={filter}
-        onChange={(v) => setFilter(v)}
+        onChange={(e) => setFilter(e.target.value)}
       />
       <DataTable
         data={data}
@@ -224,7 +224,7 @@ export const DataTableClientSideSortingExample = () => {
         name="filter"
         placeholder="Filter"
         value={filter}
-        onChange={(v) => setFilter(v)}
+        onChange={(e) => setFilter(e.target.value)}
       />
       <DataTable
         className="s-w-full s-max-w-4xl s-overflow-x-auto"
@@ -253,7 +253,7 @@ export const DataTablePaginatedExample = () => {
         name="filter"
         placeholder="Filter"
         value={filter}
-        onChange={(v) => setFilter(v)}
+        onChange={(e) => setFilter(e.target.value)}
       />
       <DataTable
         className="s-w-full s-max-w-4xl s-overflow-x-auto"
@@ -303,7 +303,7 @@ export const DataTablePaginatedServerSideExample = () => {
         name="filter"
         placeholder="Filter"
         value={filter}
-        onChange={(v) => setFilter(v)}
+        onChange={(e) => setFilter(e.target.value)}
       />
       <DataTable
         className="s-w-full s-max-w-4xl s-overflow-x-auto"