@scaleflex/ui-tw 0.0.1

package/hooks/README.md

@@ -0,0 +1,26 @@
+# @scaleflex/ui-tw/hooks
+
+Batch of useful UI-related React hooks.
+
+---
+
+## Usage
+
+Every hook functions is exported by default and should be used inside React components with respect to the
+[rules of hooks](https://reactjs.org/docs/hooks-rules.html).
+
+```typescript jsx
+import useMediaQuery from '@scaleflex/ui-tw/hooks/use-portal'
+
+/**
+ * @example
+ * <PortalComponent>
+ *   <p>Portal content</p>
+ * </PortalComponent>
+ */
+const PortalComponent = ({ id, children }) => {
+  const target = usePortal(id)
+
+  return createPortal(children, target)
+}
+```

package/hooks/use-controlled.d.ts

@@ -0,0 +1 @@
+export default function useControlled({ controlled, default: defaultProp }: any): any;

package/hooks/use-controlled.js

@@ -0,0 +1,20 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useCallback, useRef, useState } from 'react';
+export default function useControlled(_ref) {
+  var controlled = _ref.controlled,
+    defaultProp = _ref["default"];
+  // isControlled is ignored in the hook dependency lists as it should never change.
+  var _useRef = useRef(controlled !== undefined),
+    isControlled = _useRef.current;
+  var _useState = useState(defaultProp),
+    _useState2 = _slicedToArray(_useState, 2),
+    valueState = _useState2[0],
+    setValue = _useState2[1];
+  var value = isControlled ? controlled : valueState;
+  var setValueIfUncontrolled = useCallback(function (newValue) {
+    if (!isControlled) {
+      setValue(newValue);
+    }
+  }, []);
+  return [value, setValueIfUncontrolled];
+}

package/hooks/use-debounce.d.ts

@@ -0,0 +1,2 @@
+declare function useDebounce(value: any, delay?: number): any;
+export { useDebounce };

package/hooks/use-debounce.js

@@ -0,0 +1,19 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useState } from 'react';
+function useDebounce(value) {
+  var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
+  var _useState = useState(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    debouncedValue = _useState2[0],
+    setDebouncedValue = _useState2[1];
+  useEffect(function () {
+    var handler = setTimeout(function () {
+      setDebouncedValue(value);
+    }, delay);
+    return function () {
+      clearTimeout(handler);
+    };
+  }, [value]);
+  return debouncedValue;
+}
+export { useDebounce };

package/hooks/use-drag.d.ts

@@ -0,0 +1,5 @@
+declare function useDrag(onMove: any, onStart: any, onEnd: any): {
+    onMouseDown: (e: any) => void;
+    onTouchStart: (e: any) => void;
+};
+export default useDrag;

package/hooks/use-drag.js

@@ -0,0 +1,37 @@
+function useDrag(onMove, onStart, onEnd) {
+  var onDragging = function onDragging(e) {
+    if (typeof onMove === 'function') {
+      var _e$touches;
+      onMove(((_e$touches = e.touches) === null || _e$touches === void 0 ? void 0 : _e$touches[0]) || e);
+    }
+  };
+  var _disableSliding = function disableSliding(e) {
+    document.removeEventListener('mousemove', onDragging);
+    document.removeEventListener('mouseup', _disableSliding);
+    document.removeEventListener('mouseleave', _disableSliding);
+    document.removeEventListener('touchmove', onDragging);
+    document.removeEventListener('touchend', _disableSliding);
+    document.removeEventListener('touchcancel', _disableSliding);
+    if (typeof onEnd === 'function') {
+      var _e$touches2;
+      onEnd(((_e$touches2 = e.touches) === null || _e$touches2 === void 0 ? void 0 : _e$touches2[0]) || e);
+    }
+  };
+  var enableDrag = function enableDrag(e) {
+    document.addEventListener('mousemove', onDragging);
+    document.addEventListener('mouseup', _disableSliding);
+    document.addEventListener('mouseleave', _disableSliding);
+    document.addEventListener('touchmove', onDragging);
+    document.addEventListener('touchend', _disableSliding);
+    document.addEventListener('touchcancel', _disableSliding);
+    if (typeof onStart === 'function') {
+      var _e$touches3;
+      onStart(((_e$touches3 = e.touches) === null || _e$touches3 === void 0 ? void 0 : _e$touches3[0]) || e);
+    }
+  };
+  return {
+    onMouseDown: enableDrag,
+    onTouchStart: enableDrag
+  };
+}
+export default useDrag;

package/hooks/use-enhanced-effect.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const useEnhancedEffect: typeof React.useEffect;
+export default useEnhancedEffect;

package/hooks/use-enhanced-effect.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+var useEnhancedEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+export default useEnhancedEffect;

package/hooks/use-event-callback.d.ts

@@ -0,0 +1,4 @@
+/**
+ * https://github.com/facebook/react/issues/14099#issuecomment-440013892
+ */
+export default function useEventCallback<Args extends unknown[], Return>(fn: (...args: Args) => Return): (...args: Args) => Return;

package/hooks/use-event-callback.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import useEnhancedEffect from './use-enhanced-effect';
+
+/**
+ * https://github.com/facebook/react/issues/14099#issuecomment-440013892
+ */
+export default function useEventCallback(fn) {
+  var ref = React.useRef(fn);
+  useEnhancedEffect(function () {
+    ref.current = fn;
+  });
+  return React.useCallback(function () {
+    return (
+      // @ts-expect-error hide `this`
+      // tslint:disable-next-line:ban-comma-operator
+      (0, ref.current).apply(void 0, arguments)
+    );
+  }, []);
+}

package/hooks/use-pagination.d.ts

@@ -0,0 +1,3 @@
+declare function usePagination({ boundaryCount, count, defaultPage, disabled, onChange: handleChange, page: pageProp, siblingCount, ...other }: any): any;
+export default usePagination;
+export { usePagination };

package/hooks/use-pagination.js

@@ -0,0 +1,106 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["boundaryCount", "count", "defaultPage", "disabled", "onChange", "page", "siblingCount"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Borrows heavily from and inspired by material-ui https://github.com/mui-org/material-ui
+ * basically a stripped-down version of it. Uing only the core functionalities and using what we need from it
+ */
+import useControlled from './use-controlled';
+function usePagination(_ref) {
+  var _ref$boundaryCount = _ref.boundaryCount,
+    boundaryCount = _ref$boundaryCount === void 0 ? 1 : _ref$boundaryCount,
+    _ref$count = _ref.count,
+    count = _ref$count === void 0 ? 1 : _ref$count,
+    _ref$defaultPage = _ref.defaultPage,
+    defaultPage = _ref$defaultPage === void 0 ? 1 : _ref$defaultPage,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    handleChange = _ref.onChange,
+    pageProp = _ref.page,
+    _ref$siblingCount = _ref.siblingCount,
+    siblingCount = _ref$siblingCount === void 0 ? 1 : _ref$siblingCount,
+    other = _objectWithoutProperties(_ref, _excluded);
+  var _useControlled = useControlled({
+      controlled: pageProp,
+      "default": defaultPage
+    }),
+    _useControlled2 = _slicedToArray(_useControlled, 2),
+    page = _useControlled2[0],
+    setPageState = _useControlled2[1];
+  var handleClick = function handleClick(event, value) {
+    if (!pageProp) {
+      setPageState(value);
+    }
+    if (handleChange) {
+      handleChange(event, value);
+    }
+  };
+  var range = function range(start, end) {
+    var length = end - start + 1;
+    return Array.from({
+      length: length
+    }, function (_, i) {
+      return start + i;
+    });
+  };
+  var startPages = range(1, Math.min(boundaryCount, count));
+  var endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);
+  var siblingsStart = Math.max(Math.min(
+  // Natural start
+  page - siblingCount,
+  // Lower boundary when page is high
+  count - boundaryCount - siblingCount * 2 - 1),
+  // Greater than startPages
+  boundaryCount + 2);
+  var siblingsEnd = Math.min(Math.max(
+  // Natural end
+  page + siblingCount,
+  // Upper boundary when page is low
+  boundaryCount + siblingCount * 2 + 2),
+  // Less than endPages
+  endPages.length > 0 ? endPages[0] - 2 : count - 1);
+  var itemList = ['first'].concat(['previous'], _toConsumableArray(startPages), _toConsumableArray(siblingsStart > boundaryCount + 2 ? ['start-ellipsis'] : boundaryCount + 1 < count - boundaryCount ? [boundaryCount + 1] : []), _toConsumableArray(range(siblingsStart, siblingsEnd)), _toConsumableArray(siblingsEnd < count - boundaryCount - 1 ? ['end-ellipsis'] : count - boundaryCount > boundaryCount ? [count - boundaryCount] : []), _toConsumableArray(endPages), ['next'], ['last']);
+  var buttonPage = function buttonPage(type) {
+    switch (type) {
+      case 'first':
+        return 1;
+      case 'previous':
+        return page - 1;
+      case 'next':
+        return page + 1;
+      case 'last':
+        return count;
+      default:
+        return null;
+    }
+  };
+  var items = itemList.map(function (item) {
+    return typeof item === 'number' ? {
+      onClick: function onClick(event) {
+        handleClick(event, item);
+      },
+      type: 'page',
+      page: item,
+      selected: item === page,
+      disabled: disabled,
+      'aria-current': item === page ? 'true' : undefined
+    } : {
+      onClick: function onClick(event) {
+        handleClick(event, buttonPage(item));
+      },
+      type: item,
+      page: buttonPage(item),
+      selected: false,
+      disabled: disabled || !item.includes('ellipsis') && (item === 'next' || item === 'last' ? page >= count : page <= 1)
+    };
+  });
+  return _objectSpread({
+    items: items
+  }, other);
+}
+export default usePagination;
+export { usePagination };

package/hooks/use-portal.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Hook to create a React Portal.
+ * Automatically handles creating and tearing-down the root elements (no SRR
+ * makes this trivial), so there is no need to ensure the parent target already
+ * exists.
+ * @example
+ * const target = usePortal(id, [id]);
+ * return createPortal(children, target);
+ * @param {String} id The id of the target container, e.g 'modal' or 'spotlight'
+ * @returns {HTMLElement} The DOM node to use as the Portal target.
+ */
+declare function usePortal(id: string): HTMLElement;
+export default usePortal;
+export { usePortal };

package/hooks/use-portal.js

@@ -0,0 +1,75 @@
+import { useEffect, useRef } from 'react';
+/**
+ * Creates DOM element to be used as React root.
+ */
+function createRootElement(id) {
+  var rootContainer = document.createElement('div');
+  rootContainer.setAttribute('id', id);
+  return rootContainer;
+}
+
+/**
+ * Appends element as last child of body.
+ */
+function addRootElement(rootElem) {
+  document.body.append(rootElem);
+}
+
+/**
+ * Hook to create a React Portal.
+ * Automatically handles creating and tearing-down the root elements (no SRR
+ * makes this trivial), so there is no need to ensure the parent target already
+ * exists.
+ * @example
+ * const target = usePortal(id, [id]);
+ * return createPortal(children, target);
+ * @param {String} id The id of the target container, e.g 'modal' or 'spotlight'
+ * @returns {HTMLElement} The DOM node to use as the Portal target.
+ */
+function usePortal(id) {
+  var rootElemRef = useRef(null);
+  useEffect(function () {
+    // Look for existing target dom element to append to
+    var existingParent = document.querySelector("#".concat(id));
+    // Parent is either a new root or the existing dom element
+    var parentElem = existingParent || createRootElement(id);
+
+    // If there is no existing DOM element, add a new one.
+    if (!existingParent) {
+      addRootElement(parentElem);
+    }
+
+    // Add the detached element to the parent
+    if (rootElemRef.current) {
+      parentElem.append(rootElemRef.current);
+    }
+    return function removeElement() {
+      if (rootElemRef.current) {
+        rootElemRef.current.remove();
+      }
+      if (parentElem.childNodes.length === -1) {
+        parentElem.remove();
+      }
+    };
+  }, []);
+
+  /**
+   * It's important we evaluate this lazily:
+   * - We need first render to contain the DOM element, so it shouldn't happen
+   *   in useEffect. We would normally put this in the constructor().
+   * - We can't do 'const rootElemRef = useRef(document.createElement('div))',
+   *   since this will run every single render (that's a lot).
+   * - We want the ref to consistently point to the same DOM element and only
+   *   ever run once.
+   * @link https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily
+   */
+  function getRootElem() {
+    if (!rootElemRef.current) {
+      rootElemRef.current = document.createElement('div');
+    }
+    return rootElemRef.current;
+  }
+  return getRootElem();
+}
+export default usePortal;
+export { usePortal };

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@scaleflex/ui-tw",
+  "version": "0.0.1",
+  "author": "scaleflex",
+  "repository": "github:scaleflex/ui",
+  "homepage": "https://github.com/scaleflex/ui/blob/master/README.md",
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "typescript"
+  ],
+  "description": "React UI components library based on Tailwind and ShadCN by Scaleflex Company",
+  "main": "lib/index.js",
+  "dependencies": {
+    "@popperjs/core": "^2.6.0",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@scaleflex/icons-tw": "^0.0.1",
+    "@types/lodash.merge": "^4.6.9",
+    "class-variance-authority": "^0.7.1",
+    "lodash.merge": "^4.6.2",
+    "lucide-react": "^0.487.0",
+    "prop-types": "^15.7.2",
+    "tw-animate-css": "^1.2.5"
+  },
+  "devDependencies": {
+    "@types/prop-types": "^15.7.3",
+    "postcss": "^8.5.3",
+    "typescript": "^5.2.2"
+  },
+  "peerDependencies": {
+    "@types/react": ">=19.0.0",
+    "@types/react-dom": ">=19.0.0",
+    "clsx": ">=2.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
+    "styled-components": ">=6.0.0",
+    "tailwind-merge": ">=1.14.0",
+    "tailwindcss": ">=4.0.0"
+  },
+  "sideEffects": false,
+  "browserslist": {
+    "production": [
+      "edge >= 14",
+      "firefox >= 52",
+      "chrome >= 49",
+      "safari >= 10"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ],
+    "ssr": [
+      "node >= 12"
+    ]
+  },
+  "engines": {
+    "node": ">=12"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/theme/README.md

@@ -0,0 +1,46 @@
+# @scaleflex/ui-tw/theme
+
+Theme package.
+
+---
+
+## Usage
+
+Along with `<ThemeProvider />` component, which has to be wrapper around you application, we export hook – `useTheme`.
+
+```typescript jsx
+<ThemeProvider>
+  <App />
+</ThemeProvider>
+```
+
+Then, use all the features of our theme inside any part of your React application:
+
+### styled-components
+
+```typescript
+const Button = styled.button(
+  ({ theme }) => css`
+    color: ${theme.palette['accent-strong']};
+  `,
+)
+```
+
+### Fonts
+
+Out of the box we provide **no default fonts**.
+
+To connect the fonts defined as default in our design system you have an option to create your own `@font-face`
+rules.
+
+To override predefined `font-family` you can pass them into the `theme` prop of the `ThemeProvider` component:
+
+```typescript jsx
+<ThemeProvider
+  theme={{
+    typography: {
+      fontFamily: 'Roboto, sans-serif'
+    },
+  }}
+/>
+```

package/theme/entity/index.d.ts

@@ -0,0 +1 @@
+export type { Theme, ThemeOverride, WithTheme } from './theme';

package/theme/entity/index.js

@@ -0,0 +1 @@
+export {};

package/theme/entity/theme.d.ts

@@ -0,0 +1,34 @@
+import type { DefaultTheme } from 'styled-components'
+
+import type { With } from '../../utils/types'
+import type { Breakpoints } from '../roots/breakpoints'
+import type { ColorsMap } from '../roots/palette'
+import { ShadowsMap } from '../roots/shadows'
+import type { ShapeProps } from '../roots/shape'
+import type { TypographyProps } from '../roots/typography'
+
+export interface Theme {
+  readonly breakpoints: Breakpoints
+
+  readonly palette: ColorsMap
+
+  readonly typography: TypographyProps
+
+  readonly shape: ShapeProps
+
+  readonly shadows: ShadowsMap
+}
+
+export interface ThemeOverride extends Omit<Partial<Theme>> {
+  readonly breakpoints?: Theme['breakpoints']
+
+  readonly palette?: Partial<Record<Partial<Theme['palette']>>>
+
+  readonly typography?: TypographyProps
+
+  readonly shape?: ShapeProps
+
+  readonly shadows?: ShadowsMap
+}
+
+export type WithTheme<T = undefined> = With<T, { theme: DefaultTheme }>

package/theme/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './use-theme';
+export * from './use-media-query';

package/theme/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './use-theme';
+export * from './use-media-query';

package/theme/hooks/use-media-query.d.ts

@@ -0,0 +1 @@
+export declare function useMediaQuery(queryInput: string): boolean;

package/theme/hooks/use-media-query.js

@@ -0,0 +1,27 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useEffect, useState } from 'react';
+export function useMediaQuery(queryInput) {
+  var query = queryInput.replace(/^@media( ?)/m, '');
+  var _useState = useState(function () {
+      return window.matchMedia(query).matches;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    match = _useState2[0],
+    setMatch = _useState2[1];
+  useEffect(function () {
+    var active = true;
+    var queryList = window.matchMedia(query);
+    var updateMatch = function updateMatch() {
+      if (active) {
+        setMatch(queryList.matches);
+      }
+    };
+    updateMatch();
+    queryList.addEventListener('change', updateMatch);
+    return function () {
+      active = false;
+      queryList.removeEventListener('change', updateMatch);
+    };
+  }, [query, matchMedia]);
+  return match;
+}

package/theme/hooks/use-theme.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from '../entity';
+export declare function useTheme(): Theme;

package/theme/hooks/use-theme.js

@@ -0,0 +1,4 @@
+import { useTheme as useSCTheme } from 'styled-components';
+export function useTheme() {
+  return useSCTheme();
+}

package/theme/index.d.ts

@@ -0,0 +1,3 @@
+export type { Theme } from './entity';
+export { default } from './theme-provider';
+export type { ThemeProviderProps } from './theme-provider';

package/theme/index.js

@@ -0,0 +1 @@
+export { default } from './theme-provider';

package/theme/roots/breakpoints/entity/breakpoints-map.d.ts

@@ -0,0 +1,8 @@
+import type { Values } from '../../../../utils/types'
+import { Breakpoint, BreakpointClass } from '../../../../utils/types/css'
+
+export type BreakpointsMap = Record<Values<typeof Breakpoint>, number>
+
+export type Breakpoint = Values<typeof Breakpoint>
+
+export type BreakpointClass = Values<typeof BreakpointClass>

package/theme/roots/breakpoints/entity/breakpoints.d.ts

@@ -0,0 +1,73 @@
+import { Breakpoint, BreakpointClass } from './breakpoints-map'
+
+export interface Breakpoints {
+  keys: Breakpoint[]
+  /**
+   * Each breakpoint (a key) matches with a fixed screen width (a value).
+   * @default {
+   *    // extra-small
+   *    xs: 0,
+   *    // small
+   *    sm: 600,
+   *    // medium
+   *    md: 900,
+   *    // large
+   *    lg: 1200,
+   *    // extra-large
+   *    xl: 1536,
+   * }
+   */
+  values: { [key in Breakpoint]: number }
+  /**
+   *    // extra-small
+   *    xs: '.sfx-breakpoint-xs',
+   *    // small
+   *    sm:'.sfx-breakpoint-sm',
+   *    // medium
+   *    md:'.sfx-breakpoint-md',
+   *    // large
+   *    lg:'.sfx-breakpoint-lg',
+   *    // extra-large
+   *    xl: '.sfx-breakpoint-xl',
+   *    // extra-extra-large
+   *    xxl: '.sfx-breakpoint-xxl',
+   *    // extra-extra-extra-large
+   *    xxxl: '.sfx-breakpoint-xxxl',
+   * }
+   */
+  classes: { [key in Breakpoint]: BreakpointClass }
+  /**
+   * @param width - A breakpoint width..
+   * @returns A breakpoint class ready to be used with styled components, it will be applied when it matches the nearest breakpoint intialized in the theme.
+   */
+  getBreakpointClass: (width: number, hideSelector?: boolean) => BreakpointClass
+  /**
+   * @param width - A breakpoint width.
+   * @returns A media query string ready to be used with styled components, which matches screen width greater than the screen size given by the breakpoint key.
+   */
+  up: (key: Breakpoint) => string
+  /**
+   * @param key - A breakpoint key (`xs`, `sm`, etc).
+   * @returns  A media query string ready to be used with styled components, which matches screen width less than the screen size given by the breakpoint key.
+   */
+  down: (key: Breakpoint) => string
+  /**
+   * @param start -  A breakpoint key (`xs`, `sm`, etc).
+   * @param end -  A breakpoint key (`xs`, `sm`, etc).
+   * @returns A media query string ready to be used with styled components, which matches screen width greater than the screen size given by the breakpoint key in the first argument and less than the screen size given by the breakpoint key in the second argument.
+   */
+  between: (start: Breakpoint, end: Breakpoint) => string
+  /**
+   * @param key - A breakpoint key (`xs`, `sm`, etc).
+   * @returns A media query string ready to be used with styled components, which matches screen width starting from the screen size given by the breakpoint key and stopping at the screen size given by the next breakpoint key.
+   */
+  only: (key: Breakpoint) => string
+}
+
+// export interface BreakpointsOptions extends Partial<Breakpoints> {
+//   /**
+//    * The unit used for the breakpoint's values.
+//    * @default 'px'
+//    */
+//   unit?: string | undefined;
+// }

package/theme/roots/breakpoints/entity/create-breakpoints.d.ts

@@ -0,0 +1,3 @@
+import { Breakpoints } from '.';
+declare const createBreakpoints: (breakpoints: Partial<Breakpoints>) => Breakpoints;
+export default createBreakpoints;