@janbox/storefront-ui 1.0.14 → 1.0.16

package/dist/lib/input/input.module.scss

@@ -1,60 +0,0 @@
-.input__container {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.input__main {
-  width: 100%;
-  display: flex;
-  overflow: hidden;
-  align-items: center;
-  gap: 0.5rem;
-  border-radius: 0.5rem;
-  border-width: 1px;
-  border-style: solid;
-  background-color: var(--color-surface-default);
-
-  &:hover {
-    border-color: var(--color-primary-300);
-  }
-
-  &:has(input:focus:not(:read-only)) {
-    border-color: var(--color-primary-600);
-    box-shadow: 0 1px 3px 0 var(--color-primary-300), 0 1px 2px -1px var(--color-primary-300);
-  }
-
-  &:has(input:read-only) {
-    pointer-events: none;
-  }
-
-  &:has(input:disabled) {
-    background-color: var(--color-neutral-300);
-    color: var(--color-neutral-500);
-    border-color: var(--color-neutral-300);
-    pointer-events: none;
-  }
-}
-
-.input__main_error {
-  border-color: var(--color-red-600);
-}
-
-.input__control {
-  flex: 1 1 0%;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  background-color: transparent;
-
-  &:focus {
-    outline: none;
-  }
-
-  &::placeholder {
-    color: var(--color-neutral-400);
-  }
-}

package/dist/lib/input/types.js

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

package/dist/lib/input-mask/index.js

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

package/dist/lib/input-mask/input-mask.jsx

@@ -1,88 +0,0 @@
-import { forwardRef, Fragment } from 'react';
-import { getInputMaskProps } from './helpers';
-import { Icon } from '../icon';
-import { getColorVar, mediaQuery } from '../../theme';
-import { getSizeVariantState } from '../../utils';
-import { Primitive } from '../primitive';
-const InputMask = (_props, ref) => {
-    const { prefix, suffix, children, xs, sm, md, startIcon, endIcon, lg, error, ...props } = getInputMaskProps(_props);
-    const css = [
-        {
-            display: 'flex',
-            paddingTop: 2,
-            paddingBottom: 2,
-            alignItems: 'center',
-            gap: 8,
-            overflow: 'hidden',
-            width: '100%',
-            position: 'relative',
-            borderRadius: 8,
-            ':after': {
-                content: '""',
-                position: 'absolute',
-                inset: 0,
-                pointerEvents: 'none',
-                borderRadius: 8,
-                borderWidth: 1,
-                borderStyle: 'solid',
-                borderColor: error ? getColorVar('red.600') : undefined,
-            },
-        },
-        createStyle(xs),
-        {
-            [mediaQuery('sm')]: createStyle(sm),
-            [mediaQuery('md')]: createStyle(md),
-            [mediaQuery('lg')]: createStyle(lg),
-        },
-    ];
-    return (<Primitive css={css} {...props} ref={ref}>
-      {prefix}
-      {!!startIcon && (<Icon {...startIcon} xs={{
-                size: getSizeVariantState(xs?.size).iconSize,
-                ...startIcon.xs,
-            }} sm={{
-                size: getSizeVariantState(sm?.size).iconSize,
-                ...startIcon.sm,
-            }} md={{
-                size: getSizeVariantState(md?.size).iconSize,
-                ...startIcon.md,
-            }} lg={{
-                size: getSizeVariantState(lg?.size).iconSize,
-                ...startIcon.lg,
-            }}/>)}
-      <Fragment>{children}</Fragment>
-      {!!endIcon && (<Icon {...endIcon} xs={{
-                size: getSizeVariantState(xs?.size).iconSize,
-                ...endIcon.xs,
-            }} sm={{
-                size: getSizeVariantState(sm?.size).iconSize,
-                ...endIcon.sm,
-            }} md={{
-                size: getSizeVariantState(md?.size).iconSize,
-                ...endIcon.md,
-            }} lg={{
-                size: getSizeVariantState(lg?.size).iconSize,
-                ...endIcon.lg,
-            }}/>)}
-      {suffix}
-    </Primitive>);
-};
-const ForwardRefInputMask = forwardRef(InputMask);
-export { ForwardRefInputMask as InputMask };
-const createStyle = ({ size, css, outline } = {}) => {
-    const { inputSize, inputPaddingX } = getSizeVariantState(size);
-    return [
-        {
-            minHeight: inputSize,
-            paddingLeft: inputPaddingX,
-            paddingRight: inputPaddingX,
-            ':after': {
-                borderTopWidth: outline?.top,
-                borderRightWidth: outline?.right,
-                borderBottomWidth: outline?.bottom,
-                borderLeftWidth: outline?.left,
-            },
-        },
-        css,
-    ];
-};

package/dist/lib/input-mask/types.js

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

package/dist/lib/input-number/index.js

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

package/dist/lib/input-number/input-number.jsx

@@ -1,88 +0,0 @@
-import { useRef } from 'react';
-import { useMergeRefs } from '@floating-ui/react';
-import { isNil } from 'lodash-es';
-import classes from './input-number.module.scss';
-import { IconButton } from '../icon-button';
-import { Input } from '../input/input';
-import { useControllableState } from '../../hooks';
-import { cn } from '../../utils';
-import MinusIcon from '../../assets/svg/minus.svg?raw';
-import PlusIcon from '../../assets/svg/plus.svg?raw';
-const MAX_FRACTION_DIGITS = 10;
-export const InputNumber = ({ value, defaultValue, className, step = 0, suffix, prefix, fractionDigits = 0, max = Infinity, min = 0, ref, ...props }) => {
-    const inputRef = useRef(null);
-    const [valueAsString, setValueAsString] = useControllableState({
-        value: value?.toString(),
-        defaultValue: defaultValue?.toString() ?? '',
-    });
-    const valueAsNumber = parseFloat(valueAsString);
-    const mergedRefs = useMergeRefs([ref, inputRef]);
-    const fractionDigitsInNumber = typeof fractionDigits === 'number' ? fractionDigits : MAX_FRACTION_DIGITS;
-    const transformFn = (value) => {
-        value = value.replace(/e|E/g, '');
-        if (min >= 0) {
-            value = value.replace(/^-/, '');
-        }
-        if (fractionDigits === 0) {
-            value = value.replace(/\.\d+$/, '');
-        }
-        else {
-            const parts = value.split('.');
-            if (parts.length > 1) {
-                const decimalPart = parts.at(1)?.slice(0, Math.min(fractionDigitsInNumber, MAX_FRACTION_DIGITS));
-                value = `${parts.at(0)}.${decimalPart}`;
-            }
-        }
-        return props.transform?.(value) ?? value;
-    };
-    const onChange = (e) => {
-        if (props.mode === 'onBlur' && e.target.valueAsNumber < min) {
-            e.target.value = min.toString();
-        }
-        setValueAsString(e.target.value);
-        props.onChange?.(e);
-    };
-    const onKeyDown = (e) => {
-        if (e.key === 'e' || e.key === 'E') {
-            e.preventDefault();
-        }
-        props.onKeyDown?.(e);
-    };
-    const dispatchChange = (nextValue) => {
-        if (!inputRef.current)
-            return;
-        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
-        nativeInputValueSetter?.call(inputRef.current, nextValue);
-        const event = new Event('input', { bubbles: true });
-        inputRef.current.dispatchEvent(event);
-    };
-    const onPlus = (_e) => {
-        const inputEl = inputRef.current;
-        if (isNil(inputEl))
-            return;
-        const currentValueAsNumber = inputEl.valueAsNumber;
-        const nextValueAsNumber = Math.min(isNaN(currentValueAsNumber) ? step : currentValueAsNumber + step, max);
-        if (currentValueAsNumber === nextValueAsNumber)
-            return;
-        dispatchChange(nextValueAsNumber.toString());
-    };
-    const onMinus = (_e) => {
-        const inputEl = inputRef.current;
-        if (isNil(inputEl))
-            return;
-        const currentValueAsNumber = inputEl.valueAsNumber;
-        const nextValueAsNumber = Math.max(isNaN(currentValueAsNumber) ? step : currentValueAsNumber - step, min);
-        if (currentValueAsNumber === nextValueAsNumber)
-            return;
-        dispatchChange(nextValueAsNumber.toString());
-    };
-    return (<Input {...props} value={valueAsString} onChange={onChange} transform={transformFn} className={cn(classes.input_number__input, className)} onKeyDown={onKeyDown} suffix={suffix ?? (<>
-            {step > 0 && (<IconButton color="neutral" xs={{
-                    size: 'xs',
-                }} icon={{ source: PlusIcon }} onClick={onPlus} aria-disabled={isNaN(valueAsNumber) ? false : valueAsNumber >= max}/>)}
-          </>)} prefix={prefix ?? (<>
-            {step > 0 && (<IconButton color="neutral" xs={{
-                    size: 'xs',
-                }} icon={{ source: MinusIcon }} onClick={onMinus} aria-disabled={isNaN(valueAsNumber) ? false : valueAsNumber <= min}/>)}
-          </>)} type="number" ref={mergedRefs}/>);
-};

package/dist/lib/input-number/input-number.module.scss

@@ -1,7 +0,0 @@
-.input_number__input {
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-}

package/dist/lib/input-number/types.js

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

package/dist/lib/input-range/index.js

@@ -1,2 +0,0 @@
-export * from './input-range';
-export * from './types';

package/dist/lib/input-range/input-range.jsx

@@ -1,116 +0,0 @@
-import { Fragment, useRef } from 'react';
-import { getInputRangeProps } from './helpers';
-import classes from './input-range.module.scss';
-import { getSizeVariantState, cn } from '../../utils';
-import { FormHelperText } from '../form-helper-text';
-import { Icon } from '../icon';
-import { InputNumber } from '../input-number';
-import LongArrowRightIcon from '@/assets/svg/long-arrow-right.svg?raw';
-import { mediaQuery } from '../../theme';
-export const InputRange = (_props) => {
-    const { error, helperText, inputs, xs, md, sm, lg, className, onChange, prefix, suffix, startIcon, endIcon, ...props } = getInputRangeProps(_props);
-    const containerRef = useRef(null);
-    const inputRefs = useRef([]);
-    const iconProps = {
-        xs: {
-            size: getSizeVariantState(xs?.size).iconSize,
-        },
-        sm: {
-            size: getSizeVariantState(sm?.size).iconSize,
-        },
-        md: {
-            size: getSizeVariantState(md?.size).iconSize,
-        },
-        lg: {
-            size: getSizeVariantState(lg?.size).iconSize,
-        },
-    };
-    const onInputFocus = (e) => {
-        e.target.select();
-        inputs?.at(Number(e.currentTarget.dataset.index))?.onFocus?.(e);
-    };
-    const onInputChange = (e) => {
-        const edge = e.currentTarget.dataset.edge;
-        onChange?.(e, edge);
-        inputs?.at(Number(e.currentTarget.dataset.index))?.onChange?.(e);
-    };
-    const css = [
-        createStyle(xs),
-        {
-            [mediaQuery('sm')]: createStyle(sm),
-            [mediaQuery('md')]: createStyle(md),
-            [mediaQuery('lg')]: createStyle(lg),
-        },
-    ];
-    return (<div css={{ width: '100%' }}>
-      <div css={css} className={cn(classes.input_range, className)} {...props} ref={containerRef}>
-        {prefix}
-        {!!startIcon && (<Icon {...startIcon} css={{ flexShrink: 0 }} xs={{
-                size: getSizeVariantState(xs?.size).iconSize,
-                ...startIcon.xs,
-            }} sm={{
-                size: getSizeVariantState(sm?.size).iconSize,
-                ...startIcon.sm,
-            }} md={{
-                size: getSizeVariantState(md?.size).iconSize,
-                ...startIcon.md,
-            }} lg={{
-                size: getSizeVariantState(lg?.size).iconSize,
-                ...startIcon.lg,
-            }}/>)}
-
-        {['from', 'to'].map((edge, index, array) => {
-            const inputProps = inputs?.at(index) ?? {};
-            return (<Fragment key={index}>
-              <InputNumber key={index} ref={(el) => {
-                    inputRefs.current[index] = el;
-                }} data-edge={edge} data-index={index} css={{ textAlign: 'center' }} mainProps={{
-                    style: {
-                        borderWidth: 0,
-                        boxShadow: 'none',
-                        paddingLeft: 0,
-                        paddingRight: 0,
-                    },
-                }} mode="onBlur" {...inputProps} onChange={onInputChange} onFocus={onInputFocus} xs={{
-                    size: xs?.size,
-                    ...inputProps.xs,
-                }} sm={{
-                    size: sm?.size,
-                    ...inputProps.sm,
-                }} md={{
-                    size: md?.size,
-                    ...inputProps.md,
-                }} lg={{
-                    size: lg?.size,
-                    ...inputProps.lg,
-                }}/>
-              {index < array.length - 1 && <Icon {...iconProps} css={{ flexShrink: 0 }} source={LongArrowRightIcon}/>}
-            </Fragment>);
-        })}
-        {!!endIcon && (<Icon {...endIcon} css={{ flexShrink: 0 }} xs={{
-                size: getSizeVariantState(xs?.size).iconSize,
-                ...endIcon.xs,
-            }} sm={{
-                size: getSizeVariantState(sm?.size).iconSize,
-                ...endIcon.sm,
-            }} md={{
-                size: getSizeVariantState(md?.size).iconSize,
-                ...endIcon.md,
-            }} lg={{
-                size: getSizeVariantState(lg?.size).iconSize,
-                ...endIcon.lg,
-            }}/>)}
-        {suffix}
-      </div>
-      <FormHelperText error={error}>{helperText}</FormHelperText>
-    </div>);
-};
-const createStyle = ({ size } = {}) => {
-    const { inputPaddingX } = getSizeVariantState(size);
-    return [
-        {
-            paddingLeft: inputPaddingX,
-            paddingRight: inputPaddingX,
-        },
-    ];
-};

package/dist/lib/input-range/input-range.module.scss

@@ -1,17 +0,0 @@
-.input_range {
-  display: flex;
-  align-items: center;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 0.5rem;
-  gap: 0.5rem;
-
-  &:has(input:focus) {
-    border-color: var(--color-primary-600);
-    box-shadow: 0 1px 3px 0 var(--color-primary-300), 0 1px 2px -1px var(--color-primary-300);
-  }
-
-  &:hover {
-    border-color: var(--color-primary-300);
-  }
-}

package/dist/lib/input-range/types.js

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

package/dist/lib/lightbox/README.md

@@ -1,93 +0,0 @@
-# Lightbox Component
-
-A full-screen media viewer component supporting both images and videos with swiper navigation.
-
-## Quick Start
-
-```tsx
-import { useState } from 'react';
-import { Lightbox } from '~/packages/ui';
-
-export const Gallery = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <>
-      <button onClick={() => setOpen(true)}>View Media</button>
-      
-      <Lightbox
-        open={open}
-        onOpenChange={setOpen}
-        slides={[
-          { 
-            source: { type: 'image', src: '/image1.jpg' },
-            title: 'Beautiful Sunset'
-          },
-          { 
-            source: { type: 'image', src: '/image2.jpg' },
-            title: 'Mountain View'
-          },
-          { 
-            source: { type: 'video', src: 'https://example.com/video.mp4' },
-            title: 'Product Demo'
-          },
-        ]}
-      />
-    </>
-  );
-};
-```
-
-## Features
-
-- ✅ Full-screen media viewing with dark overlay
-- ✅ Support for both images and videos
-- ✅ Swiper-based navigation with loop
-- ✅ Navigation controls (previous/next)
-- ✅ Slide counter display
-- ✅ Smooth fade animations
-- ✅ Responsive layout (different button positions on mobile/desktop)
-
-## Documentation
-
-For complete documentation, see [Lightbox Component Guide](/docs/patterns/lightbox-component.md)
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `slides` | `LightboxSlide[]` | Required | Array of image/video slides |
-| `open` | `boolean` | `false` | Controls visibility |
-| `onOpenChange` | `(open: boolean) => void` | - | Open/close callback |
-
-## Slide Types
-
-### Image Slide
-```typescript
-{
-  source: {
-    type: 'image',
-    src: string
-  },
-  title?: string
-}
-```
-
-### Video Slide
-```typescript
-{
-  source: {
-    type: 'video',
-    src: string,
-    thumbnail?: string
-  },
-  title?: string
-}
-```
-
-## Navigation
-
-- **Mobile**: Navigation buttons appear in top-right corner
-- **Desktop**: Navigation buttons appear on left/right sides of the content
-- **Counter**: Always displayed showing current position (e.g., "1 / 5")
-- **Loop**: Enabled by default - navigate from last to first slide seamlessly

package/dist/lib/lightbox/index.js

@@ -1,2 +0,0 @@
-export * from './lightbox';
-export * from './types';