agroptima-design-system 0.33.2-beta.0 → 0.33.2-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.33.2-beta.0",
+  "version": "0.33.2-beta.2",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",
@@ -15,6 +15,7 @@
     "publish:beta": "npm publish --tag beta"
   },
   "dependencies": {
+    "agroptima-design-system": "^0.33.2-beta.0",
     "next": "^15.1.0",
     "react": "^19.0.0",
     "react-day-picker": "^9.5.0",

package/src/atoms/DatePicker/DateRangePicker.tsx

@@ -29,6 +29,7 @@ export type DateRangePickerProps = {
   name?: string
   helpText?: string
   errors?: string[]
+  fullWidth?: boolean
 }
 
 export type DateRange = {
@@ -48,10 +49,12 @@ export function DateRangePicker({
   label = 'Date',
   errors,
   helpText,
+  fullWidth = false,
 }: DateRangePickerProps): JSX.Element {
   const cssClasses = classNames('date-picker', variant, className, {
     toggle: withInput,
     invalid: errors?.length,
+    'full-width': fullWidth,
   })
   const helpTexts = buildHelpText(helpText, errors)
 

package/src/atoms/DatePicker/DateSinglePicker.tsx

@@ -28,6 +28,7 @@ export type DateSinglePickerProps = {
   label?: string
   helpText?: string
   errors?: string[]
+  fullWidth?: boolean
 }
 
 export function DateSinglePicker({
@@ -42,6 +43,7 @@ export function DateSinglePicker({
   label = 'Date',
   errors,
   helpText,
+  fullWidth = false,
 }: DateSinglePickerProps): JSX.Element {
   const { isOpen, close, toggle } = useOpen(!withInput)
   const pickerRef = useRef(null)
@@ -51,6 +53,7 @@ export function DateSinglePicker({
   const cssClasses = classNames('date-picker', variant, className, {
     toggle: withInput,
     invalid: errors?.length,
+    'full-width': fullWidth,
   })
 
   const [selected, setSelected] = useState<Date | undefined>(

package/src/atoms/QuantitySelector.tsx

@@ -14,6 +14,7 @@ export interface QuantitySelectorProps extends Omit<InputProps, 'type'> {
   hideLabel?: boolean
   id?: string
   variant?: Variant
+  fullWidth?: boolean
 }
 
 export function QuantitySelector({
@@ -24,6 +25,7 @@ export function QuantitySelector({
   disabled,
   hideLabel = false,
   variant = 'primary',
+  fullWidth = false,
   ...props
 }: QuantitySelectorProps): React.JSX.Element {
   const inputRef = useRef<HTMLInputElement>(null)
@@ -41,7 +43,11 @@ export function QuantitySelector({
     }
   }
   return (
-    <div className={classNames('quantity-selector-group', variant, className)}>
+    <div
+      className={classNames('quantity-selector-group', variant, className, {
+        'full-width': fullWidth,
+      })}
+    >
       {!hideLabel && (
         <Label required={props.required} htmlFor={id}>
           {label}

package/src/stories/Changelog.mdx

@@ -6,7 +6,7 @@ import { Meta } from "@storybook/blocks";
 
 ## 0.33.2
 
-* Add fullWidth prop to Select, Button, Input, MultiSelect, TextArea components
+* Add fullWidth prop to Select, Button, Input, MultiSelect, TextArea, QuantitySelector components
 
 ## 0.33.1
 

package/src/stories/QuantitySelector.stories.ts

@@ -48,6 +48,11 @@ const meta = {
       description: 'Is required?',
       type: 'boolean',
     },
+    fullWidth: {
+      description:
+        'Makes the QuantitySelector take the full width of the container',
+      type: 'boolean',
+    },
   },
 }