@wistia/ui 0.6.20-beta.f693d494.df8ca33 → 0.6.21

package/dist/index.d.mts

@@ -439,6 +439,7 @@ declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
 
 type AvatarInstanceType = 'image' | 'initials';
 type AvatarImageLoadStateType = 'error' | 'loaded' | 'loading';
+type AvatarSizeType = 'lg' | 'md' | 'sm';
 type AvatarStatus = {
     type: AvatarInstanceType;
     state: AvatarImageLoadStateType;
@@ -461,7 +462,7 @@ type AvatarProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * A predefined size for the avatar
      */
-    size?: 'lg' | 'md' | 'sm';
+    size?: AvatarSizeType;
     /**
      * A callback that is invoked after the image has loaded or failed to load
      */
@@ -826,7 +827,8 @@ declare const Card: {
     displayName: string;
 };
 
-type CheckboxProps = Omit<ComponentPropsWithRef<'input'>, 'onChange'> & {
+type CheckboxSizeType = 'lg' | 'md' | 'sm';
+declare const Checkbox: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange" | "size"> & {
     /**
      * Indicates the state of the checkbox
      */
@@ -855,12 +857,19 @@ type CheckboxProps = Omit<ComponentPropsWithRef<'input'>, 'onChange'> & {
      * Callback function invoked when the value changes
      */
     onChange?: (event: ChangeEvent) => unknown;
+    /**
+     * Indicates if the input is required
+     */
+    required?: boolean;
+    /**
+     * A predefined size for the checkbox
+     */
+    size?: CheckboxSizeType;
     /**
      * The value given as data when submitted with a `name`.
      */
     value?: string;
-};
-declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+} & react.RefAttributes<HTMLInputElement>>;
 
 type ClickRegionProps = {
     /**
@@ -2238,7 +2247,8 @@ declare const ProgressBar: {
     displayName: string;
 };
 
-type RadioProps = ComponentPropsWithoutRef<'input'> & {
+type RadioSizeType = 'lg' | 'md' | 'sm';
+type RadioProps = Omit<ComponentPropsWithoutRef<'input'>, 'onChange' | 'size'> & {
     /**
      * Indicates the state of the radio
      */
@@ -2272,12 +2282,20 @@ type RadioProps = ComponentPropsWithoutRef<'input'> & {
      * Callback function invoked when the value changes
      */
     onChange?: (event: ChangeEvent) => unknown;
+    /**
+     * Indicates if the input is required
+     */
+    required?: boolean;
+    /**
+     * A predefined size for the radio
+     */
+    size?: RadioSizeType;
     /**
      * The value attribute of the input
      */
     value?: string;
 };
-declare const Radio: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+declare const Radio: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange" | "size"> & {
     /**
      * Indicates the state of the radio
      */
@@ -2311,6 +2329,14 @@ declare const Radio: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
      * Callback function invoked when the value changes
      */
     onChange?: (event: ChangeEvent) => unknown;
+    /**
+     * Indicates if the input is required
+     */
+    required?: boolean;
+    /**
+     * A predefined size for the radio
+     */
+    size?: RadioSizeType;
     /**
      * The value attribute of the input
      */
@@ -2663,6 +2689,10 @@ type TagProps = ComponentPropsWithoutRef<'div'> & {
      * Valid URL for the `Tag` label to link to
      */
     href?: string;
+    /**
+     * Optional icon to display before the label
+     */
+    icon?: JSX.Element | undefined;
     /**
      * Text label for the `Tag`
      */
@@ -2688,6 +2718,10 @@ declare const Tag: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<
      * Valid URL for the `Tag` label to link to
      */
     href?: string;
+    /**
+     * Optional icon to display before the label
+     */
+    icon?: JSX.Element | undefined;
     /**
      * Text label for the `Tag`
      */

package/dist/index.d.ts

@@ -439,6 +439,7 @@ declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
 
 type AvatarInstanceType = 'image' | 'initials';
 type AvatarImageLoadStateType = 'error' | 'loaded' | 'loading';
+type AvatarSizeType = 'lg' | 'md' | 'sm';
 type AvatarStatus = {
     type: AvatarInstanceType;
     state: AvatarImageLoadStateType;
@@ -461,7 +462,7 @@ type AvatarProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * A predefined size for the avatar
      */
-    size?: 'lg' | 'md' | 'sm';
+    size?: AvatarSizeType;
     /**
      * A callback that is invoked after the image has loaded or failed to load
      */
@@ -826,7 +827,8 @@ declare const Card: {
     displayName: string;
 };
 
-type CheckboxProps = Omit<ComponentPropsWithRef<'input'>, 'onChange'> & {
+type CheckboxSizeType = 'lg' | 'md' | 'sm';
+declare const Checkbox: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange" | "size"> & {
     /**
      * Indicates the state of the checkbox
      */
@@ -855,12 +857,19 @@ type CheckboxProps = Omit<ComponentPropsWithRef<'input'>, 'onChange'> & {
      * Callback function invoked when the value changes
      */
     onChange?: (event: ChangeEvent) => unknown;
+    /**
+     * Indicates if the input is required
+     */
+    required?: boolean;
+    /**
+     * A predefined size for the checkbox
+     */
+    size?: CheckboxSizeType;
     /**
      * The value given as data when submitted with a `name`.
      */
     value?: string;
-};
-declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+} & react.RefAttributes<HTMLInputElement>>;
 
 type ClickRegionProps = {
     /**
@@ -2238,7 +2247,8 @@ declare const ProgressBar: {
     displayName: string;
 };
 
-type RadioProps = ComponentPropsWithoutRef<'input'> & {
+type RadioSizeType = 'lg' | 'md' | 'sm';
+type RadioProps = Omit<ComponentPropsWithoutRef<'input'>, 'onChange' | 'size'> & {
     /**
      * Indicates the state of the radio
      */
@@ -2272,12 +2282,20 @@ type RadioProps = ComponentPropsWithoutRef<'input'> & {
      * Callback function invoked when the value changes
      */
     onChange?: (event: ChangeEvent) => unknown;
+    /**
+     * Indicates if the input is required
+     */
+    required?: boolean;
+    /**
+     * A predefined size for the radio
+     */
+    size?: RadioSizeType;
     /**
      * The value attribute of the input
      */
     value?: string;
 };
-declare const Radio: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+declare const Radio: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "onChange" | "size"> & {
     /**
      * Indicates the state of the radio
      */
@@ -2311,6 +2329,14 @@ declare const Radio: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
      * Callback function invoked when the value changes
      */
     onChange?: (event: ChangeEvent) => unknown;
+    /**
+     * Indicates if the input is required
+     */
+    required?: boolean;
+    /**
+     * A predefined size for the radio
+     */
+    size?: RadioSizeType;
     /**
      * The value attribute of the input
      */
@@ -2663,6 +2689,10 @@ type TagProps = ComponentPropsWithoutRef<'div'> & {
      * Valid URL for the `Tag` label to link to
      */
     href?: string;
+    /**
+     * Optional icon to display before the label
+     */
+    icon?: JSX.Element | undefined;
     /**
      * Text label for the `Tag`
      */
@@ -2688,6 +2718,10 @@ declare const Tag: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<
      * Valid URL for the `Tag` label to link to
      */
     href?: string;
+    /**
+     * Optional icon to display before the label
+     */
+    icon?: JSX.Element | undefined;
     /**
      * Text label for the `Tag`
      */

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.20-beta.f693d494.df8ca33
+ * @license @wistia/ui v0.6.21
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7531,12 +7531,24 @@ var disabledStyle3 = css20`
   cursor: not-allowed;
   opacity: 0.5;
 `;
+var inputSizeSmall = css20`
+  width: 14px;
+  height: 14px;
+  min-width: 14px;
+  min-height: 14px;
+`;
 var inputSizeMedium = css20`
   width: 16px;
   height: 16px;
   min-width: 16px;
   min-height: 16px;
 `;
+var inputSizeLarge = css20`
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+  min-height: 20px;
+`;
 var StyledCheckboxWrapper = styled17.div`
   display: flex;
   margin: 0;
@@ -7546,9 +7558,13 @@ var StyledCheckboxWrapper = styled17.div`
 
   ${({ disabled }) => disabled && disabledStyle3};
 `;
+var getSizeCss = (size) => {
+  if (size === "sm") return inputSizeSmall;
+  if (size === "lg") return inputSizeLarge;
+  return inputSizeMedium;
+};
 var StyledCheckboxInput = styled17.div`
-  /* TODO prop-ify sizes */
-  ${inputSizeMedium}
+  ${({ $size }) => getSizeCss($size)}
   line-height: 0;
   margin: 0;
   border: 1px solid var(--wui-color-border);
@@ -7580,7 +7596,19 @@ var StyledHiddenCheckboxInput = styled17.input`
   }
 `;
 var Checkbox = forwardRef6(
-  ({ checked, disabled = false, id, label, description, name, onChange, value, ...props }, ref) => {
+  ({
+    checked,
+    disabled = false,
+    id,
+    label,
+    description,
+    name,
+    onChange,
+    size = "md",
+    value,
+    required = false,
+    ...props
+  }, ref) => {
     const generatedId = useId();
     const computedId = isNonEmptyString2(id) ? id : `wistia-ui-checkbox-${generatedId}`;
     return /* @__PURE__ */ jsxs13(
@@ -7599,6 +7627,7 @@ var Checkbox = forwardRef6(
               id: computedId,
               name,
               onChange,
+              required,
               type: "checkbox",
               value
             }
@@ -7606,7 +7635,14 @@ var Checkbox = forwardRef6(
           /* @__PURE__ */ jsx201(
             FormControlLabel,
             {
-              controlSlot: /* @__PURE__ */ jsx201(StyledCheckboxInput, { "data-wui-faux-input": "true", children: /* @__PURE__ */ jsx201(CheckIcon, {}) }),
+              controlSlot: /* @__PURE__ */ jsx201(
+                StyledCheckboxInput,
+                {
+                  $size: size,
+                  "data-wui-faux-input": "true",
+                  children: /* @__PURE__ */ jsx201(CheckIcon, {})
+                }
+              ),
               description,
               htmlFor: computedId,
               label
@@ -10261,13 +10297,33 @@ var StyledHiddenRadioInput = styled49.input`
     display: block;
   }
 `;
-var StyledRadioInput = styled49.div`
-  line-height: 0;
-  margin: 0;
+var inputSizeSmall2 = css30`
+  width: 14px;
+  height: 14px;
+  min-width: 14px;
+  min-height: 14px;
+`;
+var inputSizeMedium2 = css30`
   width: 16px;
-  min-width: 16px;
   height: 16px;
+  min-width: 16px;
   min-height: 16px;
+`;
+var inputSizeLarge2 = css30`
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+  min-height: 20px;
+`;
+var getSizeCss2 = (size) => {
+  if (size === "sm") return inputSizeSmall2;
+  if (size === "lg") return inputSizeLarge2;
+  return inputSizeMedium2;
+};
+var StyledRadioInput = styled49.div`
+  ${({ $size }) => getSizeCss2($size)}
+  line-height: 0;
+  margin: 0;
   border: 1px solid var(--wui-color-border);
   border-radius: 50%; /* TODO --wui-border-radius-rounded */
   background-color: var(--wui-color-bg-fill-white);
@@ -10305,7 +10361,9 @@ var Radio = forwardRef18(
     description,
     name,
     onChange,
+    size = "md",
     value = "false",
+    required = false,
     ...props
   }, ref) => {
     const generatedId = useId3();
@@ -10326,6 +10384,7 @@ var Radio = forwardRef18(
               id: computedId,
               name,
               onChange,
+              required,
               type: "radio",
               value
             }
@@ -10333,7 +10392,14 @@ var Radio = forwardRef18(
           /* @__PURE__ */ jsx241(
             FormControlLabel,
             {
-              controlSlot: /* @__PURE__ */ jsx241(StyledRadioInput, { "data-wui-faux-input": "true", children: /* @__PURE__ */ jsx241(RadioIcon, {}) }),
+              controlSlot: /* @__PURE__ */ jsx241(
+                StyledRadioInput,
+                {
+                  $size: size,
+                  "data-wui-faux-input": "true",
+                  children: /* @__PURE__ */ jsx241(RadioIcon, {})
+                }
+              ),
               description,
               htmlFor: computedId,
               label
@@ -11254,10 +11320,17 @@ var TagLabel = styled67.a`
   font-weight: var(--wui-typography-label-4-weight);
   line-height: var(--wui-typography-label-4-line-height);
   border-radius: var(--wui-border-radius-01);
+  display: flex;
   align-items: center;
   color: var(--wui-color-text);
   text-decoration: none;
   padding: var(--wui-space-01);
+  gap: var(--wui-space-01);
+
+  svg {
+    height: 12px;
+    width: 12px;
+  }
 
   :not(:only-child) {
     padding-right: var(--wui-space-01);
@@ -11355,7 +11428,16 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
   ] });
 };
 var Tag = forwardRef26(
-  ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
+  ({
+    onClickRemove,
+    colorScheme = "inherit",
+    href,
+    icon,
+    label,
+    onClickRemoveLabel,
+    ...otherProps
+  }, ref) => {
+    const hasIcon = isNotNil25(icon);
     const labelProps = isNotNil25(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
     return /* @__PURE__ */ jsxs40(
       StyledTag,
@@ -11364,12 +11446,15 @@ var Tag = forwardRef26(
         $colorScheme: colorScheme,
         ...otherProps,
         children: [
-          /* @__PURE__ */ jsx259(
+          /* @__PURE__ */ jsxs40(
             TagLabel,
             {
               ...labelProps,
               $colorScheme: colorScheme,
-              children: label
+              children: [
+                hasIcon ? icon : null,
+                label
+              ]
             }
           ),
           /* @__PURE__ */ jsx259(