@companix/uikit 0.0.2 → 0.0.3

package/playground/switch/index.tsx

@@ -1,44 +0,0 @@
-import { Icon } from '@/Icon'
-import { Switch, SwitchProps } from '@/Switch'
-import { faCheck, faClose } from '@fortawesome/free-solid-svg-icons'
-import { useState } from 'react'
-
-const longtext = `The expanded form makes it easy to schedule meetings: fields to fill out are displayed on the left, and the participants' schedule is shown on the right.`
-
-export const SwitchExample = () => {
-  return (
-    <div className="col-group">
-      <div className="flex gap-24">
-        <div className="flex flex-col gap-12">
-          <SwitchControl label="Accept terms and conditions" />
-          <SwitchControl
-            label="I want to recieve promote emails"
-            checkedIcon={<Icon icon={faCheck} />}
-            uncheckedIcon={<Icon icon={faClose} />}
-          />
-        </div>
-        <div className="flex flex-col gap-12">
-          <SwitchControl label="Accept terms and conditions" disabled defaultChecked />
-          <SwitchControl label="I want to recieve promote emails" disabled />
-        </div>
-      </div>
-      <div style={{ height: '1px', background: '#eeeeee', margin: '12px 0px' }} />
-      <div className="flex flex-col gap-12">
-        <SwitchControl label="Accept terms and conditions" defaultChecked />
-        <SwitchControl defaultChecked label={'Use the advanced form to create events'} />
-        <SwitchControl label={longtext + ' ' + longtext} defaultChecked />
-      </div>
-    </div>
-  )
-}
-
-interface Props extends Omit<SwitchProps, 'checked' | 'onCheckedChange'> {
-  label?: React.ReactNode
-  defaultChecked?: boolean
-}
-
-const SwitchControl = ({ defaultChecked, ...props }: Props) => {
-  const [checked, setCheck] = useState(defaultChecked ?? false)
-
-  return <Switch {...props} checked={checked} onCheckedChange={setCheck} />
-}

package/playground/tabs/index.tsx

@@ -1,16 +0,0 @@
-import { Tabs } from '@/Tabs'
-import { useState } from 'react'
-
-export const TabsExample = () => {
-  const [value, onChange] = useState<string>('account')
-
-  return (
-    <div>
-      <Tabs value={value} onChange={onChange}>
-        <Tabs.Tab value="account">Account</Tabs.Tab>
-        <Tabs.Tab value="password">Password</Tabs.Tab>
-        <Tabs.Tab value="settings">Settings</Tabs.Tab>
-      </Tabs>
-    </div>
-  )
-}

package/playground/text-area/index.tsx

@@ -1,17 +0,0 @@
-import { TextArea } from '@/TextArea'
-
-export const TextAreaExample = () => {
-  return (
-    <div className="col-group">
-      <div className="flex items-start gap-10">
-        <TextArea grow placeholder="Auto growing" />
-        <TextArea grow placeholder="Growing limited" style={{ maxHeight: '240px' }} />
-        <TextArea placeholder="Resizable and fill" fill />
-      </div>
-      <div className="flex items-start gap-10">
-        <TextArea grow placeholder="Auto growing" disabled />
-        <TextArea grow placeholder="Growing limited" style={{ maxHeight: '240px' }} required />
-      </div>
-    </div>
-  )
-}

package/playground/text-input/index.tsx

@@ -1,12 +0,0 @@
-import { Form } from '@/Form'
-
-export const TextInput = () => {
-  return (
-    <div style={{ width: '200px' }}>
-      <div style={{ color: '#ffffff', marginBottom: '10px' }}>TextInput</div>
-      <div style={{ marginBottom: '20px' }}>
-        <Form />
-      </div>
-    </div>
-  )
-}

package/playground/toaster/index.tsx

@@ -1,156 +0,0 @@
-import { Button } from '@/Button'
-import { ButtonGroup } from '@/ButtonGroup'
-import { Icon } from '@/Icon'
-import { createToaster } from '@/Toaster'
-import { faCircleCheck, faCircleInfo, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons'
-import { useState } from 'react'
-
-const Toaster = createToaster({ duration: 2500, align: 'center' })
-
-export const ToasterExample = () => {
-  const [side, setSide] = useState<'top' | 'bottom'>('top')
-  const [align, setAlign] = useState<'center' | 'left' | 'right'>('center')
-
-  return (
-    <div>
-      <div className="col-group">
-        <div className="row-group">
-          <ButtonGroup>
-            <Button active={side === 'top'} onClick={() => setSide('top')}>
-              top
-            </Button>
-            <Button active={side === 'bottom'} onClick={() => setSide('bottom')}>
-              bottom
-            </Button>
-          </ButtonGroup>
-          <ButtonGroup>
-            <Button active={align === 'left'} onClick={() => setAlign('left')}>
-              left
-            </Button>
-            <Button active={align === 'center'} onClick={() => setAlign('center')}>
-              center
-            </Button>
-            <Button active={align === 'right'} onClick={() => setAlign('right')}>
-              right
-            </Button>
-          </ButtonGroup>
-        </div>
-        <div className="row-group">
-          <Button
-            appearance="neutral"
-            onClick={() => {
-              Toaster.send({
-                appearance: 'neutral',
-                title: 'Event created',
-                description: 'Sunday, December 21, 2025 at 2:45 AM'
-              })
-            }}
-          >
-            Create event
-          </Button>
-          <Button
-            onClick={() => {
-              Toaster.send({
-                appearance: 'neutral',
-                title: 'The text is copied'
-              })
-            }}
-          >
-            Copy text
-          </Button>
-          <Button
-            onClick={() => {
-              Toaster.send({
-                appearance: 'positive',
-                title: 'Move files is completed!',
-                description: 'Moved 6 files'
-              })
-            }}
-          >
-            Move files
-          </Button>
-          <Button
-            onClick={() =>
-              Toaster.send({
-                appearance: 'negative',
-                title: 'Permission error',
-                description:
-                  'You do not have permissions to perform this action. Please contact your system administrator to request the appropriate access rights.'
-              })
-            }
-          >
-            Delete root
-          </Button>
-        </div>
-        <div className="row-group">
-          <Button
-            appearance="primary"
-            onClick={() => {
-              Toaster.send({
-                appearance: 'primary',
-                title: 'Event has been created',
-                description: 'Be at the area 10 minutes before the event time',
-                icon: <Icon icon={faCircleInfo} />
-              })
-            }}
-          >
-            Primary
-          </Button>
-          <Button
-            appearance="neutral"
-            onClick={() => {
-              Toaster.send({
-                appearance: 'neutral',
-                title: 'Event has been created',
-                description: 'Be at the area 10 minutes before the event time',
-                icon: <Icon icon={faCircleInfo} />
-              })
-            }}
-          >
-            Neutral
-          </Button>
-          <Button
-            appearance="positive"
-            onClick={() => {
-              Toaster.send({
-                appearance: 'positive',
-                title: 'Event has been created',
-                description: 'Be at the area 10 minutes before the event time',
-                icon: <Icon icon={faCircleCheck} />
-              })
-            }}
-          >
-            Positive
-          </Button>
-          <Button
-            appearance="negative"
-            onClick={() => {
-              Toaster.send({
-                appearance: 'negative',
-                title: 'Event has been created',
-                description: 'Be at the area 10 minutes before the event time',
-                icon: <Icon icon={faTriangleExclamation} />
-              })
-            }}
-          >
-            Negative
-          </Button>
-          <Button
-            appearance="neutral"
-            onClick={() => {
-              Toaster.send({
-                appearance: 'warning',
-                title: 'Event has been created',
-                description: 'Be at the area 10 minutes before the event time',
-                icon: <Icon icon={faTriangleExclamation} />
-              })
-            }}
-          >
-            Warning
-          </Button>
-        </div>
-      </div>
-      <Toaster.Viewport align={align} side={side} />
-    </div>
-  )
-}

package/playground/tooltip/index.tsx

@@ -1,26 +0,0 @@
-import { Button } from '@/Button'
-import { ButtonGroup } from '@/ButtonGroup'
-import { Tooltip } from '@/Tooltip'
-
-export const TooltipExample = () => {
-  return (
-    <div className="col-group">
-      <div className="row-group">
-        <Tooltip content={<div>Content Tooltip</div>}>
-          <Button>Hover</Button>
-        </Tooltip>
-        <ButtonGroup>
-          <Tooltip content={<div>Each</div>}>
-            <Button>Group</Button>
-          </Tooltip>
-          <Tooltip content={<div>has</div>}>
-            <Button>Of</Button>
-          </Tooltip>
-          <Tooltip content={<div>a tooltip</div>}>
-            <Button>Buttons</Button>
-          </Tooltip>
-        </ButtonGroup>
-      </div>
-    </div>
-  )
-}

package/src/Button/Button.scss

@@ -1,128 +0,0 @@
-@use '../mixins.scss';
-
-// scheme: bth-[appearance]-[mode]-[property]--[state]
-//
-// appearance:  primary, neutral, positive, negative
-// mode: default, outline, minimal
-// state: enabled, hovered, pressed, disabled, loading
-// property: text, background, shadow, border
-
-@mixin use-mode($appearance, $mode) {
-  @include mixins.use-styles(button, $appearance, $mode, enabled);
-
-  &:hover {
-    @include mixins.use-styles(button, $appearance, $mode, hovered);
-  }
-
-  &[data-active],
-  &:active {
-    @include mixins.use-styles(button, $appearance, $mode, pressed);
-  }
-
-  &[data-loading] {
-    @include mixins.use-styles(button, $appearance, $mode, loading);
-  }
-
-  &[disabled] {
-    cursor: not-allowed;
-    @include mixins.use-styles(button, $appearance, $mode, disabled);
-  }
-}
-
-@mixin use-appearance($appearance) {
-  &[data-appearance='#{$appearance}'] {
-    &[data-mode='default'] {
-      @include use-mode($appearance, default);
-    }
-
-    &[data-mode='outline'] {
-      @include use-mode($appearance, outline);
-    }
-
-    &[data-mode='minimal'] {
-      @include use-mode($appearance, minimal);
-    }
-  }
-}
-
-.button {
-  overflow: visible;
-  box-sizing: border-box;
-  -moz-user-focus: ignore;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  text-decoration: none;
-  outline: none;
-  -webkit-tap-highlight-color: transparent;
-  -ms-touch-action: manipulation;
-  touch-action: manipulation;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-
-  @include mixins.use-styles(button);
-  @include mixins.items-spacing(8px);
-
-  // fill
-
-  &[data-fill] {
-    width: 100%;
-  }
-
-  // align
-
-  &[data-align='center'] {
-    justify-content: center;
-
-    & > .button-text {
-      text-align: center;
-    }
-  }
-
-  &[data-align='left'] {
-    justify-content: left;
-
-    & > .button-text {
-      flex: 1 1 auto;
-      text-align: left;
-    }
-  }
-
-  &[data-align='right'] {
-    justify-content: right;
-
-    & > .button-text {
-      flex: 1 1 auto;
-      text-align: right;
-    }
-  }
-
-  // sizes
-
-  &[data-size='sm'] {
-    @include mixins.use-styles(button, size, sm);
-  }
-
-  &[data-size='md'] {
-    @include mixins.use-styles(button, size, md);
-  }
-
-  &[data-size='lg'] {
-    @include mixins.use-styles(button, size, lg);
-  }
-
-  // text
-
-  &-text {
-    @include mixins.truncate-text();
-  }
-
-  // appearance
-
-  @include use-appearance(primary);
-  @include use-appearance(neutral);
-  @include use-appearance(negative);
-  @include use-appearance(positive);
-}

package/src/Button/index.tsx

@@ -1,72 +0,0 @@
-import classNames from 'classnames'
-import { Spinner } from '../Spinner'
-import { forwardRef } from 'react'
-import { attr } from '@companix/utils-browser'
-
-export type Appearance = 'primary' | 'neutral' | 'positive' | 'negative'
-export type Mode = 'default' | 'outline' | 'minimal'
-export type Size = 'sm' | 'md' | 'lg'
-
-export interface InternButtonProps {
-  icon?: React.ReactNode
-  iconRight?: React.ReactNode
-  appearance?: Appearance
-  mode?: Mode
-  size?: Size
-  fill?: boolean
-  align?: 'left' | 'center' | 'right'
-  loading?: boolean
-  active?: boolean
-  text?: React.ReactNode
-  children?: React.ReactNode
-  className?: string
-}
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, InternButtonProps {}
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      children,
-      fill,
-      text,
-      active,
-      mode = 'default',
-      appearance = 'neutral',
-      size = 'md',
-      align,
-      icon,
-      loading,
-      className,
-      iconRight,
-      ...buttonProps
-    },
-    ref
-  ) => {
-    return (
-      <button
-        ref={ref}
-        className={classNames('button', className)}
-        data-size={size}
-        data-loading={attr(loading)}
-        data-align={loading ? 'center' : align ?? (icon && iconRight ? 'left' : 'center')}
-        data-appearance={appearance}
-        data-mode={mode}
-        data-fill={attr(fill)}
-        data-active={attr(active)}
-        {...buttonProps}
-        onClick={loading ?? buttonProps.disabled ? undefined : buttonProps.onClick}
-      >
-        {loading ? (
-          <Spinner size={14} width={2} />
-        ) : (
-          <>
-            {icon}
-            {(children ?? text) && <span className="button-text">{text ?? children}</span>}
-            {iconRight}
-          </>
-        )}
-      </button>
-    )
-  }
-)

package/src/ButtonGroup/ButtonGroup.scss

@@ -1,18 +0,0 @@
-.button-group {
-  display: flex;
-
-  &[data-fill] {
-    width: 100%;
-  }
-
-  & > .button:not(:first-child) {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-  }
-
-  & > .button:not(:last-child) {
-    border-bottom-right-radius: 0;
-    border-top-right-radius: 0;
-    margin-right: -1px;
-  }
-}

package/src/ButtonGroup/index.tsx

@@ -1,20 +0,0 @@
-import './ButtonGroup.scss'
-import { forwardRef } from 'react'
-import cn from 'classnames'
-import { attr } from '@companix/utils-browser'
-
-interface ButtonGroupProps {
-  children: React.ReactNode
-  className?: string
-  fill?: boolean
-}
-
-export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
-  ({ children, className, fill }, ref) => {
-    return (
-      <div ref={ref} className={cn('button-group', className)} data-fill={attr(fill)}>
-        {children}
-      </div>
-    )
-  }
-)

package/src/Checkbox/Checkbox.scss

@@ -1,115 +0,0 @@
-@use '../mixins.scss';
-
-.checkbox {
-  display: inline-table;
-  user-select: none;
-  touch-action: manipulation;
-  max-width: max-content;
-
-  @include mixins.use-styles(checkbox);
-
-  &:not([data-disabled]):not([data-required]):hover {
-    .checkbox-box[data-state='unchecked'] {
-      @include mixins.use-styles(checkbox, box, hover);
-    }
-  }
-
-  &:not([data-disabled]):not([data-required]):active {
-    .checkbox-box[data-state='unchecked'] {
-      @include mixins.use-styles(checkbox, box, active);
-    }
-  }
-
-  &:not([data-disabled]) {
-    .checkbox-box[data-state='checked'] {
-      @include mixins.use-styles(checkbox, box, checked);
-    }
-  }
-
-  &[data-disabled] {
-    @include mixins.use-styles(checkbox, disabled);
-  }
-
-  &[data-required] {
-    @include mixins.use-styles(checkbox, required);
-
-    .checkbox-box::before {
-      content: '';
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      left: 0;
-
-      @include mixins.use-styles(checkbox, required, box);
-
-      border-radius: mixins.get-var-name(checkbox, box, border-radius);
-    }
-  }
-
-  &[data-size='sm'] {
-    @include mixins.use-styles(checkbox, size, sm);
-
-    .checkbox-box {
-      @include mixins.use-size(checkbox, size, sm, box);
-    }
-  }
-
-  &[data-size='md'] {
-    @include mixins.use-styles(checkbox, size, md);
-
-    .checkbox-box {
-      @include mixins.use-size(checkbox, size, md, box);
-    }
-  }
-
-  &-box {
-    cursor: pointer;
-    outline: none;
-    transition: background-color 0.1s linear;
-    display: inline-block;
-    position: relative;
-    z-index: 0;
-
-    @include mixins.use-styles(checkbox, box);
-
-    &[data-disabled] {
-      cursor: default;
-    }
-
-    &:after {
-      visibility: hidden;
-      content: '\00A0';
-    }
-  }
-
-  &-label {
-    cursor: pointer;
-    display: table-cell;
-    word-break: break-word;
-
-    &[data-disabled] {
-      cursor: default;
-    }
-
-    @include mixins.use-styles(checkbox, label);
-  }
-
-  &-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 3;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0;
-
-    &[data-state='checked'] {
-      @include mixins.use-styles(checkbox, icon, in);
-    }
-
-    &[data-state='unchecked'] {
-      @include mixins.use-styles(checkbox, icon, out);
-    }
-  }
-}

package/src/Checkbox/index.tsx

@@ -1,46 +0,0 @@
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { Icon } from '../Icon'
-import { faCheck } from '@fortawesome/free-solid-svg-icons'
-import { useId } from 'react'
-import { attr } from '@companix/utils-browser'
-
-interface CheckboxProps {
-  checked: boolean
-  onCheckedChange: (checked: boolean) => void
-  size?: 'sm' | 'md'
-  label?: React.ReactNode
-  disabled?: boolean
-  required?: boolean
-}
-
-const Checkbox = ({ checked, required, disabled, onCheckedChange, size, label }: CheckboxProps) => {
-  const id = useId()
-
-  return (
-    <div
-      className="checkbox"
-      data-size={size ?? 'md'}
-      data-required={attr(required && !checked)}
-      data-disabled={attr(disabled)}
-    >
-      <CheckboxPrimitive.Root
-        className="checkbox-box"
-        checked={checked}
-        onCheckedChange={onCheckedChange}
-        disabled={disabled}
-        id={id}
-      >
-        <CheckboxPrimitive.Indicator className="checkbox-icon">
-          <Icon icon={faCheck} size="xxxs" />
-        </CheckboxPrimitive.Indicator>
-      </CheckboxPrimitive.Root>
-      {label && (
-        <label className="checkbox-label" htmlFor={id} data-disabled={attr(disabled)}>
-          {label}
-        </label>
-      )}
-    </div>
-  )
-}
-
-export { Checkbox }