@koobiq/react-components 0.7.0 → 0.8.0

package/dist/style.css

@@ -238,6 +238,86 @@
   margin-inline: var(--container-position);
   padding: 0 var(--container-margins);
 }
+.kbq-formcontrol-dbb0e4 {
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  display: inline-flex;
+  position: relative;
+}
+
+.kbq-formcontrol-fullWidth-b3e32c {
+  inline-size: 100%;
+}
+
+.kbq-formcontrol-top-17ba41 {
+  flex-direction: column;
+}
+
+.kbq-formcontrol-side-3e528f {
+  flex-direction: row;
+}
+.kbq-formcontrollabel-f90f77 {
+  font-size: var(--kbq-typography-text-normal-font-size);
+  font-weight: var(--kbq-typography-text-normal-font-weight);
+  line-height: var(--kbq-typography-text-normal-line-height);
+  font-family: var(--kbq-typography-text-normal-font-family);
+  font-style: var(--kbq-typography-text-normal-font-style);
+  text-transform: var(--kbq-typography-text-normal-text-transform);
+  font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
+  letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
+  text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height)  - var(--kbq-typography-text-normal-font-size)) / 2);
+  color: var(--kbq-foreground-contrast);
+  vertical-align: top;
+  box-sizing: border-box;
+}
+
+.kbq-formcontrollabel-hidden-b6c00b {
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+  block-size: 1px;
+  inline-size: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+.kbq-formcontrollabel-sup-08dbc0 {
+  color: var(--kbq-foreground-error);
+  vertical-align: baseline;
+  line-height: 0;
+  font-size: var(--kbq-typography-text-normal-font-size);
+  font-weight: var(--kbq-typography-text-normal-font-weight);
+  line-height: var(--kbq-typography-text-normal-line-height);
+  font-family: var(--kbq-typography-text-normal-font-family);
+  font-style: var(--kbq-typography-text-normal-font-style);
+  text-transform: var(--kbq-typography-text-normal-text-transform);
+  font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
+  letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
+  text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height)  - var(--kbq-typography-text-normal-font-size)) / 2);
+  position: relative;
+}
+
+[data-label-placement="top"] .kbq-formcontrollabel-f90f77 {
+  padding-block-end: var(--kbq-size-xs);
+}
+
+[data-label-placement="side"] .kbq-formcontrollabel-f90f77 {
+  padding-block-start: var(--kbq-size-xs);
+  padding-inline-end: var(--kbq-size-l);
+}
+
+[data-label-align="start"] .kbq-formcontrollabel-f90f77 {
+  text-align: start;
+}
+
+[data-label-align="end"] .kbq-formcontrollabel-f90f77 {
+  text-align: end;
+  justify-content: flex-end;
+}
 .kbq-alert-bc5d04 {
   --alert-padding: 0 var(--kbq-size-s) 0 var(--kbq-size-s);
   --alert-content-padding: var(--kbq-size-l) var(--kbq-size-s) var(--kbq-size-l) var(--kbq-size-m);
@@ -1916,64 +1996,23 @@
   --badge-bg-color: ;
   --badge-color: var(--kbq-foreground-contrast);
 }
-.kbq-fieldcontrol-ef127a {
-  --field-control-size-height: 32px;
+.kbq-field-25e8f8 {
+  --field-size-height: 32px;
   --field-input-padding-inline-start: var(--kbq-size-m);
   --field-input-padding-inline-end: var(--kbq-size-m);
   --field-input-padding-block-start: var(--kbq-size-xs);
   --field-input-padding-block-end: var(--kbq-size-xs);
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  display: inline-flex;
-  position: relative;
-}
-
-.kbq-fieldcontrol-fullWidth-44b574 {
   inline-size: 100%;
 }
-.kbq-fieldlabel-141082 {
-  inline-size: 100%;
-  font-size: var(--kbq-typography-text-normal-font-size);
-  font-weight: var(--kbq-typography-text-normal-font-weight);
-  line-height: var(--kbq-typography-text-normal-line-height);
-  font-family: var(--kbq-typography-text-normal-font-family);
-  font-style: var(--kbq-typography-text-normal-font-style);
-  text-transform: var(--kbq-typography-text-normal-text-transform);
-  font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
-  letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
-  text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height)  - var(--kbq-typography-text-normal-font-size)) / 2);
-  color: var(--kbq-foreground-contrast-secondary);
-  margin-block-end: var(--kbq-size-xs);
-}
 
-.kbq-fieldlabel-hidden-9f53e4 {
-  clip: rect(0, 0, 0, 0);
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-  block-size: 1px;
-  inline-size: 1px;
-  margin: -1px;
-  padding: 0;
-  position: absolute;
-  overflow: hidden;
+.kbq-field-25e8f8 > :first-child + * {
+  margin: 0;
+  margin-block-start: var(--kbq-size-xs);
 }
 
-.kbq-fieldlabel-sup-23c824 {
-  color: var(--kbq-foreground-error);
-  vertical-align: baseline;
-  line-height: 0;
-  font-size: var(--kbq-typography-text-normal-font-size);
-  font-weight: var(--kbq-typography-text-normal-font-weight);
-  line-height: var(--kbq-typography-text-normal-line-height);
-  font-family: var(--kbq-typography-text-normal-font-family);
-  font-style: var(--kbq-typography-text-normal-font-style);
-  text-transform: var(--kbq-typography-text-normal-text-transform);
-  font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
-  letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
-  text-underline-offset: calc(( var(--kbq-typography-text-normal-line-height)  - var(--kbq-typography-text-normal-font-size)) / 2);
-  position: relative;
+.kbq-field-25e8f8 > :first-child + * + * {
+  margin: 0;
+  margin-block-start: var(--kbq-size-xxs);
 }
 .kbq-fieldcontentgroup-d85be3 {
   --field-content-border-color: ;
@@ -2014,16 +2053,6 @@
   inset: 0;
 }
 
-.kbq-fieldcontentgroup-d85be3 + * {
-  margin: 0;
-  margin-block-start: var(--kbq-size-xs);
-}
-
-.kbq-fieldcontentgroup-d85be3 + * + * {
-  margin: 0;
-  margin-block-start: var(--kbq-size-xxs);
-}
-
 .kbq-fieldcontentgroup-hasStartAddon-62fb80 {
   --field-control-start-addon-inline-size: 36px;
 }
@@ -2063,7 +2092,7 @@
   --field-addon-color: var(--kbq-icon-contrast-fade);
   z-index: 1;
   color: var(--field-addon-color);
-  block-size: var(--field-control-size-height);
+  block-size: var(--field-size-height);
   transition: color var(--kbq-transition-default);
   justify-content: center;
   align-items: center;
@@ -2122,11 +2151,11 @@
 }
 
 .kbq-fieldinput-77b90b:where(input) {
-  block-size: var(--field-control-size-height);
+  block-size: var(--field-size-height);
 }
 
 .kbq-fieldinput-77b90b:where(textarea) {
-  min-block-size: var(--field-control-size-height);
+  min-block-size: var(--field-size-height);
   resize: none;
 }
 
@@ -2219,6 +2248,9 @@
 .kbq-inputnumbercountercontrols-decrement-fbd37a > svg {
   margin-block-start: calc(-1 * var(--kbq-size-3xs));
 }
+[data-label-placement="side"] .kbq-radiogroup-label-750809 {
+  padding-block-start: 0;
+}
 .kbq-radio-c3ed31 {
   --radio-size: ;
   --radio-opacity: 0;
@@ -3148,22 +3180,6 @@
 [data-slot="select-value"] .kbq-listitemtext-caption-ae96af {
   display: none;
 }
-.kbq-select-6d31ad {
-  --field-input-padding-inline-start: var(--kbq-size-m);
-  --field-input-padding-inline-end: var(--kbq-size-m);
-  --field-input-padding-block-start: var(--kbq-size-xs);
-  --field-input-padding-block-end: var(--kbq-size-xs);
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  display: inline-flex;
-  position: relative;
-}
-
-.kbq-select-fullWidth-1dfc13 {
-  inline-size: 100%;
-}
-
 .kbq-select-addon-cbc524 {
   pointer-events: none;
 }
@@ -3222,7 +3238,7 @@
   inline-size: 100%;
   color: var(--field-input-color);
   background: var(--field-input-bg-color);
-  min-block-size: var(--field-control-size-height);
+  min-block-size: var(--field-size-height);
   padding-inline: var(--field-input-padding-inline-start) var(--field-input-padding-inline-end);
   transition: color var(--kbq-transition-default), background-color var(--kbq-transition-default);
   font-size: var(--kbq-typography-text-normal-font-size);
@@ -4006,7 +4022,7 @@
   cursor: pointer;
   box-sizing: border-box;
   inline-size: 100%;
-  block-size: var(--field-control-size-height);
+  block-size: var(--field-size-height);
   border-radius: inherit;
   color: var(--field-input-color);
   background: var(--field-input-bg-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -28,10 +28,10 @@
     "@koobiq/design-tokens": "^3.14.0",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/react-core": "0.7.0",
-    "@koobiq/react-icons": "0.7.0",
-    "@koobiq/logger": "0.7.0",
-    "@koobiq/react-primitives": "0.7.0"
+    "@koobiq/logger": "0.8.0",
+    "@koobiq/react-core": "0.8.0",
+    "@koobiq/react-icons": "0.8.0",
+    "@koobiq/react-primitives": "0.8.0"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.14.0",

package/dist/components/FieldComponents/FieldControl/FieldControl.d.ts

@@ -1,8 +0,0 @@
-import type { ComponentPropsWithRef, ElementType } from 'react';
-import { type DataAttributeProps } from '@koobiq/react-core';
-export type FieldControlBaseProps = {
-    fullWidth?: boolean;
-    className?: string;
-} & DataAttributeProps;
-export declare const FieldControl: import("@koobiq/react-core").PolyForwardComponent<"div", FieldControlBaseProps, ElementType>;
-export type FieldControlProps<As extends ElementType = 'div'> = ComponentPropsWithRef<typeof FieldControl<As>>;

package/dist/components/FieldComponents/FieldControl/FieldControl.js

@@ -1,17 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
-import s from "./FieldControl.module.css.js";
-const FieldControl = polymorphicForwardRef(
-  ({ fullWidth = false, className, as: Tag = "div", ...other }, ref) => /* @__PURE__ */ jsx(
-    Tag,
-    {
-      className: clsx(s.base, fullWidth && s.fullWidth, className),
-      ...other,
-      ref
-    }
-  )
-);
-FieldControl.displayName = "FieldControl";
-export {
-  FieldControl
-};

package/dist/components/FieldComponents/FieldControl/FieldControl.module.css.js

@@ -1,11 +0,0 @@
-const base = "kbq-fieldcontrol-ef127a";
-const fullWidth = "kbq-fieldcontrol-fullWidth-44b574";
-const s = {
-  base,
-  fullWidth
-};
-export {
-  base,
-  s as default,
-  fullWidth
-};

package/dist/components/FieldComponents/FieldControl/index.d.ts

@@ -1 +0,0 @@
-export * from './FieldControl';

package/dist/components/FieldComponents/FieldLabel/FieldLabel.d.ts

@@ -1,9 +0,0 @@
-import type { ReactNode } from 'react';
-import type { ExtendableComponentPropsWithRef } from '@koobiq/react-core';
-export type FieldLabelProps = ExtendableComponentPropsWithRef<{
-    isHidden?: boolean;
-    className?: string;
-    isRequired?: boolean;
-    children?: ReactNode;
-}, 'label'>;
-export declare const FieldLabel: import("react").ForwardRefExoticComponent<Omit<FieldLabelProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;

package/dist/components/FieldComponents/FieldLabel/FieldLabel.js

@@ -1,24 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { isNotNil, clsx } from "@koobiq/react-core";
-import { Label } from "@koobiq/react-primitives";
-import s from "./FieldLabel.module.css.js";
-const FieldLabel = forwardRef(
-  ({ children, className, isHidden = false, isRequired = false, ...other }, ref) => isNotNil(children) ? /* @__PURE__ */ jsxs(
-    Label,
-    {
-      className: clsx(s.base, isHidden && s.hidden, className),
-      ...other,
-      ref,
-      children: [
-        children,
-        " ",
-        isRequired && /* @__PURE__ */ jsx("sup", { className: s.sup, children: "*" })
-      ]
-    }
-  ) : null
-);
-FieldLabel.displayName = "FieldLabel";
-export {
-  FieldLabel
-};

package/dist/components/FieldComponents/FieldLabel/FieldLabel.module.css.js

@@ -1,14 +0,0 @@
-const base = "kbq-fieldlabel-141082";
-const hidden = "kbq-fieldlabel-hidden-9f53e4";
-const sup = "kbq-fieldlabel-sup-23c824";
-const s = {
-  base,
-  hidden,
-  sup
-};
-export {
-  base,
-  s as default,
-  hidden,
-  sup
-};

package/dist/components/FieldComponents/FieldLabel/index.d.ts

@@ -1 +0,0 @@
-export * from './FieldLabel';

package/dist/components/RadioGroup/components/RadioGroupDescription/RadioGroupDescription.d.ts

@@ -1,7 +0,0 @@
-import { type TypographyProps } from '../../../Typography';
-export type RadioGroupDescriptionProps = TypographyProps;
-export declare const RadioGroupDescription: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
-    ref?: ((instance: HTMLParagraphElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
-}, "as" | keyof import("../../..").TypographyBaseProps> & import("../../..").TypographyBaseProps & {
-    as?: "p" | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/components/RadioGroup/components/RadioGroupDescription/RadioGroupDescription.js

@@ -1,21 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { isNotNil } from "@koobiq/react-core";
-import { Typography } from "../../../Typography/Typography.js";
-const RadioGroupDescription = forwardRef(
-  ({ children, ...other }, ref) => isNotNil(children) ? /* @__PURE__ */ jsx(
-    Typography,
-    {
-      variant: "text-compact",
-      slot: "description",
-      color: "contrast-secondary",
-      ...other,
-      ref,
-      children
-    }
-  ) : null
-);
-RadioGroupDescription.displayName = "RadioGroupDescription";
-export {
-  RadioGroupDescription
-};

package/dist/components/RadioGroup/components/RadioGroupDescription/index.d.ts

@@ -1 +0,0 @@
-export * from './RadioGroupDescription';

package/dist/components/RadioGroup/components/RadioGroupLabel/RadioGroupLabel.d.ts

@@ -1,6 +0,0 @@
-import type { ReactNode } from 'react';
-import { type TypographyProps } from '../../../Typography';
-export type RadioGroupLabelProps = TypographyProps<'span'> & {
-    children?: ReactNode;
-};
-export declare const RadioGroupLabel: import("react").ForwardRefExoticComponent<Omit<RadioGroupLabelProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/RadioGroup/components/RadioGroupLabel/RadioGroupLabel.js

@@ -1,14 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { isNotNil } from "@koobiq/react-core";
-import { Label } from "@koobiq/react-primitives";
-import { Typography } from "../../../Typography/Typography.js";
-const RadioGroupLabelTypography = forwardRef((props, ref) => /* @__PURE__ */ jsx(Typography, { as: "span", ...props, ref }));
-RadioGroupLabelTypography.displayName = "RadioGroupLabelTypography";
-const RadioGroupLabel = forwardRef(
-  ({ children, ...other }, ref) => isNotNil(children) ? /* @__PURE__ */ jsx(Label, { as: RadioGroupLabelTypography, ...other, ref, children }) : null
-);
-RadioGroupLabel.displayName = "RadioGroupLabel";
-export {
-  RadioGroupLabel
-};

package/dist/components/RadioGroup/components/RadioGroupLabel/index.d.ts

@@ -1 +0,0 @@
-export * from './RadioGroupLabel';