@asnewyla/button-group 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 XD
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# @asnewyla/button-group
+
+Groups `@asnewyla/button` components visually (`role="group"`) and propagates
+`variant`, `size`, and `disabled` to every child via context. Any child can
+override an individual prop.
+
+## Install
+
+```bash
+npm install @asnewyla/button-group
+```
+
+## Usage
+
+```tsx
+import { Button } from '@asnewyla/button';
+import { ButtonGroup } from '@asnewyla/button-group';
+
+<ButtonGroup variant="secondary" aria-label="Text alignment">
+  <Button>Left</Button>
+  <Button>Center</Button>
+  <Button variant="destructive">Right</Button> {/* overrides the group */}
+</ButtonGroup>
+```
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ButtonVariant, ButtonSize } from '@asnewyla/button';
+
+declare const ButtonGroup: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "role"> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    children: ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
+
+export { ButtonGroup };

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ButtonVariant, ButtonSize } from '@asnewyla/button';
+
+declare const ButtonGroup: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "role"> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    children: ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
+
+export { ButtonGroup };

package/dist/index.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var react = require('react');
+var button = require('@asnewyla/button');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/ButtonGroup.tsx
+function ButtonGroupInner({ children, variant, size, disabled, ...restProps }, ref) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: role="group" on a div is a correct WAI-ARIA pattern for a button toolbar; <fieldset> is for form-control groupings and carries unwanted default browser chrome.
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref, role: "group", ...restProps, children: /* @__PURE__ */ jsxRuntime.jsx(button.ButtonGroupProvider, { value: { variant, size, disabled }, children }) })
+  );
+}
+var ButtonGroup = react.forwardRef(ButtonGroupInner);
+
+exports.ButtonGroup = ButtonGroup;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ButtonGroup.tsx"],"names":["jsx","ButtonGroupProvider","forwardRef"],"mappings":";;;;;;;AAmBA,SAAS,gBAAA,CACP,EAAE,QAAA,EAAU,OAAA,EAAS,MAAM,QAAA,EAAU,GAAG,SAAA,EAAU,EAClD,GAAA,EACA;AACA,EAAA;AAAA;AAAA,mCAEG,KAAA,EAAA,EAAI,GAAA,EAAU,IAAA,EAAK,OAAA,EAAS,GAAG,SAAA,EAC9B,QAAA,kBAAAA,cAAA,CAACC,0BAAA,EAAA,EAAoB,KAAA,EAAO,EAAE,OAAA,EAAS,IAAA,EAAM,QAAA,EAAS,EACnD,UACH,CAAA,EACF;AAAA;AAEJ;AAEO,IAAM,WAAA,GAAcC,iBAAW,gBAAgB","file":"index.js","sourcesContent":["import {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  type ReactNode,\n} from 'react';\nimport {\n  ButtonGroupProvider,\n  type ButtonVariant,\n  type ButtonSize,\n} from '@asnewyla/button';\n\nexport type ButtonGroupProps = Omit<ComponentPropsWithoutRef<'div'>, 'role'> & {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  disabled?: boolean;\n  children: ReactNode;\n};\n\nfunction ButtonGroupInner(\n  { children, variant, size, disabled, ...restProps }: ButtonGroupProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: role=\"group\" on a div is a correct WAI-ARIA pattern for a button toolbar; <fieldset> is for form-control groupings and carries unwanted default browser chrome.\n    <div ref={ref} role=\"group\" {...restProps}>\n      <ButtonGroupProvider value={{ variant, size, disabled }}>\n        {children}\n      </ButtonGroupProvider>\n    </div>\n  );\n}\n\nexport const ButtonGroup = forwardRef(ButtonGroupInner);\n"]}

package/dist/index.mjs

@@ -0,0 +1,16 @@
+import { forwardRef } from 'react';
+import { ButtonGroupProvider } from '@asnewyla/button';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/ButtonGroup.tsx
+function ButtonGroupInner({ children, variant, size, disabled, ...restProps }, ref) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: role="group" on a div is a correct WAI-ARIA pattern for a button toolbar; <fieldset> is for form-control groupings and carries unwanted default browser chrome.
+    /* @__PURE__ */ jsx("div", { ref, role: "group", ...restProps, children: /* @__PURE__ */ jsx(ButtonGroupProvider, { value: { variant, size, disabled }, children }) })
+  );
+}
+var ButtonGroup = forwardRef(ButtonGroupInner);
+
+export { ButtonGroup };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ButtonGroup.tsx"],"names":[],"mappings":";;;;;AAmBA,SAAS,gBAAA,CACP,EAAE,QAAA,EAAU,OAAA,EAAS,MAAM,QAAA,EAAU,GAAG,SAAA,EAAU,EAClD,GAAA,EACA;AACA,EAAA;AAAA;AAAA,wBAEG,KAAA,EAAA,EAAI,GAAA,EAAU,IAAA,EAAK,OAAA,EAAS,GAAG,SAAA,EAC9B,QAAA,kBAAA,GAAA,CAAC,mBAAA,EAAA,EAAoB,KAAA,EAAO,EAAE,OAAA,EAAS,IAAA,EAAM,QAAA,EAAS,EACnD,UACH,CAAA,EACF;AAAA;AAEJ;AAEO,IAAM,WAAA,GAAc,WAAW,gBAAgB","file":"index.mjs","sourcesContent":["import {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\n  type ReactNode,\n} from 'react';\nimport {\n  ButtonGroupProvider,\n  type ButtonVariant,\n  type ButtonSize,\n} from '@asnewyla/button';\n\nexport type ButtonGroupProps = Omit<ComponentPropsWithoutRef<'div'>, 'role'> & {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  disabled?: boolean;\n  children: ReactNode;\n};\n\nfunction ButtonGroupInner(\n  { children, variant, size, disabled, ...restProps }: ButtonGroupProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: role=\"group\" on a div is a correct WAI-ARIA pattern for a button toolbar; <fieldset> is for form-control groupings and carries unwanted default browser chrome.\n    <div ref={ref} role=\"group\" {...restProps}>\n      <ButtonGroupProvider value={{ variant, size, disabled }}>\n        {children}\n      </ButtonGroupProvider>\n    </div>\n  );\n}\n\nexport const ButtonGroup = forwardRef(ButtonGroupInner);\n"]}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@asnewyla/button-group",
+  "version": "0.1.0",
+  "description": "Groups buttons visually and propagates shared props via context",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xavierDelaFuente/xd-components.git",
+    "directory": "packages/button-group"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "keywords": [
+    "react",
+    "button-group",
+    "button",
+    "accessible"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@asnewyla/button": "0.1.0"
+  },
+  "devDependencies": {
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tsup": "^8.1.0",
+    "vitest": "^2.0.0",
+    "@vitest/coverage-v8": "^2.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.0",
+    "@testing-library/jest-dom": "^6.4.0",
+    "jsdom": "^24.0.0",
+    "typescript": "^5.5.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "type-check": "tsc --noEmit"
+  }
+}