@companix/uikit 0.0.1 → 0.0.3

package/src/Stepper/index.tsx

@@ -1,76 +0,0 @@
-import './StepperInput.scss'
-
-import { Form } from '../Form'
-import { useStepperInput, StepperInputOptions } from '../__hooks/use-stepper-input'
-import { usePress } from '@react-aria/interactions'
-import { Button } from '../Button'
-import { attr } from '@companix/utils-browser'
-import { Icon } from '../Icon'
-import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
-
-interface StepperInputProps extends StepperInputOptions {
-  buttons?: boolean
-  placeholder?: string
-  inputStyle?: React.CSSProperties
-}
-
-export const StepperInput = ({ inputStyle, placeholder, buttons, ...options }: StepperInputProps) => {
-  const { inputRef, increment, decrement, handleChange, value } = useStepperInput(options)
-
-  return (
-    <div className="number-input-container">
-      <Form
-        ref={inputRef}
-        placeholder={placeholder}
-        style={inputStyle}
-        value={value}
-        onChange={handleChange}
-      />
-      {buttons && <Stepper increment={increment} decrement={decrement} />}
-    </div>
-  )
-}
-
-interface StepperProps {
-  increment: () => void
-  decrement: () => void
-}
-
-const Stepper = ({ increment, decrement }: StepperProps) => {
-  return (
-    <div className="number-stepper">
-      <SlepButton slot="increment" onClick={increment}>
-        <Icon size="xxs" icon={faChevronUp} />
-      </SlepButton>
-      <div className="number-stepper-splitter" />
-      <SlepButton slot="decrement" onClick={decrement}>
-        <Icon size="xxs" icon={faChevronDown} />
-      </SlepButton>
-    </div>
-  )
-}
-
-interface ButtonProps {
-  children: React.ReactNode
-  slot: string
-  onClick: () => void
-}
-
-const SlepButton = ({ children, slot, onClick }: ButtonProps) => {
-  const { pressProps, isPressed } = usePress({ onClick, preventFocusOnPress: true })
-  const { onBeforeInput, ...rest } = pressProps
-
-  return (
-    <Button
-      {...rest}
-      onBeforeInput={onBeforeInput as any}
-      data-slot={slot}
-      data-size={undefined}
-      data-pressed={attr(isPressed)}
-      style={{ border: 'none' }}
-      className="number-stepper-slot"
-    >
-      {children}
-    </Button>
-  )
-}

package/src/Switch/Switch.scss

@@ -1,102 +0,0 @@
-@use '../mixins.scss';
-
-.switch {
-  display: inline-table;
-  user-select: none;
-  touch-action: manipulation;
-  max-width: max-content;
-
-  &[data-disabled] {
-    @include mixins.use-styles(switch, disabled);
-  }
-
-  &-track {
-    cursor: pointer;
-    outline: none;
-    position: relative;
-
-    &:after {
-      visibility: hidden;
-      content: '\00A0';
-    }
-
-    &[data-disabled] {
-      cursor: default;
-      @include mixins.use-styles(switch, track, disabled);
-    }
-
-    &[data-state='checked'] {
-      @include mixins.use-styles(switch, track, checked);
-    }
-
-    &[data-state='unchecked'] {
-      @include mixins.use-styles(switch, track, unchecked);
-    }
-
-    @include mixins.use-styles(switch, track);
-  }
-
-  &-thumb {
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    @include mixins.use-styles(switch, thumb);
-    @include mixins.use-size(switch, thumb, size);
-
-    border-radius: 9999px;
-
-    &[data-state='unchecked'] {
-      transform: translate(
-        var(--switch_track_outline_width),
-        calc(var(--switch_track_height) - var(--switch_thumb_size) - var(--switch_track_outline_width))
-      );
-
-      .switch-thumb-icon {
-        @include mixins.use-styles(switch, icon, unchecked);
-      }
-    }
-
-    &[data-state='checked'] {
-      transform: translate(
-        calc(var(--switch_track_width) - var(--switch_thumb_size) - var(--switch_track_outline_width)),
-        calc(var(--switch_track_height) - var(--switch_thumb_size) - var(--switch_track_outline_width))
-      );
-
-      .switch-thumb-icon {
-        @include mixins.use-styles(switch, icon, checked);
-      }
-    }
-
-    &-icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: absolute;
-      inset: 0;
-
-      @include mixins.use-styles(switch, icon);
-
-      &[data-visible] {
-        @include mixins.use-styles(switch, icon, visible);
-      }
-
-      svg {
-        @include mixins.use-size(switch, icon, size);
-      }
-    }
-  }
-
-  &-label {
-    cursor: pointer;
-    display: table-cell;
-    word-break: break-word;
-
-    &[data-disabled] {
-      cursor: default;
-      @include mixins.use-styles(switch, label, disabled);
-    }
-
-    @include mixins.use-styles(switch, label);
-  }
-}

package/src/Switch/index.tsx

@@ -1,49 +0,0 @@
-import * as SwitchPrimitive from '@radix-ui/react-switch'
-import { attr } from '@companix/utils-browser'
-import { useId } from 'react'
-
-export interface SwitchProps {
-  checked: boolean
-  onCheckedChange: (checked: boolean) => void
-  label?: React.ReactNode
-  disabled?: boolean
-  checkedIcon?: React.ReactNode
-  uncheckedIcon?: React.ReactNode
-}
-
-const Switch = (props: SwitchProps) => {
-  const { checked, disabled, onCheckedChange, uncheckedIcon, checkedIcon, label } = props
-  const id = useId()
-
-  return (
-    <div className="switch" data-disabled={attr(disabled)}>
-      <SwitchPrimitive.Root
-        className="switch-track"
-        checked={checked}
-        onCheckedChange={onCheckedChange}
-        disabled={disabled}
-        id={id}
-      >
-        <SwitchPrimitive.Thumb className="switch-thumb">
-          {uncheckedIcon && (
-            <span className="switch-thumb-icon" data-visible={attr(!checked)}>
-              {uncheckedIcon}
-            </span>
-          )}
-          {checkedIcon && (
-            <span className="switch-thumb-icon" data-visible={attr(checked)}>
-              {checkedIcon}
-            </span>
-          )}
-        </SwitchPrimitive.Thumb>
-      </SwitchPrimitive.Root>
-      {label && (
-        <label className="switch-label" htmlFor={id} data-disabled={disabled}>
-          {label}
-        </label>
-      )}
-    </div>
-  )
-}
-
-export { Switch }

package/src/Tabs/Tabs.scss

@@ -1,58 +0,0 @@
-@use '../mixins.scss';
-
-.tabs {
-  display: flex;
-  align-items: flex-end;
-  flex: 0 0 auto;
-  position: relative;
-
-  @include mixins.use-styles(tab, container);
-}
-
-.tab-indicator-container {
-  left: 0;
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-
-  @include mixins.use-styles(tab, indicator, container);
-}
-
-.tab-indicator {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-
-  @include mixins.use-styles(tab, indicator);
-}
-
-.tab {
-  outline: none;
-  font-family: inherit;
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-  background-color: transparent;
-  user-select: none;
-  position: relative;
-  cursor: pointer;
-  font-family: inherit;
-
-  @include mixins.use-styles(tab);
-
-  &[data-disabled] {
-    cursor: not-allowed;
-    @include mixins.use-styles(tab, disabled);
-  }
-
-  &:not([data-disabled]):not([data-state='active']):hover {
-    @include mixins.use-styles(tab, hover);
-  }
-
-  &[data-state='active'] {
-    @include mixins.use-styles(tab, active);
-  }
-}

package/src/Tabs/index.tsx

@@ -1,89 +0,0 @@
-import * as RadixTabs from '@radix-ui/react-tabs'
-import { createContext, useContext, useEffect, useId, useRef, useState } from 'react'
-
-interface Props {
-  children: React.ReactNode
-  onChange: (value: string) => void
-  value: string
-}
-
-const TabsContext = createContext({ baseId: '', listRef: {} as React.RefObject<HTMLDivElement> })
-
-const makeTriggerId = (baseId: string, value: string) => {
-  return `radix-${baseId}-trigger-${value}`
-}
-
-export const Tabs = ({ children, value, onChange }: Props) => {
-  const listRef = useRef<HTMLDivElement>(null)
-  const baseId = useId()
-
-  return (
-    <RadixTabs.Root value={value} onValueChange={onChange}>
-      <TabsContext.Provider value={{ baseId, listRef }}>
-        <RadixTabs.List className="tabs" ref={listRef}>
-          <TabIndicator value={value} />
-          {children}
-        </RadixTabs.List>
-      </TabsContext.Provider>
-    </RadixTabs.Root>
-  )
-}
-
-const TabIndicator = ({ value }: { value: string }) => {
-  const [styles, setStyles] = useState<React.CSSProperties>({})
-  const { baseId, listRef } = useContext(TabsContext)
-
-  useEffect(() => {
-    const state = { observer: null as null | ResizeObserver }
-
-    if (listRef.current) {
-      const tabIdSelector = `.tab[id="${makeTriggerId(baseId, value)}"]`
-      const selectedTabElement = listRef.current.querySelector<HTMLElement>(tabIdSelector)
-
-      if (selectedTabElement != null) {
-        state.observer = new ResizeObserver(() => {
-          const { clientHeight, clientWidth, offsetLeft, offsetTop } = selectedTabElement
-
-          setStyles({
-            height: clientHeight,
-            transform: `translateX(${Math.floor(offsetLeft)}px) translateY(${Math.floor(offsetTop)}px)`,
-            width: clientWidth
-          })
-        })
-
-        state.observer.observe(selectedTabElement)
-      } else {
-        setStyles({ display: 'none' })
-      }
-    }
-
-    return () => {
-      if (state.observer) {
-        state.observer.disconnect()
-      }
-    }
-  }, [value])
-
-  return (
-    <div className="tab-indicator-container" style={styles}>
-      <div className="tab-indicator" />
-    </div>
-  )
-}
-
-interface TabProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  value: string
-}
-
-const Tab = ({ children, value, ...restProps }: TabProps) => {
-  const { baseId } = useContext(TabsContext)
-  const id = makeTriggerId(baseId, value)
-
-  return (
-    <RadixTabs.Trigger {...restProps} id={id} className="tab" value={value}>
-      {children}
-    </RadixTabs.Trigger>
-  )
-}
-
-Tabs.Tab = Tab

package/src/TextArea/TextArea.scss

@@ -1,34 +0,0 @@
-.form-textarea {
-  display: flex;
-
-  textarea {
-    padding: var(--form_space-y, 0px) var(--form_space, 0px);
-    border-radius: var(--form_border-radius);
-    border-style: solid;
-    border-width: 2px;
-    border-top-width: 0;
-    border-left-width: 0;
-    border-color: transparent;
-    min-height: max-content;
-    resize: vertical;
-    display: block;
-
-    ::-webkit-search-cancel-button {
-      display: none;
-    }
-
-    ::-webkit-search-decoration {
-      -webkit-appearance: none;
-      appearance: none;
-    }
-
-    ::-ms-clear {
-      display: none;
-    }
-
-    &[data-grow] {
-      resize: none;
-      border: none;
-    }
-  }
-}

package/src/TextArea/index.tsx

@@ -1,51 +0,0 @@
-import { useResizeTextarea } from '../__hooks/use-resize'
-import { attr, callMultiple } from '@companix/utils-browser'
-import { useEffect } from 'react'
-
-interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-  /**
-   * Свойство управляющее автоматическим изменением высоты компонента.
-   */
-  grow?: boolean
-  /**
-   * Обработчик, срабатывающий при изменении размера компонента.
-   */
-  onResize?: (el: HTMLTextAreaElement) => void
-  fill?: boolean
-}
-
-export const TextArea = ({
-  onResize,
-  grow = false,
-  value,
-  onChange,
-  disabled,
-  required,
-  rows = 2,
-  fill = false,
-  ...textAreaProps
-}: TextAreaProps) => {
-  const [refResizeTextarea, resize] = useResizeTextarea(onResize, grow)
-
-  useEffect(resize, [resize, value])
-
-  return (
-    <div
-      className="form form-textarea"
-      data-required={attr(required)}
-      data-disabled={attr(disabled)}
-      data-fill={attr(fill)}
-    >
-      <textarea
-        className="form-input"
-        data-grow={attr(grow)}
-        value={value}
-        ref={refResizeTextarea}
-        rows={rows}
-        disabled={disabled}
-        onChange={callMultiple(onChange, resize)}
-        {...textAreaProps}
-      />
-    </div>
-  )
-}

package/src/Toaster/RemoveListener.tsx

@@ -1,11 +0,0 @@
-import { useEffect } from 'react'
-
-export const RemoveListener = ({ callback }: { callback?: () => void }) => {
-  useEffect(() => {
-    return () => {
-      callback?.()
-    }
-  }, [])
-
-  return null
-}

package/src/Toaster/Toast.tsx

@@ -1,69 +0,0 @@
-import * as ToasterPrimitive from '@radix-ui/react-toast'
-import { attr } from '@companix/utils-browser'
-import { useEffect, useLayoutEffect, useRef, useState } from 'react'
-import { ToastOptions } from '.'
-import { RemoveListener } from './RemoveListener'
-
-interface ToastProps extends ToastOptions {
-  onRemoved: () => void
-  onRemoving: () => void
-  onInitialized: (ref: HTMLLIElement) => void
-  closeIcon?: React.ReactNode
-}
-
-export const Toast = (options: ToastProps) => {
-  const [mounted, setMounted] = useState(false)
-
-  const ref = useRef<HTMLLIElement>(null)
-
-  const {
-    appearance = 'neutral',
-    icon,
-    title,
-    description,
-    duration,
-    closeIcon,
-    onRemoving,
-    onRemoved,
-    onInitialized
-  } = options
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  useLayoutEffect(() => {
-    if (ref.current) {
-      onInitialized(ref.current)
-    }
-  }, [])
-
-  return (
-    <ToasterPrimitive.Root
-      ref={ref}
-      data-expanded
-      data-appearance={appearance}
-      data-mounted={attr(mounted)}
-      className="toaster"
-      duration={duration}
-    >
-      <RemoveListener callback={onRemoved} />
-      {icon && <div className="toaster-icon">{icon}</div>}
-      <div className="toaster-content">
-        {title && <ToasterPrimitive.Title className="toaster-title">{title}</ToasterPrimitive.Title>}
-        {description && (
-          <ToasterPrimitive.Description className="toaster-description">
-            {description}
-          </ToasterPrimitive.Description>
-        )}
-      </div>
-      <ToasterPrimitive.Close className="toaster-close" onClick={onRemoving}>
-        {closeIcon ?? (
-          <svg viewBox="0 0 16 16" fill="currentColor">
-            <path d="M2.96967 2.96967C3.26256 2.67678 3.73744 2.67678 4.03033 2.96967L8 6.939L11.9697 2.96967C12.2626 2.67678 12.7374 2.67678 13.0303 2.96967C13.3232 3.26256 13.3232 3.73744 13.0303 4.03033L9.061 8L13.0303 11.9697C13.2966 12.2359 13.3208 12.6526 13.1029 12.9462L13.0303 13.0303C12.7374 13.3232 12.2626 13.3232 11.9697 13.0303L8 9.061L4.03033 13.0303C3.73744 13.3232 3.26256 13.3232 2.96967 13.0303C2.67678 12.7374 2.67678 12.2626 2.96967 11.9697L6.939 8L2.96967 4.03033C2.7034 3.76406 2.6792 3.3474 2.89705 3.05379L2.96967 2.96967Z" />
-          </svg>
-        )}
-      </ToasterPrimitive.Close>
-    </ToasterPrimitive.Root>
-  )
-}

package/src/Toaster/Toaster.scss

@@ -1,151 +0,0 @@
-@use '../mixins.scss';
-
-@mixin use-appearance($appearance) {
-  &[data-appearance='#{$appearance}'] {
-    @include mixins.use-styles(toaster, $appearance);
-
-    .toaster {
-      &-icon {
-        @include mixins.use-styles(toaster, $appearance, icon);
-      }
-
-      &-title {
-        @include mixins.use-styles(toaster, $appearance, title);
-      }
-
-      &-description {
-        @include mixins.use-styles(toaster, $appearance, description);
-      }
-    }
-  }
-}
-
-.toaster {
-  pointer-events: all;
-  position: absolute;
-  outline: none;
-  opacity: 1;
-  transition: transform 0.4s, opacity 0.4s, height 0.4s, box-shadow 0.2s;
-  transform: var(--y);
-  display: flex;
-  align-items: center;
-
-  @include mixins.use-styles(toaster);
-
-  // appearance
-
-  @include use-appearance(primary);
-  @include use-appearance(neutral);
-  @include use-appearance(negative);
-  @include use-appearance(positive);
-  @include use-appearance(warning);
-
-  &[data-expanded]:not([data-mounted]) {
-    opacity: 0;
-    --y: translateY(calc(var(--lift) * -100% - var(--toaster_viewport_offset, 0)));
-  }
-
-  &[data-expanded][data-mounted] {
-    --y: translateY(calc(var(--lift) * var(--offset)));
-  }
-
-  &[data-state='closed'] {
-    animation: toastOut 400ms, toastFadeOut 400ms;
-  }
-
-  &-viewport {
-    position: fixed;
-    display: flex;
-    flex-direction: column;
-    left: var(--toaster_viewport_offset);
-    right: var(--toaster_viewport_offset);
-    z-index: 40;
-    outline: none;
-    pointer-events: none;
-    gap: var(--toasters-gap, 0);
-
-    &[data-side='top'] {
-      top: var(--toaster_viewport_offset);
-
-      .toaster {
-        --lift: 1;
-        top: 0;
-      }
-    }
-
-    &[data-side='bottom'] {
-      bottom: var(--toaster_viewport_offset);
-      top: auto;
-
-      .toaster {
-        --lift: -1;
-        bottom: 0;
-      }
-    }
-
-    &[data-align='center'] {
-      align-items: center;
-    }
-
-    &[data-align='right'] {
-      align-items: flex-end;
-    }
-
-    &[data-align='left'] {
-      align-items: flex-start;
-    }
-  }
-
-  &-content {
-    display: flex;
-    flex-direction: column;
-
-    @include mixins.use-styles(toaster, content);
-  }
-
-  &-title {
-    @include mixins.use-styles(toaster, title);
-  }
-
-  &-description {
-    @include mixins.use-styles(toaster, description);
-  }
-
-  &-close {
-    cursor: pointer;
-    top: var(--toaster_close_space, 0);
-    right: var(--toaster_close_space, 0);
-    position: absolute;
-    transition: color 0.2s;
-
-    @include mixins.use-styles(toaster, close);
-
-    &:hover {
-      @include mixins.use-styles(toaster, close, hover);
-    }
-
-    svg {
-      @include mixins.use-size(toaster, close, size);
-    }
-  }
-
-  &-icon {
-    @include mixins.use-styles(toaster, icon);
-
-    svg {
-      @include mixins.use-size(toaster, icon, size);
-    }
-  }
-}
-
-@keyframes toastOut {
-  to {
-    transform: translateY(calc(var(--lift) * -100% - var(--toaster_viewport_offset)));
-  }
-}
-
-@keyframes toastFadeOut {
-  to {
-    opacity: 0;
-  }
-}