@kolking/react-ui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Nick Seryakov
+
+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,131 @@
+# React UI
+
+A React component library for building modern web apps. Its flexible theming system uses the SASS pre-processor and relies on CSS variables that can be customized to match your project's look and feel. The library is simple, lightweight and fast.
+
+## Install
+
+```sh
+yarn add @kolking/react-ui
+```
+
+## Theming Setup
+
+Add the following code at the beginning of your main SASS stylesheet to generate the global CSS variables required for the library components.
+
+```scss
+@use '@kolking/react-ui/styles/utils';
+@use '@kolking/react-ui/styles/theme';
+
+:root {
+  @include utils.vars(theme.$variables);
+  @include utils.vars(theme.$light-colors, 'color');
+
+  @media screen and (prefers-color-scheme: dark) {
+    @include utils.vars(theme.$dark-colors, 'color');
+  }
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+:focus-visible {
+  @include utils.focus-visible();
+}
+
+// ... rest of your global styles
+```
+
+Now import the library stylesheet along with your main stylesheet in the project's entry point.
+
+```tsx
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+
+import '@kolking/react-ui/styles/style.css';
+import './styles/main.scss';
+
+createRoot(document.getElementById('root')!).render(<App />);
+```
+
+This was a very basic setup with no customizations added to the default theme. Read below to understand what the default theme includes and learn how to modify it.
+
+## Default Theme
+
+The [default theme](https://github.com/kolking/react-ui/blob/main/lib/styles/_theme-default.scss) consists of several SASS maps that are combined into a [single map variable](https://github.com/kolking/react-ui/blob/main/lib/styles/_theme.scss#L20-L30) and then transformed into CSS variables using the [`utils.vars($var)`](https://github.com/kolking/react-ui/blob/main/lib/styles/_utils.scss#L8-L21) SASS mixin. For example:
+
+```scss
+// Map variable in the default theme
+$font-family: (
+  body: (-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif),
+  mono: (Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace),
+  heading: var(--font-family-body),
+);
+
+// CSS variables after transform
+--font-family-body: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
+--font-family-mono: Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+--font-family-heading: var(--font-family-body);
+```
+
+Therefore, to modify the default theme, you need to override the values by adding [configuration](https://sass-lang.com/documentation/at-rules/use/#configuration) to the `@use` rule. You can also add new variables, and they will be included in the theme:
+
+```scss
+@use '@kolking/react-ui/styles/utils';
+@use '@kolking/react-ui/styles/theme' with (
+  $font-family: (
+    body: ("Open Sans", sans-serif), // change --font-family-body variable
+  ),
+  $light-palette: (
+    colors: (
+      accent: #669900, // change --color-accent-[50...800] variables
+    ),
+  ),
+  $light-colors: (
+    hotpink: #F565A5, // add new --color-hotpink variable
+  ),
+);
+
+:root {
+  // the $variables and $light-colors now contain your modifications
+  @include utils.vars(theme.$variables);
+  @include utils.vars(theme.$light-colors, 'color');
+}
+```
+
+## Color Variables
+
+There are two types of color variables in the theme. First, the `$light-colors` and `$dark-colors`, which are transformed into CSS variables as they are. Second, the `$light-palette` and `$dark-palette` colors, which automatically generate 9 shades for each color. The naming convention is fairly common: `--color-name-[50|100|200|300|400|500|600|700|800]`, where `--color-name-500` is the original color, `50` to `400` are lighter tints, and `600` to `800` are darker shades.
+
+```scss
+// Base color in the light-palette
+$light-palette: (
+  colors: (
+    blue: #007AFF,
+  ),
+);
+
+// Generated CSS variables
+--color-blue-50: #F2F8FF;
+--color-blue-100: #E6F2FF;
+--color-blue-200: #CCE4FF;
+--color-blue-300: #99CAFF;
+--color-blue-400: #4DA2FF;
+--color-blue-500: #007AFF;
+--color-blue-600: #0567D1;
+--color-blue-700: #0A53A3;
+--color-blue-800: #0F4075;
+```
+## Component Variables
+
+Some components, such as `Input`, also add [CSS variables](https://github.com/kolking/react-ui/blob/main/lib/components/Fields/styles/input.module.scss) to the global scope. You may want to redefine these variables in your stylesheet, or use them when building your own components. Refer to the component styles for their global and local CSS variables.
+
+
+## Feedback
+
+If you have a feature request, found a bug, or have ideas for improvement, please [open an issue](https://github.com/kolking/react-ui/issues).
+
+
+## License
+
+Licensed under the MIT license.

package/dist/Input-Lz3ft8Tp.js

@@ -0,0 +1,96 @@
+import { jsxs as f, jsx as s } from "react/jsx-runtime";
+import { c as u } from "./index-DyIdU--j.js";
+import _ from "react";
+import { cssProps as m } from "./utils/helpers.js";
+import { s as t, V as h } from "./ValidationTooltip-BgSwl0hJ.js";
+const x = "styles_checkbox_pxrU4", w = "styles_radio_0QV8R", v = "styles_label_K65D1", k = "styles_input_j6Qji", g = {
+  checkbox: x,
+  radio: w,
+  label: v,
+  input: k
+};
+function N(a) {
+  return ![
+    "button",
+    "checkbox",
+    "color",
+    "file",
+    "hidden",
+    "image",
+    "radio",
+    "range",
+    "reset",
+    "submit"
+  ].includes(a);
+}
+function p(a) {
+  switch (a) {
+    case "checkbox":
+    case "radio":
+      return g.input;
+    case "date":
+    case "datetime":
+    case "datetime-local":
+    case "month":
+    case "week":
+      return t.date;
+    case "time":
+    case "number":
+    case "search":
+    case "range":
+    case "hidden":
+    case "button":
+    case "submit":
+    case "reset":
+    case "image":
+    case "color":
+    case "file":
+      return t[a];
+    default:
+      return t.input;
+  }
+}
+const Q = _.forwardRef(
+  ({ size: a, error: c, type: e = "text", className: o, style: d, prefix: i, children: n, ...r }, l) => {
+    const b = N(e) && (i || n) ? /* @__PURE__ */ f(
+      "div",
+      {
+        "data-input-wrapper": !0,
+        "data-disabled": r.disabled,
+        "data-invalid": c ? !0 : void 0,
+        className: u(t.wrapper, o),
+        style: { ...d, ...m({ size: a }) },
+        children: [
+          i && /* @__PURE__ */ s("div", { "data-input-prefix": !0, className: t.wrapper_prefix, children: i }),
+          /* @__PURE__ */ s(
+            "input",
+            {
+              ...r,
+              ref: l,
+              type: e,
+              "data-input": e,
+              className: p(e)
+            }
+          ),
+          n && /* @__PURE__ */ s("div", { "data-input-accessory": !0, className: t.wrapper_accessory, children: n })
+        ]
+      }
+    ) : /* @__PURE__ */ s(
+      "input",
+      {
+        ...r,
+        ref: l,
+        type: e,
+        "data-input": e,
+        "data-invalid": c ? !0 : void 0,
+        className: u(p(e), o),
+        style: { ...d, ...m({ size: a }) }
+      }
+    );
+    return /* @__PURE__ */ s(h, { content: c, children: b });
+  }
+);
+export {
+  Q as I,
+  g as s
+};

package/dist/ValidationTooltip-BgSwl0hJ.js

@@ -0,0 +1,30 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Tooltip as s } from "./components/Tooltip/Tooltip.js";
+const r = "styles_input_a-JHN", a = "styles_wrapper_b3-VW", o = "styles_date_S0YpO", p = "styles_time_3ywit", c = "styles_search_y6sAm", l = "styles_number_auDA-", _ = "styles_textarea_KRYGO", n = "styles_select_qhElj", i = "styles_tooltip_tBrt4", y = "styles_range_tSqtV", m = "styles_wrapper_prefix_KI25W", w = "styles_wrapper_accessory_yZjv0", u = {
+  input: r,
+  wrapper: a,
+  date: o,
+  time: p,
+  search: c,
+  number: l,
+  textarea: _,
+  select: n,
+  tooltip: i,
+  range: y,
+  wrapper_prefix: m,
+  wrapper_accessory: w
+}, f = (t) => /* @__PURE__ */ e(
+  s,
+  {
+    ...t,
+    "data-tooltip-validation": !0,
+    disabled: !t.content,
+    placement: "top-start",
+    trigger: "hover focus click",
+    className: u.tooltip
+  }
+);
+export {
+  f as V,
+  u as s
+};

package/dist/_commonjsHelpers-B52_cu2H.js

@@ -0,0 +1,26 @@
+function n(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+function c(e) {
+  if (Object.prototype.hasOwnProperty.call(e, "__esModule")) return e;
+  var o = e.default;
+  if (typeof o == "function") {
+    var t = function r() {
+      return this instanceof r ? Reflect.construct(o, arguments, this.constructor) : o.apply(this, arguments);
+    };
+    t.prototype = o.prototype;
+  } else t = {};
+  return Object.defineProperty(t, "__esModule", { value: !0 }), Object.keys(e).forEach(function(r) {
+    var u = Object.getOwnPropertyDescriptor(e, r);
+    Object.defineProperty(t, r, u.get ? u : {
+      enumerable: !0,
+      get: function() {
+        return e[r];
+      }
+    });
+  }), t;
+}
+export {
+  c as a,
+  n as g
+};

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { PolymorphicProps } from '../../utils/helpers';
+export type ButtonProps<T extends React.ElementType = 'button'> = PolymorphicProps<T, {
+    as?: T;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    scheme?: 'default' | 'negative' | 'positive' | 'warning';
+    minWidth?: React.CSSProperties['minWidth'];
+    maxWidth?: React.CSSProperties['maxWidth'];
+    busy?: boolean;
+    title?: React.ReactNode;
+    icon?: React.ReactElement;
+    iconPosition?: 'start' | 'end';
+}>;
+export declare const Button: <T extends React.ElementType = "button">(props: {
+    as?: T | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    variant?: "primary" | "secondary" | "tertiary";
+    scheme?: "default" | "negative" | "positive" | "warning";
+    minWidth?: React.CSSProperties["minWidth"];
+    maxWidth?: React.CSSProperties["maxWidth"];
+    busy?: boolean;
+    title?: React.ReactNode;
+    icon?: React.ReactElement;
+    iconPosition?: "start" | "end";
+} & Omit<React.PropsWithoutRef<React.ComponentProps<T>>, "title" | "size" | "as" | "icon" | "minWidth" | "maxWidth" | "variant" | "scheme" | "busy" | "iconPosition"> & React.RefAttributes<unknown>) => React.ReactElement | null;

package/dist/components/Button/Button.js

@@ -0,0 +1,62 @@
+import { jsxs as u, jsx as v, Fragment as B } from "react/jsx-runtime";
+import { c as b } from "../../index-DyIdU--j.js";
+import { fixedForwardRef as w, wrapNode as d, cssProps as x } from "../../utils/helpers.js";
+import { Spinner as N } from "../Spinner/Spinner.js";
+const h = "Button_button_WuG2z", y = {
+  button: h,
+  "primary-default": "Button_primary-default_lVt-V",
+  "secondary-default": "Button_secondary-default_yggNH",
+  "tertiary-default": "Button_tertiary-default_qSFa6",
+  "primary-negative": "Button_primary-negative_AupXJ",
+  "secondary-negative": "Button_secondary-negative_bZbAE",
+  "tertiary-negative": "Button_tertiary-negative_7Dh-3",
+  "primary-positive": "Button_primary-positive_4Mnfc",
+  "secondary-positive": "Button_secondary-positive_h1UJg",
+  "tertiary-positive": "Button_tertiary-positive_oTrM5",
+  "primary-warning": "Button_primary-warning_9A3NY",
+  "secondary-warning": "Button_secondary-warning_mbIUl",
+  "tertiary-warning": "Button_tertiary-warning_gM2um"
+};
+function A({
+  as: _,
+  variant: r = "primary",
+  scheme: a = "default",
+  size: p,
+  minWidth: m,
+  maxWidth: l,
+  busy: t,
+  title: e,
+  icon: n,
+  iconPosition: i = "start",
+  children: o,
+  className: c,
+  style: g,
+  ...s
+}, f) {
+  return /* @__PURE__ */ u(
+    _ ?? "button",
+    {
+      ...s,
+      ref: f,
+      "data-busy": t,
+      "data-button": r,
+      "data-scheme": a,
+      "aria-disabled": s.disabled,
+      "aria-live": t ? "polite" : void 0,
+      className: b(y.button, y[`${r}-${a}`], c),
+      style: { ...g, ...x({ size: p, minWidth: m, maxWidth: l }) },
+      children: [
+        o ? d(o, "span") : /* @__PURE__ */ u(B, { children: [
+          i === "start" && n,
+          e && d(e, "span"),
+          i === "end" && n
+        ] }),
+        t && /* @__PURE__ */ v(N, { overlay: !0 })
+      ]
+    }
+  );
+}
+const S = w(A);
+export {
+  S as Button
+};

package/dist/components/Button/index.d.ts

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

package/dist/components/Button/index.js

@@ -0,0 +1,4 @@
+import { Button as r } from "./Button.js";
+export {
+  r as Button
+};

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { ButtonProps } from '../Button';
+export type DialogProps = React.HTMLProps<HTMLDialogElement> & {
+    width?: React.CSSProperties['width'];
+};
+export declare const Dialog: React.ForwardRefExoticComponent<Omit<DialogProps, "ref"> & React.RefAttributes<HTMLDialogElement>>;
+export declare const DialogTitle: ({ className, children, ...props }: React.HTMLProps<HTMLHeadingElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogContent: ({ className, children, ...props }: React.HTMLProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogFooter: ({ className, children, ...props }: React.HTMLProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogClose: ({ className, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,57 @@
+import { jsx as e } from "react/jsx-runtime";
+import d from "react";
+import { c as l } from "../../index-DyIdU--j.js";
+import { Icon as g } from "../Icon/Icon.js";
+import { Button as m } from "../Button/Button.js";
+import { DialogFocusTrap as f } from "./DialogFocusTrap.js";
+import { cssProps as p } from "../../utils/helpers.js";
+const D = "Dialog_title_2pDPQ", _ = "Dialog_dialog_G3gxL", u = "Dialog_content_7168G", N = "Dialog_footer_N-aEV", v = "Dialog_close_JSEkn", i = {
+  title: D,
+  dialog: _,
+  content: u,
+  footer: N,
+  close: v
+}, G = d.forwardRef(
+  ({ open: o = !1, width: t, style: a, className: s, children: c, ...r }, n) => /* @__PURE__ */ e(f, { active: o, children: /* @__PURE__ */ e(
+    "dialog",
+    {
+      ...r,
+      ref: n,
+      "data-floating-root": !0,
+      "data-dialog": o ? "open" : "closed",
+      className: l(i.dialog, s),
+      style: { ...a, ...p({ width: t }) },
+      children: c
+    }
+  ) })
+), P = ({
+  className: o,
+  children: t,
+  ...a
+}) => /* @__PURE__ */ e("h4", { ...a, "data-dialog-title": !0, className: l(i.title, o), children: t }), R = ({
+  className: o,
+  children: t,
+  ...a
+}) => /* @__PURE__ */ e("div", { ...a, "data-dialog-content": !0, className: l(i.content, o), children: t }), T = ({
+  className: o,
+  children: t,
+  ...a
+}) => /* @__PURE__ */ e("div", { ...a, "data-dialog-footer": !0, className: l(i.footer, o), children: t }), j = ({ className: o, ...t }) => /* @__PURE__ */ e(
+  m,
+  {
+    ...t,
+    type: "button",
+    variant: "tertiary",
+    "data-dialog-close": !0,
+    "aria-label": "dismiss dialog",
+    icon: /* @__PURE__ */ e(g, { name: "close" }),
+    className: l(i.close, o)
+  }
+);
+export {
+  G as Dialog,
+  j as DialogClose,
+  R as DialogContent,
+  T as DialogFooter,
+  P as DialogTitle
+};

package/dist/components/Dialog/DialogFocusTrap.d.ts

@@ -0,0 +1,2 @@
+import { FocusTrapProps } from 'focus-trap-react';
+export declare const DialogFocusTrap: (props: FocusTrapProps) => import("react/jsx-runtime").JSX.Element;