@companix/uikit 0.0.2 → 0.0.4

package/dist/bundle.es8.js

@@ -0,0 +1,87 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useMemo as E, useEffect as I } from "react";
+import { OptionsList as b } from "./bundle.es12.js";
+import { OptionItem as B } from "./bundle.es10.js";
+import { Popover as F } from "./bundle.es6.js";
+import { useFroozeClosing as z } from "./bundle.es30.js";
+import { SelectInput as D } from "./bundle.es31.js";
+import { useScrollListController as L } from "./bundle.es32.js";
+const y = (c) => {
+  const {
+    options: e,
+    onChange: i,
+    minimalOptions: a,
+    clearButton: m,
+    clearButtonIcon: u,
+    matchTarget: f = "width",
+    value: l,
+    children: n,
+    disabled: s,
+    ...d
+  } = c, p = E(() => {
+    const o = e.findIndex((t) => t.value === l);
+    return {
+      index: o,
+      option: e[o]
+    };
+  }, [e, l]), v = p.option?.value ?? null, { popoverRef: h, froozePopoverPosition: x, handleAnimationEnd: O } = z(), { scrollToElement: C, optionsWrapperRef: g, scrollBoxRef: P } = L(), R = (o, t) => {
+    x(), i(o), t();
+  }, S = (o) => {
+    o.stopPropagation(), i(null);
+  }, A = () => {
+    p.index !== -1 && C(p.index, !0);
+  };
+  return /* @__PURE__ */ r(
+    F,
+    {
+      minimal: !0,
+      ref: h,
+      sideOffset: 0,
+      matchTarget: f,
+      onAnimationEnd: O,
+      onOpenAutoFocus: (o) => o.preventDefault(),
+      onCloseAutoFocus: (o) => o.preventDefault(),
+      disabled: s,
+      content: ({ close: o }) => /* @__PURE__ */ r(
+        T,
+        {
+          options: e,
+          active: v,
+          scrollboxRef: P,
+          optionsWrapperRef: g,
+          minimalOptions: a,
+          onOpened: A,
+          onSelect: (t) => R(t, o)
+        }
+      ),
+      children: n ?? /* @__PURE__ */ r(
+        D,
+        {
+          ...d,
+          disabled: s,
+          value: p.option?.title ?? "",
+          onClear: S,
+          clearButton: m,
+          clearButtonIcon: u
+        }
+      )
+    }
+  );
+}, T = (c) => {
+  const { active: e, onOpened: i, scrollboxRef: a, optionsWrapperRef: m, options: u, onSelect: f, minimalOptions: l } = c;
+  return I(() => {
+    i?.();
+  }, []), /* @__PURE__ */ r(b, { scrollboxRef: a, optionsWrapperRef: m, maxHeight: 300, children: u.map((n, s) => /* @__PURE__ */ r(
+    B,
+    {
+      active: e === n.value,
+      onClick: () => f?.(n.value),
+      minimal: l,
+      ...n
+    },
+    `option-item-${n.value}-${s}`
+  )) });
+};
+export {
+  y as Select
+};

package/dist/bundle.es9.js

@@ -0,0 +1,75 @@
+import { jsxs as z, jsx as r } from "react/jsx-runtime";
+import A from "classnames";
+import F from "react-input-mask";
+import { useLayoutAndUpdate as M } from "./bundle.es33.js";
+import { attr as c } from "@companix/utils-browser";
+import { forwardRef as R, useRef as m, useCallback as g } from "react";
+import { mergeRefs as U } from "react-merge-refs";
+const Q = R(
+  ({
+    required: n,
+    size: f,
+    fill: a,
+    leftElement: e,
+    rightElement: u,
+    onChange: x,
+    onValueChange: $,
+    readOnly: b,
+    className: I,
+    value: N,
+    placeholder: W,
+    disabled: p,
+    mask: y,
+    maskChar: C,
+    inputRef: L,
+    ...j
+  }, k) => {
+    const s = m(null), l = m(null), d = m(null), q = { Right: l, Left: d }, h = g((t) => {
+      if (s.current) {
+        const i = s.current.style, o = q[t];
+        o.current && o.current.clientWidth ? i[`padding${t}`] !== `${o.current.clientWidth}px` && (i[`padding${t}`] = `${o.current.clientWidth}px`) : i[`padding${t}`] && (i[`padding${t}`] = "");
+      }
+    }, []);
+    M(() => {
+      h("Left"), h("Right");
+    }, [u, e]);
+    const w = g((t) => {
+      x?.(t), $?.(t.target.value, t.target);
+    }, []);
+    return /* @__PURE__ */ z(
+      "div",
+      {
+        ref: k,
+        className: A("form", I),
+        "data-size": f ?? "md",
+        "data-fill": c(a),
+        "data-required": c(n),
+        "data-disabled": c(p),
+        ...j,
+        children: [
+          e && /* @__PURE__ */ r("span", { ref: d, className: "form-input-base-left-element", children: e }),
+          /* @__PURE__ */ r(
+            v,
+            {
+              type: "text",
+              ref: U([s, L]),
+              className: "form-input form-input-base",
+              "aria-disabled": p,
+              onChange: w,
+              value: N,
+              placeholder: W,
+              disabled: p,
+              readOnly: b,
+              maskChar: C,
+              mask: y
+            }
+          ),
+          u && /* @__PURE__ */ r("span", { ref: l, className: "form-input-base-right-element", children: u })
+        ]
+      }
+    );
+  }
+), v = R(({ mask: n, maskChar: f, ...a }, e) => n ? /* @__PURE__ */ r(F, { inputRef: e, mask: n, maskChar: f, ...a }) : /* @__PURE__ */ r("input", { ref: e, ...a }));
+export {
+  Q as Form
+};

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+export { Button } from './Button';
+export { Spinner } from './Spinner';
+export { Scrollable } from './Scrollable';
+export { ImitateScroll } from './Scrollable/ImitateScroll';
+export { Popover } from './Popover';
+export { Tooltip } from './Tooltip';
+export { Select } from './Select';
+export { Form } from './Form';
+export { OptionItem } from './OptionItem/OptionItem';
+export { NumberInput } from './NumberInput';
+export { OptionsList } from './OptionItem/OptionsList';
+export { ButtonGroup } from './ButtonGroup';
+export { Checkbox } from './Checkbox';
+export { Switch } from './Switch';
+export { Radio } from './Radio';
+export { Drawer } from './Drawer';
+export { Dialog } from './Dialog';
+export { AlertDialog } from './DialogAlert/Alert';
+export { LoadButton } from './LoadButton';
+export { Tabs } from './Tabs';
+export { Countdown } from './Countdown';
+export { TextArea } from './TextArea';
+export { SelectTags } from './SelectTags';
+export { DatePicker } from './DatePicker';
+export { FileOverlay } from './File';
+export * from './__hooks/use-local-storage';
+export { createAlertAgent } from './DialogAlert';
+export { createToaster } from './Toaster';
+export * from './types';
+export type { Appearance } from './Button';

package/{src → dist}/index.scss

@@ -20,3 +20,6 @@
 @use './DatePicker/Calendar.scss';
 @use './Form/Input.scss';
 @use './Switch/Switch.scss';
+@use './Spinner/Spinner.scss';
+@use './ButtonGroup/ButtonGroup.scss';
+@use './Scrollable/Scrollable.scss';

package/{src → dist}/mixins.scss

@@ -1,5 +1,6 @@
 @use './theme.scss';
-@use './css.scss';
+@use './css-properties.scss';
+
 @use 'sass:map';
 @use 'sass:list';
 @use 'sass:meta';
@@ -64,7 +65,7 @@
 @mixin use-styles($component, $keys...) {
   $source: map.get(theme.$tokens, $component);
 
-  @each $property, $v in css.$properties {
+  @each $property, $v in css-properties.$properties {
     @include set-style($property, $source, $keys...);
   }
 }
@@ -74,7 +75,7 @@
 
   @debug $source;
 
-  @each $property, $v in css.$properties {
+  @each $property, $v in css-properties.$properties {
     @include set-style($property, $source, $keys...);
   }
 }

package/{src → dist}/theme.scss

@@ -3,10 +3,8 @@
 @use 'sass:list';
 
 $button-appearances: ();
-
 $tokens: ();
 
-// changes
 @function str-split($string, $delimiter) {
   $result: ();
   $buffer: '';

package/dist/types.d.ts

@@ -0,0 +1,13 @@
+export interface Option<T> {
+    title: string;
+    value: T;
+    icon?: React.ReactNode;
+    label?: string;
+    disabled?: boolean;
+    className?: string;
+}
+export interface DateFormat {
+    month: number;
+    year: number;
+    day: number;
+}

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@companix/uikit",
-  "version": "0.0.02",
+  "version": "0.0.04",
   "module": "./dist/bundle.es.js",
-  "types": "./src/index.ts",
+  "types": "./dist/types/index.d.ts",
   "type": "module",
+  "files": [
+    "dist"
+  ],
   "author": "Pavel Victorov",
   "scripts": {
     "echo": "echo \"uikit\"",
@@ -38,9 +41,6 @@
     "react-merge-refs": "^3.0.2"
   },
   "devDependencies": {
-    "sass": "^1.96.0",
-    "sass-embedded": "^1.96.0",
-    "rollup-plugin-scss": "^4.0.1",
     "@blueprintjs/core": "^6.2.1",
     "@radix-ui/react-icons": "^1.3.2",
     "@react-aria/interactions": "^3.25.3",
@@ -60,7 +60,11 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rollup-plugin-auto-external": "^2.0.0",
+    "rollup-plugin-scss": "^4.0.1",
+    "sass": "^1.96.0",
+    "sass-embedded": "^1.96.0",
     "vite": "^7.0.0",
-    "vite-plugin-checker": "^0.9.3"
+    "vite-plugin-checker": "^0.9.3",
+    "vite-plugin-dts": "^4.5.4"
   }
 }

package/.eslintrc

@@ -1,54 +0,0 @@
-{
-  "env": {
-    "node": true,
-    "browser": true,
-    "es6": true
-  },
-  "extends": [
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended",
-    "react-app"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["react"],
-  "parserOptions": {
-    "sourceType": "module",
-    "requireConfigFile": false,
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  },
-  "rules": {
-    "no-var": "error",
-    "typescript-eslint/typescript-estree": "off",
-    "react-hooks/exhaustive-deps": "off",
-    "react/react-in-jsx-scope": "off",
-    "react/no-children-prop": "off",
-    "react/display-name": "off",
-    "jsx-a11y/aria-role": "off",
-    "react/prop-types": "off",
-    "react/jsx-no-target-blank": "off",
-    "import/no-anonymous-default-export": "off",
-    "import/no-extraneous-dependencies": [
-      "error",
-      {
-        "devDependencies": true,
-        "peerDependencies": false
-      }
-    ],
-    "no-throw-literal": "off",
-    "react/no-multi-comp": [2, { "ignoreStateless": true }],
-    "no-restricted-syntax": [
-      "error",
-      {
-        "selector": "CallExpression[arguments.length=1][callee.property.name='reduce']",
-        "message": "Provide initialValue to .reduce()."
-      }
-    ]
-  }
-}

package/declaration.d.ts

@@ -1,4 +0,0 @@
-declare module '*.css'
-declare module '*.module.css'
-declare module '*.ttf'
-declare module '*.svg'

package/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Playground</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./playground/bootstrap.tsx"></script>
-  </body>
-</html>

package/playground/App.tsx

@@ -1,166 +0,0 @@
-// import { Test1Animation } from './animation-test-1'
-// import { Test2Animation, Test2CompletedAnimation } from './animation-test-2'
-// import { SelectExample } from './select'
-// import { PopupExample } from './popup'
-// import { TextInput } from './text-input'
-// import { NumberInputs } from './number-inputs'
-// import { Button } from '../Button'
-// import { useState } from 'react'
-// import { Drawer } from '../Drawer'
-// import { Popup } from '../Popup'
-// import { TestApp } from './Test'
-import { useLayoutEffect } from 'react'
-import { ButtonsExample, ButtonsGroupExample } from './buttons'
-import { PopoversExample } from './popovers'
-import { Example } from './Example'
-import { SelectExample } from './select'
-import { TooltipExample } from './tooltip'
-import { CheckboxExample } from './checkbox'
-import { RadioGroupExample } from './radio-group'
-import { TabsExample } from './tabs'
-import { ToasterExample } from './toaster'
-import { DialogExample } from './dialog'
-import { InputsExample } from './input'
-import { TextAreaExample } from './text-area'
-import { SelectTagsExample } from './select-tags'
-import { DateInputExample } from './date-input'
-import { DatePickerExample } from './date-picker'
-import { SwitchExample } from './switch'
-import { DialogAlertExample } from './dialog-alert'
-import { DrawerExample } from './drawer'
-// import { Tabs } from '../Tabs'
-
-export const App = () => {
-  useLayoutEffect(() => {
-    document.body.classList.add('theme-light')
-  }, [])
-
-  // return <TestApp />
-  return (
-    <div className="examples-list">
-      <div />
-      <div />
-      {/* <div style={{ height: '200px', width: '100%', position: 'relative' }}>
-        <div className="row-group" style={{ position: 'absolute' }}>
-          <Test1Animation />
-          <Test2Animation />
-          <Test2CompletedAnimation />
-        </div>
-      </div>
-      <TabsApp />
-      <ButtonsExample />
-      <SelectExample /> */}
-      <Example name="Popovers">
-        <PopoversExample />
-      </Example>
-      <Example name="Tooltip">
-        <TooltipExample />
-      </Example>
-      <Example name="Dialog">
-        <DialogExample />
-      </Example>
-      <Example name="DialogAlert">
-        <DialogAlertExample />
-      </Example>
-      <Example name="Drawer">
-        <DrawerExample />
-      </Example>
-      <Example name="Input">
-        <InputsExample />
-      </Example>
-      <Example name="TextArea">
-        <TextAreaExample />
-      </Example>
-      <Example name="Select">
-        <SelectExample />
-      </Example>
-      <Example name="SelectTags">
-        <SelectTagsExample />
-      </Example>
-      <Example name="DateInput">
-        <DateInputExample />
-      </Example>
-      <Example name="DatePicker">
-        <DatePickerExample />
-      </Example>
-      <Example name="Checkbox">
-        <CheckboxExample />
-      </Example>
-      <Example name="RadioGroup">
-        <RadioGroupExample />
-      </Example>
-      <Example name="Switch">
-        <SwitchExample />
-      </Example>
-      <Example name="Tabs">
-        <TabsExample />
-      </Example>
-      <Example name="Buttons">
-        <ButtonsExample />
-      </Example>
-      <Example name="ButtonGroup">
-        <ButtonsGroupExample />
-      </Example>
-      <Example name="Toaster">
-        <ToasterExample />
-      </Example>
-
-      {/* <div className="flex flex-col gap-10">
-        <DrawerApp />
-        <PopupApp />
-      </div>
-      <PopupExample />
-      <TextInput />
-      <NumberInputs /> */}
-      <div />
-      <div />
-    </div>
-  )
-}
-
-// const TabsApp = () => {
-//   const [tab, setTab] = useState('tab-1')
-
-//   return (
-//     <div>
-//       <Tabs onChange={setTab} value={tab}>
-//         <Tabs.Tab value="tab-1">Tab1</Tabs.Tab>
-//         <Tabs.Tab value="tab-2">Tab2</Tabs.Tab>
-//       </Tabs>
-//       Active: {tab}
-//     </div>
-//   )
-// }
-
-// const DrawerApp = () => {
-//   const [isOpen, setOpen] = useState(false)
-
-//   return (
-//     <>
-//       <Drawer onClose={() => setOpen(false)} isOpen={isOpen} size="60%">
-//         <Content close={() => setOpen(false)} />
-//       </Drawer>
-//       <Button onClick={() => setOpen((value) => !value)}>{isOpen ? 'Close' : 'Open'} drawer</Button>
-//     </>
-//   )
-// }
-
-// const Content = ({ close }: { close: () => void }) => {
-//   console.log('RENDER')
-//   return <div onClick={close}>App: click to close</div>
-// }
-
-// const PopupApp = () => {
-//   const [isOpen, setOpen] = useState(false)
-
-//   return (
-//     <>
-//       <Popup onClose={() => setOpen(false)} isOpen={isOpen} className="popup-1">
-//         <div style={{ padding: '10px' }}>
-//           <Button onClick={() => setOpen(false)}>App: click to close</Button>
-//         </div>
-//       </Popup>
-//       <Button onClick={() => setOpen((value) => !value)}>{isOpen ? 'Close' : 'Open'} popup</Button>
-//     </>
-//   )
-// }

package/playground/Example.tsx

@@ -1,14 +0,0 @@
-interface ExampleProps {
-  children: React.ReactNode
-  pane?: React.ReactNode
-  name: string
-}
-
-export const Example = ({ name, children, pane }: ExampleProps) => {
-  return (
-    <div className="sample">
-      <div className="sample-name">{name}</div>
-      <div>{children}</div>
-    </div>
-  )
-}

package/playground/Test.tsx

@@ -1,44 +0,0 @@
-import './test.scss'
-
-// import { Popover } from '../Popover'
-// import { Calendar } from '../DatePicker/Calendar'
-import { useLayoutEffect } from 'react'
-import { DatePickerControl } from './date-picker'
-
-const PopoverDemo = () => {
-  return (
-    <div style={{ width: '280px' }}>
-      <DatePickerControl size="md" />
-    </div>
-  )
-  // const [value, setValue] = useState(new Date())
-
-  // return (
-  //   <Popover
-  //     open
-  //     fitMaxHeight={false}
-  //     content={() => <Calendar value={value} onChange={setValue} disableFuture />}
-  //   >
-  //     <div></div>
-  //   </Popover>
-  // )
-}
-
-// const Check = () => {
-//   console.log('render')
-//   return <div>Check</div>
-// }
-
-export const TestApp = () => {
-  useLayoutEffect(() => {
-    document.body.classList.add('theme-light')
-  }, [])
-
-  return (
-    <div className="examples-list" style={{ alignItems: 'center' }}>
-      <div />
-      <PopoverDemo />
-      <div />
-    </div>
-  )
-}

package/playground/animation-test-1/index.scss

@@ -1,20 +0,0 @@
-.test-1-animation {
-  transition-duration: 4s;
-  transition-property: all;
-  transition-timing-function: linear;
-
-  // presets before transition in (initial state)
-  &[data-closed][data-enter] {
-    opacity: 0;
-  }
-
-  // transition in
-  &[data-enter] {
-    opacity: 1;
-  }
-
-  // transition out
-  &[data-leave] {
-    opacity: 0;
-  }
-}

package/playground/animation-test-1/index.tsx

@@ -1,17 +0,0 @@
-import './index.scss'
-// import { useState } from 'react'
-
-export const Test1Animation = () => {
-  // const [open, setOpen] = useState(false)
-
-  return (
-    <div style={{ padding: '40px', display: 'flex', gap: '20px' }}>
-      <div style={{ padding: '10px', width: '200px' }}>
-        {/* <button onClick={() => setOpen((open) => !open)}>Animation 1</button> */}
-        {/* <Transition show={open}> */}
-        <div className="test-1-animation box-styles">Target element</div>
-        {/* </Transition> */}
-      </div>
-    </div>
-  )
-}