@backstage/ui 0.6.0 → 0.6.1

package/dist/components/Menu/Menu.esm.js

@@ -0,0 +1,224 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Menu as Menu$1 } from '@base-ui-components/react/menu';
+import clsx from 'clsx';
+import { Combobox } from './Combobox.esm.js';
+import '@remixicon/react';
+import { Icon } from '../Icon/Icon.esm.js';
+import '../Icon/context.esm.js';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const MenuTrigger = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.Trigger,
+    {
+      ref,
+      className: clsx(classNames.trigger, className),
+      ...props
+    }
+  );
+});
+MenuTrigger.displayName = Menu$1.Trigger.displayName;
+const MenuBackdrop = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.Backdrop,
+    {
+      ref,
+      className: clsx(classNames.backdrop, className),
+      ...props
+    }
+  );
+});
+MenuBackdrop.displayName = Menu$1.Backdrop.displayName;
+const MenuPositioner = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.Positioner,
+    {
+      ref,
+      className: clsx(classNames.positioner, className),
+      ...props
+    }
+  );
+});
+MenuPositioner.displayName = Menu$1.Positioner.displayName;
+const MenuPopup = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.Popup,
+    {
+      ref,
+      className: clsx(classNames.popup, className),
+      ...props
+    }
+  );
+});
+MenuPopup.displayName = Menu$1.Popup.displayName;
+const MenuArrow = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.Arrow,
+    {
+      ref,
+      className: clsx(classNames.arrow, className),
+      ...props
+    }
+  );
+});
+MenuArrow.displayName = Menu$1.Arrow.displayName;
+const MenuItem = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.Item,
+    {
+      ref,
+      className: clsx(classNames.item, className),
+      ...props
+    }
+  );
+});
+MenuItem.displayName = Menu$1.Item.displayName;
+const MenuGroup = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.Group,
+    {
+      ref,
+      className: clsx(classNames.group, className),
+      ...props
+    }
+  );
+});
+MenuGroup.displayName = Menu$1.Group.displayName;
+const MenuGroupLabel = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.GroupLabel,
+    {
+      ref,
+      className: clsx(classNames.groupLabel, className),
+      ...props
+    }
+  );
+});
+MenuGroupLabel.displayName = Menu$1.GroupLabel.displayName;
+const MenuRadioGroup = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.RadioGroup,
+    {
+      ref,
+      className: clsx(classNames.radioGroup, className),
+      ...props
+    }
+  );
+});
+MenuRadioGroup.displayName = Menu$1.RadioGroup.displayName;
+const MenuRadioItem = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.RadioItem,
+    {
+      ref,
+      className: clsx(classNames.radioItem, className),
+      ...props
+    }
+  );
+});
+MenuRadioItem.displayName = Menu$1.RadioItem.displayName;
+const MenuRadioItemIndicator = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.RadioItemIndicator,
+    {
+      ref,
+      className: clsx(classNames.radioItemIndicator, className),
+      ...props
+    }
+  );
+});
+MenuRadioItemIndicator.displayName = Menu$1.RadioItemIndicator.displayName;
+const MenuCheckboxItem = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.CheckboxItem,
+    {
+      ref,
+      className: clsx(classNames.checkboxItem, className),
+      ...props
+    }
+  );
+});
+MenuCheckboxItem.displayName = Menu$1.CheckboxItem.displayName;
+const MenuCheckboxItemIndicator = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.CheckboxItemIndicator,
+    {
+      ref,
+      className: clsx(classNames.checkboxItemIndicator, className),
+      ...props
+    }
+  );
+});
+MenuCheckboxItemIndicator.displayName = Menu$1.CheckboxItemIndicator.displayName;
+const MenuSubmenuTrigger = forwardRef(({ className, children, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsxs(
+    Menu$1.SubmenuTrigger,
+    {
+      ref,
+      className: clsx(classNames.submenuTrigger, className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { children }),
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            "aria-label": "Submenu indicator icon",
+            name: "chevron-right",
+            size: 20
+          }
+        )
+      ]
+    }
+  );
+});
+MenuSubmenuTrigger.displayName = Menu$1.SubmenuTrigger.displayName;
+const MenuSeparator = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.Separator,
+    {
+      ref,
+      className: clsx(classNames.separator, className),
+      ...props
+    }
+  );
+});
+MenuSeparator.displayName = Menu$1.Separator.displayName;
+const Menu = {
+  Root: Menu$1.Root,
+  Trigger: MenuTrigger,
+  Portal: Menu$1.Portal,
+  Backdrop: MenuBackdrop,
+  Positioner: MenuPositioner,
+  Popup: MenuPopup,
+  Arrow: MenuArrow,
+  Item: MenuItem,
+  Group: MenuGroup,
+  GroupLabel: MenuGroupLabel,
+  RadioGroup: MenuRadioGroup,
+  RadioItem: MenuRadioItem,
+  RadioItemIndicator: MenuRadioItemIndicator,
+  CheckboxItem: MenuCheckboxItem,
+  CheckboxItemIndicator: MenuCheckboxItemIndicator,
+  SubmenuTrigger: MenuSubmenuTrigger,
+  Separator: MenuSeparator,
+  Combobox
+};
+
+export { Menu };
+//# sourceMappingURL=Menu.esm.js.map

package/dist/components/Menu/Menu.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.esm.js","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { Menu as MenuPrimitive } from '@base-ui-components/react/menu';\nimport clsx from 'clsx';\nimport { MenuComponent } from './types';\nimport { Combobox } from './Combobox';\nimport { Icon } from '../Icon';\nimport { useStyles } from '../../hooks/useStyles';\n\nconst MenuTrigger = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Trigger>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.Trigger\n      ref={ref}\n      className={clsx(classNames.trigger, className)}\n      {...props}\n    />\n  );\n});\nMenuTrigger.displayName = MenuPrimitive.Trigger.displayName;\n\nconst MenuBackdrop = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Backdrop>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Backdrop>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.Backdrop\n      ref={ref}\n      className={clsx(classNames.backdrop, className)}\n      {...props}\n    />\n  );\n});\nMenuBackdrop.displayName = MenuPrimitive.Backdrop.displayName;\n\nconst MenuPositioner = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Positioner>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Positioner>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.Positioner\n      ref={ref}\n      className={clsx(classNames.positioner, className)}\n      {...props}\n    />\n  );\n});\nMenuPositioner.displayName = MenuPrimitive.Positioner.displayName;\n\nconst MenuPopup = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Popup>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Popup>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.Popup\n      ref={ref}\n      className={clsx(classNames.popup, className)}\n      {...props}\n    />\n  );\n});\nMenuPopup.displayName = MenuPrimitive.Popup.displayName;\n\nconst MenuArrow = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Arrow>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Arrow>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.Arrow\n      ref={ref}\n      className={clsx(classNames.arrow, className)}\n      {...props}\n    />\n  );\n});\nMenuArrow.displayName = MenuPrimitive.Arrow.displayName;\n\nconst MenuItem = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Item>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.Item\n      ref={ref}\n      className={clsx(classNames.item, className)}\n      {...props}\n    />\n  );\n});\nMenuItem.displayName = MenuPrimitive.Item.displayName;\n\nconst MenuGroup = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Group>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.Group\n      ref={ref}\n      className={clsx(classNames.group, className)}\n      {...props}\n    />\n  );\n});\nMenuGroup.displayName = MenuPrimitive.Group.displayName;\n\nconst MenuGroupLabel = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.GroupLabel>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.GroupLabel>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.GroupLabel\n      ref={ref}\n      className={clsx(classNames.groupLabel, className)}\n      {...props}\n    />\n  );\n});\nMenuGroupLabel.displayName = MenuPrimitive.GroupLabel.displayName;\n\nconst MenuRadioGroup = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.RadioGroup>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.RadioGroup>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.RadioGroup\n      ref={ref}\n      className={clsx(classNames.radioGroup, className)}\n      {...props}\n    />\n  );\n});\nMenuRadioGroup.displayName = MenuPrimitive.RadioGroup.displayName;\n\nconst MenuRadioItem = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.RadioItem>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.RadioItem\n      ref={ref}\n      className={clsx(classNames.radioItem, className)}\n      {...props}\n    />\n  );\n});\nMenuRadioItem.displayName = MenuPrimitive.RadioItem.displayName;\n\nconst MenuRadioItemIndicator = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.RadioItemIndicator>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.RadioItemIndicator>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.RadioItemIndicator\n      ref={ref}\n      className={clsx(classNames.radioItemIndicator, className)}\n      {...props}\n    />\n  );\n});\nMenuRadioItemIndicator.displayName =\n  MenuPrimitive.RadioItemIndicator.displayName;\n\nconst MenuCheckboxItem = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.CheckboxItem>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.CheckboxItem\n      ref={ref}\n      className={clsx(classNames.checkboxItem, className)}\n      {...props}\n    />\n  );\n});\nMenuCheckboxItem.displayName = MenuPrimitive.CheckboxItem.displayName;\n\nconst MenuCheckboxItemIndicator = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.CheckboxItemIndicator>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.CheckboxItemIndicator>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.CheckboxItemIndicator\n      ref={ref}\n      className={clsx(classNames.checkboxItemIndicator, className)}\n      {...props}\n    />\n  );\n});\nMenuCheckboxItemIndicator.displayName =\n  MenuPrimitive.CheckboxItemIndicator.displayName;\n\nconst MenuSubmenuTrigger = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.SubmenuTrigger>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.SubmenuTrigger>\n>(({ className, children, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      ref={ref}\n      className={clsx(classNames.submenuTrigger, className)}\n      {...props}\n    >\n      <div>{children}</div>\n      <Icon\n        aria-label=\"Submenu indicator icon\"\n        name=\"chevron-right\"\n        size={20}\n      />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n});\nMenuSubmenuTrigger.displayName = MenuPrimitive.SubmenuTrigger.displayName;\n\nconst MenuSeparator = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Separator>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.Separator\n      ref={ref}\n      className={clsx(classNames.separator, className)}\n      {...props}\n    />\n  );\n});\nMenuSeparator.displayName = MenuPrimitive.Separator.displayName;\n\n/** @public */\nexport const Menu: MenuComponent = {\n  Root: MenuPrimitive.Root,\n  Trigger: MenuTrigger,\n  Portal: MenuPrimitive.Portal,\n  Backdrop: MenuBackdrop,\n  Positioner: MenuPositioner,\n  Popup: MenuPopup,\n  Arrow: MenuArrow,\n  Item: MenuItem,\n  Group: MenuGroup,\n  GroupLabel: MenuGroupLabel,\n  RadioGroup: MenuRadioGroup,\n  RadioItem: MenuRadioItem,\n  RadioItemIndicator: MenuRadioItemIndicator,\n  CheckboxItem: MenuCheckboxItem,\n  CheckboxItemIndicator: MenuCheckboxItemIndicator,\n  SubmenuTrigger: MenuSubmenuTrigger,\n  Separator: MenuSeparator,\n  Combobox,\n};\n"],"names":["MenuPrimitive"],"mappings":"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"}

package/dist/components/RadioGroup/RadioGroup.esm.js

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useEffect } from 'react';
+import { RadioGroup as RadioGroup$1, Radio as Radio$1 } from 'react-aria-components';
+import clsx from 'clsx';
+import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
+import { FieldError } from '../FieldError/FieldError.esm.js';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const RadioGroup = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      label,
+      secondaryLabel,
+      description,
+      isRequired,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      children,
+      ...rest
+    } = props;
+    const { classNames } = useStyles("RadioGroup");
+    useEffect(() => {
+      if (!label && !ariaLabel && !ariaLabelledBy) {
+        console.warn(
+          "RadioGroup requires either a visible label, aria-label, or aria-labelledby for accessibility"
+        );
+      }
+    }, [label, ariaLabel, ariaLabelledBy]);
+    const secondaryLabelText = secondaryLabel || (isRequired ? "Required" : null);
+    return /* @__PURE__ */ jsxs(
+      RadioGroup$1,
+      {
+        className: clsx(classNames.root, className),
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        ...rest,
+        ref,
+        children: [
+          /* @__PURE__ */ jsx(
+            FieldLabel,
+            {
+              label,
+              secondaryLabel: secondaryLabelText,
+              description
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: classNames.content, children }),
+          /* @__PURE__ */ jsx(FieldError, {})
+        ]
+      }
+    );
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+const Radio = forwardRef((props, ref) => {
+  const { className, ...rest } = props;
+  const { classNames } = useStyles("RadioGroup");
+  return /* @__PURE__ */ jsx(
+    Radio$1,
+    {
+      className: clsx(classNames.radio, className),
+      ...rest,
+      ref
+    }
+  );
+});
+RadioGroup.displayName = "RadioGroup";
+
+export { Radio, RadioGroup };
+//# sourceMappingURL=RadioGroup.esm.js.map

package/dist/components/RadioGroup/RadioGroup.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.esm.js","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, useEffect } from 'react';\nimport {\n  RadioGroup as AriaRadioGroup,\n  Radio as AriaRadio,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { useStyles } from '../../hooks/useStyles';\n\nimport type { RadioGroupProps, RadioProps } from './types';\n\n/** @public */\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  (props, ref) => {\n    const {\n      className,\n      label,\n      secondaryLabel,\n      description,\n      isRequired,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      children,\n      ...rest\n    } = props;\n\n    const { classNames } = useStyles('RadioGroup');\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'RadioGroup requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n    const secondaryLabelText =\n      secondaryLabel || (isRequired ? 'Required' : null);\n\n    return (\n      <AriaRadioGroup\n        className={clsx(classNames.root, className)}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        {...rest}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div className={classNames.content}>{children}</div>\n        <FieldError />\n      </AriaRadioGroup>\n    );\n  },\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\n/** @public */\nexport const Radio = forwardRef<HTMLLabelElement, RadioProps>((props, ref) => {\n  const { className, ...rest } = props;\n\n  const { classNames } = useStyles('RadioGroup');\n\n  return (\n    <AriaRadio\n      className={clsx(classNames.radio, className)}\n      {...rest}\n      ref={ref}\n    />\n  );\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"],"names":["AriaRadioGroup","AriaRadio"],"mappings":";;;;;;;;AA6BO,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,CAAC,OAAO,GAAQ,KAAA;AACd,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,KAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAc,EAAA,SAAA;AAAA,MACd,iBAAmB,EAAA,cAAA;AAAA,MACnB,QAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAgB,EAAA;AAC3C,QAAQ,OAAA,CAAA,IAAA;AAAA,UACN;AAAA,SACF;AAAA;AACF,KACC,EAAA,CAAC,KAAO,EAAA,SAAA,EAAW,cAAc,CAAC,CAAA;AAGrC,IAAM,MAAA,kBAAA,GACJ,cAAmB,KAAA,UAAA,GAAa,UAAa,GAAA,IAAA,CAAA;AAE/C,IACE,uBAAA,IAAA;AAAA,MAACA,YAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,QAC1C,YAAY,EAAA,SAAA;AAAA,QACZ,iBAAiB,EAAA,cAAA;AAAA,QAChB,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAA;AAAA,cACA,cAAgB,EAAA,kBAAA;AAAA,cAChB;AAAA;AAAA,WACF;AAAA,0BACC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,SAAU,QAAS,EAAA,CAAA;AAAA,8BAC7C,UAAW,EAAA,EAAA;AAAA;AAAA;AAAA,KACd;AAAA;AAGN;AAEA,UAAA,CAAW,WAAc,GAAA,YAAA;AAGlB,MAAM,KAAQ,GAAA,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAQ,KAAA;AAC5E,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAE/B,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,EACE,uBAAA,GAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,GAAG,IAAA;AAAA,MACJ;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,UAAA,CAAW,WAAc,GAAA,YAAA;;;;"}

package/dist/components/ScrollArea/ScrollArea.esm.js

@@ -0,0 +1,63 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ScrollArea as ScrollArea$1 } from '@base-ui-components/react/scroll-area';
+import clsx from 'clsx';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const ScrollAreaRoot = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("ScrollArea");
+  return /* @__PURE__ */ jsx(
+    ScrollArea$1.Root,
+    {
+      ref,
+      className: clsx(classNames.root, className),
+      ...props
+    }
+  );
+});
+ScrollAreaRoot.displayName = ScrollArea$1.Root.displayName;
+const ScrollAreaViewport = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("ScrollArea");
+  return /* @__PURE__ */ jsx(
+    ScrollArea$1.Viewport,
+    {
+      ref,
+      className: clsx(classNames.viewport, className),
+      ...props
+    }
+  );
+});
+ScrollAreaViewport.displayName = ScrollArea$1.Viewport.displayName;
+const ScrollAreaScrollbar = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("ScrollArea");
+  return /* @__PURE__ */ jsx(
+    ScrollArea$1.Scrollbar,
+    {
+      ref,
+      className: clsx(classNames.scrollbar, className),
+      ...props
+    }
+  );
+});
+ScrollAreaScrollbar.displayName = ScrollArea$1.Scrollbar.displayName;
+const ScrollAreaThumb = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("ScrollArea");
+  return /* @__PURE__ */ jsx(
+    ScrollArea$1.Thumb,
+    {
+      ref,
+      className: clsx(classNames.thumb, className),
+      ...props
+    }
+  );
+});
+ScrollAreaThumb.displayName = ScrollArea$1.Thumb.displayName;
+const ScrollArea = {
+  Root: ScrollAreaRoot,
+  Viewport: ScrollAreaViewport,
+  Scrollbar: ScrollAreaScrollbar,
+  Thumb: ScrollAreaThumb
+};
+
+export { ScrollArea };
+//# sourceMappingURL=ScrollArea.esm.js.map

package/dist/components/ScrollArea/ScrollArea.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.esm.js","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { ScrollArea as ScrollAreaPrimitive } from '@base-ui-components/react/scroll-area';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\n\nconst ScrollAreaRoot = forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('ScrollArea');\n\n  return (\n    <ScrollAreaPrimitive.Root\n      ref={ref}\n      className={clsx(classNames.root, className)}\n      {...props}\n    />\n  );\n});\nScrollAreaRoot.displayName = ScrollAreaPrimitive.Root.displayName;\n\nconst ScrollAreaViewport = forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Viewport>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('ScrollArea');\n\n  return (\n    <ScrollAreaPrimitive.Viewport\n      ref={ref}\n      className={clsx(classNames.viewport, className)}\n      {...props}\n    />\n  );\n});\nScrollAreaViewport.displayName = ScrollAreaPrimitive.Viewport.displayName;\n\nconst ScrollAreaScrollbar = forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Scrollbar>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('ScrollArea');\n\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      ref={ref}\n      className={clsx(classNames.scrollbar, className)}\n      {...props}\n    />\n  );\n});\nScrollAreaScrollbar.displayName = ScrollAreaPrimitive.Scrollbar.displayName;\n\nconst ScrollAreaThumb = forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Thumb>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Thumb>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('ScrollArea');\n\n  return (\n    <ScrollAreaPrimitive.Thumb\n      ref={ref}\n      className={clsx(classNames.thumb, className)}\n      {...props}\n    />\n  );\n});\nScrollAreaThumb.displayName = ScrollAreaPrimitive.Thumb.displayName;\n\n/** @public */\nexport const ScrollArea = {\n  Root: ScrollAreaRoot,\n  Viewport: ScrollAreaViewport,\n  Scrollbar: ScrollAreaScrollbar,\n  Thumb: ScrollAreaThumb,\n};\n"],"names":["ScrollAreaPrimitive"],"mappings":";;;;;;AAqBA,MAAM,cAAA,GAAiB,WAGrB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,EACE,uBAAA,GAAA;AAAA,IAACA,YAAoB,CAAA,IAAA;AAAA,IAApB;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,MACzC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,cAAe,CAAA,WAAA,GAAcA,aAAoB,IAAK,CAAA,WAAA;AAEtD,MAAM,kBAAA,GAAqB,WAGzB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,EACE,uBAAA,GAAA;AAAA,IAACA,YAAoB,CAAA,QAAA;AAAA,IAApB;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,MAC7C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,kBAAmB,CAAA,WAAA,GAAcA,aAAoB,QAAS,CAAA,WAAA;AAE9D,MAAM,mBAAA,GAAsB,WAG1B,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,EACE,uBAAA,GAAA;AAAA,IAACA,YAAoB,CAAA,SAAA;AAAA,IAApB;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAC9C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,mBAAoB,CAAA,WAAA,GAAcA,aAAoB,SAAU,CAAA,WAAA;AAEhE,MAAM,eAAA,GAAkB,WAGtB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,EACE,uBAAA,GAAA;AAAA,IAACA,YAAoB,CAAA,KAAA;AAAA,IAApB;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,eAAgB,CAAA,WAAA,GAAcA,aAAoB,KAAM,CAAA,WAAA;AAGjD,MAAM,UAAa,GAAA;AAAA,EACxB,IAAM,EAAA,cAAA;AAAA,EACN,QAAU,EAAA,kBAAA;AAAA,EACV,SAAW,EAAA,mBAAA;AAAA,EACX,KAAO,EAAA;AACT;;;;"}

package/dist/components/SearchField/SearchField.esm.js

@@ -0,0 +1,107 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useEffect } from 'react';
+import { SearchField as SearchField$1, Input, Button } from 'react-aria-components';
+import clsx from 'clsx';
+import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
+import { FieldError } from '../FieldError/FieldError.esm.js';
+import { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const SearchField = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      icon,
+      size = "small",
+      label,
+      secondaryLabel,
+      description,
+      isRequired,
+      placeholder = "Search",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      ...rest
+    } = props;
+    useEffect(() => {
+      if (!label && !ariaLabel && !ariaLabelledBy) {
+        console.warn(
+          "SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility"
+        );
+      }
+    }, [label, ariaLabel, ariaLabelledBy]);
+    const { classNames: textFieldClassNames, dataAttributes } = useStyles(
+      "TextField",
+      {
+        size
+      }
+    );
+    const { classNames: searchFieldClassNames } = useStyles("SearchField", {
+      size
+    });
+    const secondaryLabelText = secondaryLabel || (isRequired ? "Required" : null);
+    return /* @__PURE__ */ jsxs(
+      SearchField$1,
+      {
+        className: clsx(
+          textFieldClassNames.root,
+          searchFieldClassNames.root,
+          className
+        ),
+        ...dataAttributes,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        ...rest,
+        ref,
+        children: [
+          /* @__PURE__ */ jsx(
+            FieldLabel,
+            {
+              label,
+              secondaryLabel: secondaryLabelText,
+              description
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: textFieldClassNames.inputWrapper,
+              "data-size": dataAttributes["data-size"],
+              children: [
+                icon !== false && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: textFieldClassNames.inputIcon,
+                    "data-size": dataAttributes["data-size"],
+                    "aria-hidden": "true",
+                    children: icon || /* @__PURE__ */ jsx(RiSearch2Line, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    className: textFieldClassNames.input,
+                    ...icon !== false && { "data-icon": true },
+                    placeholder
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    className: searchFieldClassNames.clear,
+                    "data-size": dataAttributes["data-size"],
+                    children: /* @__PURE__ */ jsx(RiCloseCircleLine, {})
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(FieldError, {})
+        ]
+      }
+    );
+  }
+);
+SearchField.displayName = "searchField";
+
+export { SearchField };
+//# sourceMappingURL=SearchField.esm.js.map

package/dist/components/SearchField/SearchField.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchField.esm.js","sources":["../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, useEffect } from 'react';\nimport {\n  Input,\n  SearchField as AriaSearchField,\n  Button,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useStyles } from '../../hooks/useStyles';\n\nimport type { SearchFieldProps } from './types';\n\n/** @public */\nexport const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(\n  (props, ref) => {\n    const {\n      className,\n      icon,\n      size = 'small',\n      label,\n      secondaryLabel,\n      description,\n      isRequired,\n      placeholder = 'Search',\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      ...rest\n    } = props;\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    const { classNames: textFieldClassNames, dataAttributes } = useStyles(\n      'TextField',\n      {\n        size,\n      },\n    );\n\n    const { classNames: searchFieldClassNames } = useStyles('SearchField', {\n      size,\n    });\n\n    // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n    const secondaryLabelText =\n      secondaryLabel || (isRequired ? 'Required' : null);\n\n    return (\n      <AriaSearchField\n        className={clsx(\n          textFieldClassNames.root,\n          searchFieldClassNames.root,\n          className,\n        )}\n        {...dataAttributes}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        {...rest}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div\n          className={textFieldClassNames.inputWrapper}\n          data-size={dataAttributes['data-size']}\n        >\n          {icon !== false && (\n            <div\n              className={textFieldClassNames.inputIcon}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon || <RiSearch2Line />}\n            </div>\n          )}\n          <Input\n            className={textFieldClassNames.input}\n            {...(icon !== false && { 'data-icon': true })}\n            placeholder={placeholder}\n          />\n          <Button\n            className={searchFieldClassNames.clear}\n            data-size={dataAttributes['data-size']}\n          >\n            <RiCloseCircleLine />\n          </Button>\n        </div>\n        <FieldError />\n      </AriaSearchField>\n    );\n  },\n);\n\nSearchField.displayName = 'searchField';\n"],"names":["AriaSearchField"],"mappings":";;;;;;;;;AA+BO,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,CAAC,OAAO,GAAQ,KAAA;AACd,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAO,GAAA,OAAA;AAAA,MACP,KAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAc,GAAA,QAAA;AAAA,MACd,YAAc,EAAA,SAAA;AAAA,MACd,iBAAmB,EAAA,cAAA;AAAA,MACnB,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAgB,EAAA;AAC3C,QAAQ,OAAA,CAAA,IAAA;AAAA,UACN;AAAA,SACF;AAAA;AACF,KACC,EAAA,CAAC,KAAO,EAAA,SAAA,EAAW,cAAc,CAAC,CAAA;AAErC,IAAA,MAAM,EAAE,UAAA,EAAY,mBAAqB,EAAA,cAAA,EAAmB,GAAA,SAAA;AAAA,MAC1D,WAAA;AAAA,MACA;AAAA,QACE;AAAA;AACF,KACF;AAEA,IAAA,MAAM,EAAE,UAAA,EAAY,qBAAsB,EAAA,GAAI,UAAU,aAAe,EAAA;AAAA,MACrE;AAAA,KACD,CAAA;AAGD,IAAM,MAAA,kBAAA,GACJ,cAAmB,KAAA,UAAA,GAAa,UAAa,GAAA,IAAA,CAAA;AAE/C,IACE,uBAAA,IAAA;AAAA,MAACA,aAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,mBAAoB,CAAA,IAAA;AAAA,UACpB,qBAAsB,CAAA,IAAA;AAAA,UACtB;AAAA,SACF;AAAA,QACC,GAAG,cAAA;AAAA,QACJ,YAAY,EAAA,SAAA;AAAA,QACZ,iBAAiB,EAAA,cAAA;AAAA,QAChB,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAA;AAAA,cACA,cAAgB,EAAA,kBAAA;AAAA,cAChB;AAAA;AAAA,WACF;AAAA,0BACA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,mBAAoB,CAAA,YAAA;AAAA,cAC/B,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,cAEpC,QAAA,EAAA;AAAA,gBAAA,IAAA,KAAS,KACR,oBAAA,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,mBAAoB,CAAA,SAAA;AAAA,oBAC/B,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,oBACrC,aAAY,EAAA,MAAA;AAAA,oBAEX,QAAA,EAAA,IAAA,wBAAS,aAAc,EAAA,EAAA;AAAA;AAAA,iBAC1B;AAAA,gCAEF,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,mBAAoB,CAAA,KAAA;AAAA,oBAC9B,GAAI,IAAA,KAAS,KAAS,IAAA,EAAE,aAAa,IAAK,EAAA;AAAA,oBAC3C;AAAA;AAAA,iBACF;AAAA,gCACA,GAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,qBAAsB,CAAA,KAAA;AAAA,oBACjC,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,oBAErC,8BAAC,iBAAkB,EAAA,EAAA;AAAA;AAAA;AACrB;AAAA;AAAA,WACF;AAAA,8BACC,UAAW,EAAA,EAAA;AAAA;AAAA;AAAA,KACd;AAAA;AAGN;AAEA,WAAA,CAAY,WAAc,GAAA,aAAA;;;;"}

package/dist/components/Select/Select.esm.js

@@ -0,0 +1,89 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useEffect } from 'react';
+import { Select as Select$1, Button, SelectValue, Popover, ListBox, ListBoxItem, Text } from 'react-aria-components';
+import clsx from 'clsx';
+import './Select.styles.css.esm.js';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
+import '@remixicon/react';
+import { Icon } from '../Icon/Icon.esm.js';
+import '../Icon/context.esm.js';
+import { FieldError } from '../FieldError/FieldError.esm.js';
+
+const Select = forwardRef((props, ref) => {
+  const {
+    className,
+    label,
+    description,
+    options,
+    placeholder = "Select an option",
+    size = "small",
+    icon,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    isRequired,
+    secondaryLabel,
+    style,
+    ...rest
+  } = props;
+  const { classNames: popoverClassNames } = useStyles("Popover");
+  const { classNames, dataAttributes } = useStyles("Select", {
+    size
+  });
+  useEffect(() => {
+    if (!label && !ariaLabel && !ariaLabelledBy) {
+      console.warn(
+        "TextField requires either a visible label, aria-label, or aria-labelledby for accessibility"
+      );
+    }
+  }, [label, ariaLabel, ariaLabelledBy]);
+  const secondaryLabelText = secondaryLabel || (isRequired ? "Required" : null);
+  return /* @__PURE__ */ jsxs(
+    Select$1,
+    {
+      className: clsx(classNames.root, className),
+      ...dataAttributes,
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          FieldLabel,
+          {
+            label,
+            secondaryLabel: secondaryLabelText,
+            description
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            className: classNames.trigger,
+            "data-size": dataAttributes["data-size"],
+            children: [
+              icon,
+              /* @__PURE__ */ jsx(SelectValue, { className: classNames.value }),
+              /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", name: "chevron-down" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(FieldError, {}),
+        /* @__PURE__ */ jsx(Popover, { className: popoverClassNames.root, children: /* @__PURE__ */ jsx(ListBox, { className: classNames.list, children: options?.map((option) => /* @__PURE__ */ jsxs(
+          ListBoxItem,
+          {
+            id: option.value,
+            className: classNames.item,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: classNames.itemIndicator, children: /* @__PURE__ */ jsx(Icon, { name: "check" }) }),
+              /* @__PURE__ */ jsx(Text, { slot: "label", className: classNames.itemLabel, children: option.label })
+            ]
+          },
+          option.value
+        )) }) })
+      ]
+    }
+  );
+});
+Select.displayName = "Select";
+
+export { Select };
+//# sourceMappingURL=Select.esm.js.map

package/dist/components/Select/Select.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.esm.js","sources":["../../../src/components/Select/Select.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, useEffect } from 'react';\nimport {\n  Select as AriaSelect,\n  SelectValue,\n  Button,\n  Popover,\n  ListBox,\n  ListBoxItem,\n  Text,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport './Select.styles.css';\nimport { SelectProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { FieldLabel } from '../FieldLabel';\nimport { Icon } from '../Icon';\nimport { FieldError } from '../FieldError';\n\n/** @public */\nexport const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {\n  const {\n    className,\n    label,\n    description,\n    options,\n    placeholder = 'Select an option',\n    size = 'small',\n    icon,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    isRequired,\n    secondaryLabel,\n    style,\n    ...rest\n  } = props;\n\n  const { classNames: popoverClassNames } = useStyles('Popover');\n  const { classNames, dataAttributes } = useStyles('Select', {\n    size,\n  });\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        'TextField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n      );\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n  const secondaryLabelText = secondaryLabel || (isRequired ? 'Required' : null);\n\n  return (\n    <AriaSelect\n      className={clsx(classNames.root, className)}\n      {...dataAttributes}\n      ref={ref}\n      {...rest}\n    >\n      <FieldLabel\n        label={label}\n        secondaryLabel={secondaryLabelText}\n        description={description}\n      />\n      <Button\n        className={classNames.trigger}\n        data-size={dataAttributes['data-size']}\n      >\n        {icon}\n        <SelectValue className={classNames.value} />\n        <Icon aria-hidden=\"true\" name=\"chevron-down\" />\n      </Button>\n      <FieldError />\n      <Popover className={popoverClassNames.root}>\n        <ListBox className={classNames.list}>\n          {options?.map(option => (\n            <ListBoxItem\n              key={option.value}\n              id={option.value}\n              className={classNames.item}\n            >\n              <div className={classNames.itemIndicator}>\n                <Icon name=\"check\" />\n              </div>\n              <Text slot=\"label\" className={classNames.itemLabel}>\n                {option.label}\n              </Text>\n            </ListBoxItem>\n          ))}\n        </ListBox>\n      </Popover>\n    </AriaSelect>\n  );\n});\n\nSelect.displayName = 'Select';\n"],"names":["AriaSelect"],"mappings":"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"}

package/dist/components/Select/Select.styles.css.esm.js

@@ -0,0 +1,7 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n.bui-Select[data-invalid] {\n  & .bui-SelectTrigger {\n    border-color: var(--bui-fg-danger);\n  }\n}\n\n.bui-SelectTrigger {\n  box-sizing: border-box;\n  border-radius: var(--bui-radius-3);\n  border: 1px solid var(--bui-border);\n  background-color: var(--bui-bg-surface-1);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n  cursor: pointer;\n  gap: var(--bui-space-2);\n  max-width: 100%;\n\n  & svg {\n    flex-shrink: 0;\n  }\n\n  &[data-size='small'] {\n    height: 2rem;\n    padding-inline: var(--bui-space-3);\n  }\n\n  &[data-size='medium'] {\n    height: 3rem;\n    padding-inline: var(--bui-space-4);\n  }\n\n  &[data-size='small'] svg {\n    width: 1rem;\n    height: 1rem;\n  }\n\n  &[data-size='medium'] svg {\n    width: 1.25rem;\n    height: 1.25rem;\n  }\n\n  &::placeholder {\n    color: var(--bui-fg-secondary);\n  }\n\n  &:hover {\n    border-color: var(--bui-border-hover);\n  }\n\n  &:focus-visible {\n    border-color: var(--bui-border-pressed);\n    outline: 0;\n  }\n\n  &[data-invalid] {\n    border-color: var(--bui-fg-danger);\n  }\n  &[data-invalid]:hover {\n    border-width: 2px;\n  }\n\n  &[data-invalid]:focus-visible {\n    border-width: 2px;\n  }\n\n  &[disabled] {\n    cursor: not-allowed;\n    border-color: var(--bui-border-disabled);\n    color: var(--bui-fg-disabled);\n  }\n\n  &[disabled] .bui-SelectValue {\n    color: var(--bui-fg-disabled);\n  }\n\n  &[data-popup-open] .bui-SelectIcon {\n    transform: rotate(180deg);\n  }\n}\n\n.bui-SelectValue {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  width: 100%;\n  font-size: var(--bui-font-size-3);\n  font-family: var(--bui-font-regular);\n  font-weight: var(--bui-font-weight-regular);\n  color: var(--bui-fg-primary);\n\n  & .bui-SelectItemIndicator {\n    display: none;\n  }\n\n  &[disabled] {\n    color: var(--bui-fg-disabled);\n  }\n}\n\n.bui-SelectItem {\n  position: relative;\n  width: var(--anchor-width);\n  display: grid;\n  grid-template-areas: 'icon text';\n  grid-template-columns: 1rem 1fr;\n  align-items: center;\n  padding-block: var(--bui-space-2);\n  padding-inline: var(--bui-space-4);\n  color: var(--bui-fg-primary);\n  border-radius: var(--bui-radius-3);\n  cursor: pointer;\n  user-select: none;\n  font-size: var(--bui-font-size-3);\n  gap: var(--bui-space-2);\n  outline: none;\n\n  &[data-focused] {\n    z-index: 0;\n    position: relative;\n    color: var(--bui-fg-primary);\n  }\n\n  &[data-focused]::before {\n    content: '';\n    z-index: -1;\n    position: absolute;\n    inset-block: 0;\n    inset-inline: 0.25rem;\n    border-radius: 0.25rem;\n    background-color: var(--bui-bg-tint-hover);\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    color: var(--bui-fg-disabled);\n  }\n\n  &[data-selected] .bui-SelectItemIndicator {\n    opacity: 1;\n  }\n}\n\n.bui-SelectItemIndicator {\n  grid-area: icon;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n}\n\n.bui-SelectItemLabel {\n  flex: 1;\n  grid-area: text;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=Select.styles.css.esm.js.map

package/dist/components/Select/Select.styles.css.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.styles.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}