jvetrau-ds 0.2.16 → 0.2.17

package/components/choice-group/choice-group.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('./choice-group.css');
+var classnames = require('../helpers/classnames');
+
+const ChoiceGroup = ({
+  direction = "column",
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames.classnames(
+    "choice-group",
+    className,
+    {
+      "choice-group--row": direction === "row",
+      "choice-group--column": direction === "column"
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children
+    }
+  );
+};
+var choice_group_default = ChoiceGroup;
+
+module.exports = choice_group_default;
+//# sourceMappingURL=choice-group.cjs.map
+//# sourceMappingURL=choice-group.cjs.map

package/components/choice-group/choice-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/choice-group/choice-group.tsx"],"names":["classnames","jsx"],"mappings":";;;;;;AAcA,MAAM,cAEF,CAAC;AAAA,EACH,SAAA,GAAY,QAAA;AAAA,EACZ,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,qBACE,SAAA,KAAc,KAAA;AAAA,MAChB,wBACE,SAAA,KAAc;AAAA;AAClB,GACF;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,oBAAA,GAAQ","file":"choice-group.cjs","sourcesContent":["import React from 'react';\n\nimport './choice-group.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type ChoiceGroupDirection =\n  | 'column'\n  | 'row';\n\nexport interface ChoiceGroupProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  direction?: ChoiceGroupDirection;\n}\n\nconst ChoiceGroup: React.FC<\n  ChoiceGroupProps\n> = ({\n  direction = 'column',\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'choice-group',\n    className,\n    {\n      'choice-group--row':\n        direction === 'row',\n      'choice-group--column':\n        direction === 'column',\n    },\n  );\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default ChoiceGroup;\n"]}

package/components/choice-group/choice-group.css

@@ -0,0 +1,50 @@
+.choice-group {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  gap: var(--margin-choice);
+
+  min-width: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.choice-group--column {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  flex-direction: column;
+  align-items: flex-start;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.choice-group--row {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}

package/components/choice-group/choice-group.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './choice-group.css';
+export type ChoiceGroupDirection = 'column' | 'row';
+export interface ChoiceGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    direction?: ChoiceGroupDirection;
+}
+declare const ChoiceGroup: React.FC<ChoiceGroupProps>;
+export default ChoiceGroup;

package/components/choice-group/choice-group.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import './choice-group.css';
+import { classnames } from '../helpers/classnames';
+
+const ChoiceGroup = ({
+  direction = "column",
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames(
+    "choice-group",
+    className,
+    {
+      "choice-group--row": direction === "row",
+      "choice-group--column": direction === "column"
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children
+    }
+  );
+};
+var choice_group_default = ChoiceGroup;
+
+export { choice_group_default as default };
+//# sourceMappingURL=choice-group.js.map
+//# sourceMappingURL=choice-group.js.map

package/components/choice-group/choice-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/choice-group/choice-group.tsx"],"names":[],"mappings":";;;;AAcA,MAAM,cAEF,CAAC;AAAA,EACH,SAAA,GAAY,QAAA;AAAA,EACZ,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,qBACE,SAAA,KAAc,KAAA;AAAA,MAChB,wBACE,SAAA,KAAc;AAAA;AAClB,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,oBAAA,GAAQ","file":"choice-group.js","sourcesContent":["import React from 'react';\n\nimport './choice-group.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type ChoiceGroupDirection =\n  | 'column'\n  | 'row';\n\nexport interface ChoiceGroupProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  direction?: ChoiceGroupDirection;\n}\n\nconst ChoiceGroup: React.FC<\n  ChoiceGroupProps\n> = ({\n  direction = 'column',\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'choice-group',\n    className,\n    {\n      'choice-group--row':\n        direction === 'row',\n      'choice-group--column':\n        direction === 'column',\n    },\n  );\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default ChoiceGroup;\n"]}

package/components/choice-group/choice-group.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const choiceGroupMeta: ComponentMeta;

package/components/choice-group/index.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var choiceGroup = require('./choice-group');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var choiceGroup__default = /*#__PURE__*/_interopDefault(choiceGroup);
+
+
+
+Object.defineProperty(exports, "ChoiceGroup", {
+  enumerable: true,
+  get: function () { return choiceGroup__default.default; }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () { return choiceGroup__default.default; }
+});
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/components/choice-group/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs","sourcesContent":[]}

package/components/choice-group/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './choice-group';
+export { default as ChoiceGroup } from './choice-group';
+export type { ChoiceGroupDirection, ChoiceGroupProps, } from './choice-group';

package/components/choice-group/index.js

@@ -0,0 +1,3 @@
+export { default as ChoiceGroup, default } from './choice-group';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/components/choice-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/components/index.cjs

@@ -7,6 +7,7 @@ var select = require('./select/select');
 var dropdown = require('./dropdown/dropdown');
 var checkbox = require('./checkbox/checkbox');
 var radio = require('./radio/radio');
+var choiceGroup = require('./choice-group');
 var field = require('./field/field');
 var fieldGroup = require('./field-group/field-group');
 var formMessage = require('./form-message');
@@ -40,6 +41,7 @@ var select__default = /*#__PURE__*/_interopDefault(select);
 var dropdown__default = /*#__PURE__*/_interopDefault(dropdown);
 var checkbox__default = /*#__PURE__*/_interopDefault(checkbox);
 var radio__default = /*#__PURE__*/_interopDefault(radio);
+var choiceGroup__default = /*#__PURE__*/_interopDefault(choiceGroup);
 var field__default = /*#__PURE__*/_interopDefault(field);
 var fieldGroup__default = /*#__PURE__*/_interopDefault(fieldGroup);
 var formMessage__default = /*#__PURE__*/_interopDefault(formMessage);
@@ -97,6 +99,10 @@ Object.defineProperty(exports, "Radio", {
   enumerable: true,
   get: function () { return radio__default.default; }
 });
+Object.defineProperty(exports, "ChoiceGroup", {
+  enumerable: true,
+  get: function () { return choiceGroup__default.default; }
+});
 Object.defineProperty(exports, "Field", {
   enumerable: true,
   get: function () { return field__default.default; }

package/components/index.d.ts

@@ -13,6 +13,8 @@ export { default as Checkbox } from './checkbox/checkbox';
 export type { CheckboxProps } from './checkbox/checkbox';
 export { default as Radio } from './radio/radio';
 export type { RadioProps } from './radio/radio';
+export { default as ChoiceGroup } from './choice-group';
+export type { ChoiceGroupDirection, ChoiceGroupProps, } from './choice-group';
 export { default as Field } from './field/field';
 export type { FieldProps } from './field/field';
 export { default as FieldGroup } from './field-group/field-group';

package/components/index.js

@@ -5,6 +5,7 @@ export { default as Select } from './select/select';
 export { default as Dropdown } from './dropdown/dropdown';
 export { default as Checkbox } from './checkbox/checkbox';
 export { default as Radio } from './radio/radio';
+export { default as ChoiceGroup } from './choice-group';
 export { default as Field } from './field/field';
 export { default as FieldGroup } from './field-group/field-group';
 export { default as FormMessage } from './form-message';

package/index.cjs

@@ -7,6 +7,7 @@ var select = require('./components/select');
 var dropdown = require('./components/dropdown');
 var checkbox = require('./components/checkbox');
 var radio = require('./components/radio');
+var choiceGroup = require('./components/choice-group');
 var field = require('./components/field');
 var fieldGroup = require('./components/field-group');
 var formMessage = require('./components/form-message');
@@ -52,6 +53,7 @@ var select__default = /*#__PURE__*/_interopDefault(select);
 var dropdown__default = /*#__PURE__*/_interopDefault(dropdown);
 var checkbox__default = /*#__PURE__*/_interopDefault(checkbox);
 var radio__default = /*#__PURE__*/_interopDefault(radio);
+var choiceGroup__default = /*#__PURE__*/_interopDefault(choiceGroup);
 var field__default = /*#__PURE__*/_interopDefault(field);
 var fieldGroup__default = /*#__PURE__*/_interopDefault(fieldGroup);
 var formMessage__default = /*#__PURE__*/_interopDefault(formMessage);
@@ -121,6 +123,10 @@ Object.defineProperty(exports, "Radio", {
   enumerable: true,
   get: function () { return radio__default.default; }
 });
+Object.defineProperty(exports, "ChoiceGroup", {
+  enumerable: true,
+  get: function () { return choiceGroup__default.default; }
+});
 Object.defineProperty(exports, "Field", {
   enumerable: true,
   get: function () { return field__default.default; }

package/index.d.ts

@@ -16,6 +16,8 @@ export { default as Checkbox } from './components/checkbox';
 export type { CheckboxProps } from './components/checkbox';
 export { default as Radio } from './components/radio';
 export type { RadioProps } from './components/radio';
+export { default as ChoiceGroup } from './components/choice-group';
+export type { ChoiceGroupDirection, ChoiceGroupProps, } from './components/choice-group';
 export { default as Field } from './components/field';
 export type { FieldProps } from './components/field';
 export { default as FieldGroup } from './components/field-group';

package/index.js

@@ -5,6 +5,7 @@ export { default as Select } from './components/select';
 export { default as Dropdown } from './components/dropdown';
 export { default as Checkbox } from './components/checkbox';
 export { default as Radio } from './components/radio';
+export { default as ChoiceGroup } from './components/choice-group';
 export { default as Field } from './components/field';
 export { default as FieldGroup } from './components/field-group';
 export { default as FormMessage } from './components/form-message';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvetrau-ds",
-  "version": "0.2.16",
+  "version": "0.2.17",
   "description": "Multi-brand React design system with semantic tokens",
   "license": "UNLICENSED",
   "type": "module",

package/styles.css

@@ -1497,6 +1497,58 @@
   cursor: not-allowed;
 }
 
+/* src/components/choice-group/choice-group.css */
+.choice-group {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  gap: var(--margin-choice);
+
+  min-width: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.choice-group--column {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  flex-direction: column;
+  align-items: flex-start;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.choice-group--row {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 /* src/components/course-outline/course-outline.css */
 .course-outline {
   /* color */