@koobiq/react-components 0.0.1-beta.8 → 0.0.1-beta.9

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

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import { type ExtendableComponentPropsWithRef } from '@koobiq/react-core';
+import { type FieldAddonProps } from '../FieldAddon';
 export type FieldInputGroupProps = ExtendableComponentPropsWithRef<{
     children?: ReactNode;
     startAddon?: ReactNode;
@@ -7,5 +8,10 @@ export type FieldInputGroupProps = ExtendableComponentPropsWithRef<{
     disabled?: boolean;
     className?: string;
     error?: boolean;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        start?: FieldAddonProps;
+        end?: FieldAddonProps;
+    };
 }, 'div'>;
 export declare const FieldInputGroup: import("react").ForwardRefExoticComponent<Omit<FieldInputGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/FieldComponents/FieldInputGroup/FieldInputGroup.js

@@ -5,36 +5,38 @@ import { useInputContext, Group } from "@koobiq/react-primitives";
 import s from "./FieldInputGroup.module.css.js";
 import { FieldInputGroupContext } from "./FieldInputGroupContext.js";
 import { FieldAddon } from "../FieldAddon/FieldAddon.js";
-const FieldInputGroup = forwardRef(({ children, className, startAddon, endAddon, error, ...other }, ref) => {
-  const { value } = useInputContext();
-  const hasStartAddon = !!startAddon;
-  const hasEndAddon = !!endAddon;
-  const hasValue = isNotNil(value);
-  return /* @__PURE__ */ jsx(
-    Group,
-    {
-      className: clsx(
-        s.base,
-        hasStartAddon && s.hasStartAddon,
-        hasEndAddon && s.hasEndAddon,
-        className
-      ),
-      ...other,
-      ref,
-      children: ({ hovered, focusWithin, disabled }) => /* @__PURE__ */ jsxs(
-        FieldInputGroupContext.Provider,
-        {
-          value: { disabled, hovered, hasValue, focusWithin },
-          children: [
-            /* @__PURE__ */ jsx(FieldAddon, { placement: "start", error, children: startAddon }),
-            children,
-            /* @__PURE__ */ jsx(FieldAddon, { placement: "end", error, children: endAddon })
-          ]
-        }
-      )
-    }
-  );
-});
+const FieldInputGroup = forwardRef(
+  ({ children, className, startAddon, endAddon, error, slotProps, ...other }, ref) => {
+    const { value } = useInputContext();
+    const hasStartAddon = !!startAddon;
+    const hasEndAddon = !!endAddon;
+    const hasValue = isNotNil(value);
+    return /* @__PURE__ */ jsx(
+      Group,
+      {
+        className: clsx(
+          s.base,
+          hasStartAddon && s.hasStartAddon,
+          hasEndAddon && s.hasEndAddon,
+          className
+        ),
+        ...other,
+        ref,
+        children: ({ hovered, focusWithin, disabled }) => /* @__PURE__ */ jsxs(
+          FieldInputGroupContext.Provider,
+          {
+            value: { disabled, hovered, hasValue, focusWithin },
+            children: [
+              /* @__PURE__ */ jsx(FieldAddon, { placement: "start", error, ...slotProps?.start, children: startAddon }),
+              children,
+              /* @__PURE__ */ jsx(FieldAddon, { placement: "end", error, ...slotProps?.end, children: endAddon })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
 FieldInputGroup.displayName = "FieldInputGroup";
 export {
   FieldInputGroup

package/dist/components/Input/Input.js

@@ -21,7 +21,7 @@ const Input = forwardRef((props, ref) => {
     caption,
     ...other
   } = props;
-  const domRef = useDOMRef(ref);
+  const inputRef = useDOMRef(ref);
   const rootProps = mergeProps(
     {
       label,
@@ -42,7 +42,7 @@ const Input = forwardRef((props, ref) => {
         error,
         variant,
         disabled,
-        ref: domRef
+        ref: inputRef
       },
       slotProps?.input
     );

package/dist/components/Link/Link.js

@@ -1,33 +1,31 @@
 "use client";
 import { jsxs } from "react/jsx-runtime";
-import { polymorphicForwardRef, useDOMRef, clsx } from "@koobiq/react-core";
-import { useLink } from "@koobiq/react-primitives";
+import { polymorphicForwardRef, clsx } from "@koobiq/react-core";
+import { Link as Link$1 } from "@koobiq/react-primitives";
 import s from "./Link.module.css.js";
 const Link = polymorphicForwardRef((props, ref) => {
   const {
     variant = "text-normal",
     visitable = false,
     pseudo = false,
+    disabled,
     as = "a",
     startIcon,
     endIcon,
     children,
     className,
-    style
+    ...other
   } = props;
-  const Tag = as;
-  const domRef = useDOMRef(ref);
-  const elementType = as !== "a" && as !== "button" ? `${as}` : void 0;
-  const { linkProps, hovered, pressed, focusVisible } = useLink(
-    { ...props, elementType },
-    domRef
-  );
   const hasIcon = Boolean(startIcon || endIcon);
+  const elementType = as !== "a" && as !== "button" ? `${as}` : void 0;
   return /* @__PURE__ */ jsxs(
-    Tag,
+    Link$1,
     {
-      ...linkProps,
-      className: clsx(
+      as,
+      disabled,
+      elementType,
+      ...disabled && { tabIndex: -1 },
+      className: ({ hovered, pressed, focusVisible }) => clsx(
         s.base,
         s[variant],
         pseudo && s.pseudo,
@@ -38,8 +36,8 @@ const Link = polymorphicForwardRef((props, ref) => {
         focusVisible && s.focusVisible,
         className
       ),
-      style,
-      ref: domRef,
+      ...other,
+      ref,
       children: [
         startIcon,
         children,

package/dist/components/List/types.d.ts

@@ -40,6 +40,8 @@ export type ListBaseProps<T extends object> = {
     onAction?: ListPropOnAction<T>;
     /** How multiple selection should behave in the collection. */
     selectionBehavior?: ListPropSelectionBehavior<T>;
+    /** Whether to autofocus the list or an option. */
+    autoFocus?: boolean | 'first' | 'last';
     /** The props used for each slot inside. */
     slotProps?: {
         label?: TypographyProps;

package/dist/components/Popover/Popover.js

@@ -68,7 +68,7 @@ const Popover = forwardRef(
         triggerRef: anchorRef || controlRef,
         isKeyboardDismissDisabled: disableExitOnEscapeKeyDown
       },
-      { ...state, isOpen: opened }
+      { ...state, isOpen: openState || opened }
     );
     const resolvedChildren = () => {
       if (typeof children === "function")

package/dist/components/RadioGroup/components/Radio/Radio.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { mergeProps, isNotNil, clsx } from "@koobiq/react-core";
+import { IconCircleXs16 } from "@koobiq/react-icons";
 import { Radio as Radio$1 } from "@koobiq/react-primitives";
 import s from "./Radio.module.css.js";
 import { useRadioGroupState } from "../../RadioContext.js";
@@ -33,7 +34,7 @@ const Radio = forwardRef(
     const circleProps = mergeProps({ className: s.circle }, slotProps?.circle);
     const labelProps = slotProps?.label;
     return /* @__PURE__ */ jsxs(Radio$1, { ...commonProps, ref, children: [
-      /* @__PURE__ */ jsx("span", { ...circleProps }),
+      /* @__PURE__ */ jsx("span", { ...circleProps, children: /* @__PURE__ */ jsx(IconCircleXs16, { className: s.icon }) }),
       isNotNil(children) && /* @__PURE__ */ jsx("span", { ...labelProps, children })
     ] });
   }

package/dist/components/RadioGroup/components/Radio/Radio.module.css.js

@@ -1,5 +1,6 @@
 const base = "kbq-radio-c3ed31";
 const circle = "kbq-radio-circle-a0903b";
+const icon = "kbq-radio-icon-148a68";
 const normal = "kbq-radio-normal-81ed3e";
 const big = "kbq-radio-big-06db10";
 const hovered = "kbq-radio-hovered-3999f1";
@@ -12,6 +13,7 @@ const end = "kbq-radio-end-8689f9";
 const s = {
   base,
   circle,
+  icon,
   normal,
   big,
   hovered,
@@ -33,6 +35,7 @@ export {
   error,
   focusVisible,
   hovered,
+  icon,
   normal,
   start
 };

package/dist/style.css

@@ -1542,14 +1542,15 @@
   --link-outline-width: var(--kbq-size-3xs);
   cursor: pointer;
   color: var(--kbq-foreground-theme);
+  outline: var(--link-outline-width) solid;
   text-decoration: underline;
   -webkit-text-decoration-color: var(--kbq-line-theme-less);
   text-decoration-color: var(--kbq-line-theme-less);
+  transition: color var(--kbq-transition-default), outline var(--kbq-transition-default), text-decoration-color var(--kbq-transition-default);
   background: none;
   border: none;
-  outline: none;
+  outline-color: #0000;
   padding: 0;
-  transition: color;
 }
 
 .kbq-link-093ccd[aria-disabled="true"] {
@@ -1558,6 +1559,7 @@
   text-decoration: none;
   -webkit-text-decoration-color: var(--kbq-states-line-disabled);
   text-decoration-color: var(--kbq-states-line-disabled);
+  outline-color: #0000;
 }
 
 .kbq-link-hovered-1916bc {
@@ -1574,6 +1576,7 @@
 
 .kbq-link-focusVisible-a98307 {
   color: var(--kbq-foreground-theme);
+  outline-color: var(--kbq-states-line-focus-theme);
   -webkit-text-decoration-color: var(--kbq-line-theme-less);
   text-decoration-color: var(--kbq-line-theme-less);
 }
@@ -1596,13 +1599,8 @@
   text-decoration-color: var(--kbq-line-visited);
 }
 
-.kbq-link-pseudo-5f21eb:where(:not(.kbq-link-pressed-0b493d, .kbq-link-hovered-1916bc)) {
-  text-decoration: none;
-}
-
-.kbq-link-pseudo-5f21eb:where(.kbq-link-focusVisible-a98307) {
-  outline: var(--link-outline-width) solid var(--kbq-states-line-focus-theme);
-  outline-offset: -1px;
+.kbq-link-pseudo-5f21eb:where(:not(.kbq-link-pressed-0b493d, .kbq-link-hovered-1916bc)), .kbq-link-pseudo-5f21eb[aria-disabled="true"] {
+  text-decoration-color: #0000;
 }
 
 .kbq-link-hasIcon-ea84d7 {
@@ -2016,6 +2014,10 @@
   --field-input-placeholder-color: var(--kbq-foreground-error-tertiary);
 }
 
+.kbq-fieldinput-disabled-59285a {
+  cursor: not-allowed;
+}
+
 .kbq-fieldinput-filled-abb632:where(.kbq-fieldinput-disabled-59285a) {
   --field-input-color: var(--kbq-states-foreground-disabled);
   --field-input-border-color: var(--kbq-states-line-disabled);
@@ -2102,10 +2104,10 @@
   --radio-border-radius: 50%;
   --radio-icon-color: transparent;
   --radio-outline-color: transparent;
-  --radio-color: var(--kbq-foreground-contrast);
   --radio-icon-size: var(--kbq-size-xs);
   --radio-outline-width: var(--kbq-size-3xs);
   --radio-bg-color: var(--kbq-background-bg);
+  --radio-color: var(--kbq-foreground-contrast);
   --radio-border-width: var(--kbq-size-border-width);
   --radio-border-color: var(--kbq-line-contrast-fade);
   cursor: pointer;
@@ -2125,24 +2127,19 @@
   margin-block: var(--radio-margin-block);
   border-radius: var(--radio-border-radius);
   border: var(--radio-border-width) solid var(--radio-border-color);
-  transition: background-color var(--kbq-transition-default), border var(--kbq-transition-default), outline-color var(--kbq-transition-default), color var(--kbq-transition-default);
+  transition: background-color var(--kbq-transition-default), border var(--kbq-transition-default), outline-color var(--kbq-transition-default);
   outline-offset: calc(-1 * var(--radio-outline-width) / 2);
   outline: var(--radio-outline-width) solid var(--radio-outline-color);
-  position: relative;
+  justify-content: center;
+  align-items: center;
+  display: flex;
 }
 
-.kbq-radio-circle-a0903b:before {
-  content: "";
-  opacity: var(--radio-opacity);
-  block-size: var(--radio-icon-size);
-  inline-size: var(--radio-icon-size);
-  transition: opacity var(--kbq-transition-default);
-  background-color: currentColor;
-  border-radius: 50%;
-  position: absolute;
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
-  transform: translate(-50%, -50%);
+.kbq-radio-icon-148a68 {
+  opacity: 0;
+  transition: transform var(--kbq-transition-slow), opacity var(--kbq-transition-slow);
+  flex-shrink: 0;
+  transform: scale(.1);
 }
 
 .kbq-radio-normal-81ed3e {
@@ -2185,6 +2182,11 @@
   --radio-opacity: 1;
 }
 
+.kbq-radio-checked-a71e68 .kbq-radio-icon-148a68 {
+  opacity: 1;
+  transform: scale(1);
+}
+
 .kbq-radio-checked-a71e68:where(.kbq-radio-hovered-3999f1) {
   --radio-icon-color: var(--kbq-white-default);
   --radio-bg-color: var(--kbq-states-background-theme-hover);
@@ -2945,6 +2947,7 @@
   transform: var(--popover-transform);
 }
 .kbq-list-928929 {
+  outline: none;
   margin: 0;
   padding: 0;
   list-style: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.0.1-beta.8",
+  "version": "0.0.1-beta.9",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -22,10 +22,10 @@
     "@koobiq/design-tokens": "^3.12.1",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/logger": "0.0.1-beta.8",
-    "@koobiq/react-core": "0.0.1-beta.8",
-    "@koobiq/react-icons": "0.0.1-beta.8",
-    "@koobiq/react-primitives": "0.0.1-beta.8"
+    "@koobiq/logger": "0.0.1-beta.9",
+    "@koobiq/react-core": "0.0.1-beta.9",
+    "@koobiq/react-primitives": "0.0.1-beta.9",
+    "@koobiq/react-icons": "0.0.1-beta.9"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.11.2",