@sio-group/form-react 0.4.1 → 0.4.3

package/dist/styles/components/button.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/assets/scss/utilities/_mixins.scss","../../../src/assets/scss/tokens/_colors.scss","../../../src/assets/scss/components/button.scss"],"names":[],"mappings":"AAEA;EACE;IAAO;;EACP;IAAK;;;ACcP;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;;AC5CF;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;;;AAGF;AAAA;EAEE;EAEA;EACA;EACA;;;AAIA;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAbF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAbF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAbF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA","file":"button.css"}

package/dist/styles/components/link.css

@@ -1,113 +0,0 @@
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-:root {
-  --sio-color-white: #ffffff;
-  --sio-color-black: #000000;
-  --sio-color-gray: #655f5d;
-  --sio-color-light-gray: #c6c6c6;
-  --sio-color-primary: #3B82F6;
-  --sio-color-success: #10B981;
-  --sio-color-error: #EF4444;
-  --sio-color-warning: #F59E0B;
-  --sio-color-info: #06B6D4;
-  --sio-color-primary-rgb: 59, 130, 246;
-  --sio-color-error-rgb: 239, 68, 68;
-  --sio-form-label: var(--sio-color-primary);
-  --sio-form-border: var(--sio-color-light-gray);
-  --sio-form-bg: var(--sio-color-white);
-  --sio-btn-primary-bg: var(--sio-color-primary);
-  --sio-btn-primary-border: var(--sio-color-primary);
-  --sio-btn-primary-text: var(--sio-color-white);
-  --sio-btn-secondary-bg: transparent;
-  --sio-btn-secondary-border: var(--sio-color-primary);
-  --sio-btn-secondary-text: var(--sio-color-primary);
-  --sio-btn-link-bg: transparent;
-  --sio-btn-link-border: transparent;
-  --sio-btn-link-text: var(--sio-color-primary);
-}
-
-:where(.btn--link) {
-  --sio-btn-bg: var(--sio-btn-link-bg);
-  --sio-btn-border: var(--sio-btn-link-border);
-  --sio-btn-text: var(--sio-btn-link-text);
-  --sio-btn-bg-hover: var(--sio-btn-bg);
-  --sio-btn-border-hover: var(--sio-btn-border);
-  --sio-btn-text-hover: color-mix(in srgb, var(--sio-btn-text) 85%, black);
-  --sio-btn-bg-disabled: var(--sio-btn-bg);
-  --sio-btn-border-disabled: var(--sio-btn-border);
-  --sio-btn-text-disabled: color-mix(in srgb, var(--sio-btn-text) 40%, white);
-}
-
-:where(.link) {
-  display: inline;
-  user-select: none;
-  transition: all 0.3s ease-in;
-  text-decoration: underline;
-}
-
-:where(.link:hover),
-:where(.link:active),
-:where(.link:focus),
-:where(.link.link--active) {
-  background: var(--sio-btn-bg-hover, var(--sio-btn-bg));
-  border-color: var(--sio-btn-border-hover, var(--sio-btn-border));
-  color: var(--sio-btn-text-hover, var(--sio-btn-text));
-}
-
-:where(.link:disabled),
-:where(.link.link--disabled) {
-  cursor: not-allowed;
-  background: var(--sio-btn-bg-disabled, var(--sio-btn-bg));
-  border-color: var(--sio-btn-border-disabled, var(--sio-btn-border));
-  color: var(--sio-btn-text-disabled, var(--sio-btn-text));
-}
-
-:where(.link--success) {
-  --sio-btn-bg: transparent;
-  --sio-btn-border: transparent;
-  --sio-btn-text: var(--sio-color-success);
-}
-
-:where(.link--error) {
-  --sio-btn-bg: transparent;
-  --sio-btn-border: transparent;
-  --sio-btn-text: var(--sio-color-error);
-}
-
-:where(.link--warning) {
-  --sio-btn-bg: transparent;
-  --sio-btn-border: transparent;
-  --sio-btn-text: var(--sio-color-warning);
-}
-
-:where(.link--info) {
-  --sio-btn-bg: transparent;
-  --sio-btn-border: transparent;
-  --sio-btn-text: var(--sio-color-info);
-}
-
-:where(.link--block) {
-  display: block;
-  width: 100%;
-}
-
-:where(.link--lg) {
-  font-size: 1.1em;
-}
-
-:where(.link--sm) {
-  font-size: 0.7em;
-}
-
-:where(.link--loading) {
-  position: relative;
-  cursor: wait !important;
-}
-
-/*# sourceMappingURL=link.css.map */

package/dist/styles/components/link.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/assets/scss/utilities/_mixins.scss","../../../src/assets/scss/tokens/_colors.scss","../../../src/assets/scss/components/link.scss"],"names":[],"mappings":"AAEA;EACE;IAAO;;EACP;IAAK;;;ACcP;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;;AC5CF;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;EACA;EACA;;;AAGF;AAAA;EAEE;EAEA;EACA;EACA;;;AAIA;EACE;EACA;EACA;;;AAHF;EACE;EACA;EACA;;;AAHF;EACE;EACA;EACA;;;AAHF;EACE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA","file":"link.css"}

package/src/assets/scss/components/button.scss

@@ -1,164 +0,0 @@
-@use "../utilities/mixins" as *;
-@use "../tokens/colors" as *;
-
-:where(.btn--primary) {
-  --sio-btn-bg: var(--sio-btn-primary-bg);
-  --sio-btn-border: var(--sio-btn-primary-border);
-  --sio-btn-text: var(--sio-btn-primary-text);
-
-  --sio-btn-bg-hover: color-mix(in srgb, var(--sio-btn-bg) 85%, black);
-  --sio-btn-border-hover: color-mix(in srgb, var(--sio-btn-border) 85%, black);
-  --sio-btn-text-hover: var(--sio-btn-text);
-
-  --sio-btn-bg-disabled: color-mix(in srgb, var(--sio-btn-bg) 40%, white);
-  --sio-btn-border-disabled: color-mix(in srgb, var(--sio-btn-border) 40%, white);
-  --sio-btn-text-disabled: color-mix(in srgb, var(--sio-btn-text) 60%, black);
-}
-
-:where(.btn--secondary) {
-  --sio-btn-bg: var(--sio-btn-secondary-bg);
-  --sio-btn-border: var(--sio-btn-secondary-border);
-  --sio-btn-text: var(--sio-btn-secondary-text);
-
-  --sio-btn-bg-hover: var(--sio-btn-bg);
-  --sio-btn-border-hover: color-mix(in srgb, var(--sio-btn-border) 85%, black);
-  --sio-btn-text-hover: var(--sio-btn-text);
-
-  --sio-btn-bg-disabled: var(--sio-btn-bg);
-  --sio-btn-border-disabled: color-mix(in srgb, var(--sio-btn-border) 40%, white);
-  --sio-btn-text-disabled: color-mix(in srgb, var(--sio-btn-text) 40%, white);
-}
-
-:where(.btn--link) {
-  --sio-btn-bg: var(--sio-btn-link-bg);
-  --sio-btn-border: var(--sio-btn-link-border);
-  --sio-btn-text: var(--sio-btn-link-text);
-
-  --sio-btn-bg-hover: var(--sio-btn-bg);
-  --sio-btn-border-hover: var(--sio-btn-border);
-  --sio-btn-text-hover: color-mix(in srgb, var(--sio-btn-text) 85%, black);
-
-  --sio-btn-bg-disabled: var(--sio-btn-bg);
-  --sio-btn-border-disabled: var(--sio-btn-border);
-  --sio-btn-text-disabled: color-mix(in srgb, var(--sio-btn-text) 40%, white);
-}
-
-:where(.btn) {
-  background-color: var(--sio-btn-bg);
-  color: var(--sio-btn-text);
-  display: inline-block;
-  font-size: .9em;
-  font-weight: 500;
-  user-select: none;
-  text-align: center;
-  border: 1px solid var(--sio-btn-border);
-  padding: 2px 15px;
-  border-radius: 3px;
-  cursor: pointer;
-  min-height: 22px;
-  transition: all .3s ease-in;
-  text-decoration: none;
-}
-
-:where(.btn--link) {
-  display: inline;
-  font-weight: unset;
-  user-select: none;
-  text-align: left;
-  padding: 0;
-  border-radius: unset;
-  min-height: unset;
-  transition: all 0.3s ease-in;
-  text-decoration: underline;
-}
-
-:where(.btn:hover),
-:where(.btn:active),
-:where(.btn:focus),
-:where(.btn.btn--active) {
-  background: var(--sio-btn-bg-hover, var(--sio-btn-bg));
-  border-color: var(--sio-btn-border-hover, var(--sio-btn-border));
-  color: var(--sio-btn-text-hover, var(--sio-btn-text));
-}
-
-:where(.btn:disabled),
-:where(.btn.btn--disabled) {
-  cursor: not-allowed;
-
-  background: var(--sio-btn-bg-disabled, var(--sio-btn-bg));
-  border-color: var(--sio-btn-border-disabled, var(--sio-btn-border));
-  color: var(--sio-btn-text-disabled, var(--sio-btn-text));
-}
-
-@each $name, $color in $colors {
-  :where(.btn--primary.btn--#{$name}) {
-    --sio-btn-bg: var(--sio-color-#{$name});
-    --sio-btn-border: var(--sio-color-#{$name});
-    --sio-btn-text: var(--sio-color-white);
-  }
-  :where(.btn--secondary.btn--#{$name}) {
-    --sio-btn-bg: transparent;
-    --sio-btn-border: var(--sio-color-#{$name});
-    --sio-btn-text: var(--sio-color-#{$name});
-  }
-  :where(.btn--link.btn--#{$name}) {
-    --sio-btn-bg: transparent;
-    --sio-btn-border: transparent;
-    --sio-btn-text: var(--sio-color-#{$name});
-  }
-}
-
-:where(.btn--block) {
-  display: block;
-  width: 100%;
-}
-
-:where(.btn--lg) {
-  padding: 5px 20px;
-  font-size: 1.1em;
-  min-height: 34px;
-}
-
-:where(.btn--sm) {
-  padding: 2.5px 5px;
-  font-size: .7em;
-  min-height: 23px;
-}
-
-:where(.btn--loading) {
-  position: relative;
-  cursor: wait !important;
-}
-
-:where(.btn__spinner) {
-  display: flex;
-  animation: spin 1s infinite linear;
-  margin-right: 8px;
-  width: 20px;
-  height: 20px;
-}
-
-:where(.btn__spinner svg) {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-:where(.btn__spinner circle) {
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 2;
-  stroke-dasharray: 30 100;
-  stroke-linecap: round;
-}
-
-:where(.btn__loading-text) {
-  position: absolute;
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-:where(.btn-group) {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
-}

package/src/assets/scss/components/link.scss

@@ -1,66 +0,0 @@
-@use "../utilities/mixins" as *;
-@use "../tokens/colors" as *;
-
-:where(.btn--link) {
-  --sio-btn-bg: var(--sio-btn-link-bg);
-  --sio-btn-border: var(--sio-btn-link-border);
-  --sio-btn-text: var(--sio-btn-link-text);
-
-  --sio-btn-bg-hover: var(--sio-btn-bg);
-  --sio-btn-border-hover: var(--sio-btn-border);
-  --sio-btn-text-hover: color-mix(in srgb, var(--sio-btn-text) 85%, black);
-
-  --sio-btn-bg-disabled: var(--sio-btn-bg);
-  --sio-btn-border-disabled: var(--sio-btn-border);
-  --sio-btn-text-disabled: color-mix(in srgb, var(--sio-btn-text) 40%, white);
-}
-:where(.link) {
-  display: inline;
-  user-select: none;
-  transition: all 0.3s ease-in;
-  text-decoration: underline;
-}
-
-:where(.link:hover),
-:where(.link:active),
-:where(.link:focus),
-:where(.link.link--active) {
-  background: var(--sio-btn-bg-hover, var(--sio-btn-bg));
-  border-color: var(--sio-btn-border-hover, var(--sio-btn-border));
-  color: var(--sio-btn-text-hover, var(--sio-btn-text));
-}
-
-:where(.link:disabled),
-:where(.link.link--disabled) {
-  cursor: not-allowed;
-
-  background: var(--sio-btn-bg-disabled, var(--sio-btn-bg));
-  border-color: var(--sio-btn-border-disabled, var(--sio-btn-border));
-  color: var(--sio-btn-text-disabled, var(--sio-btn-text));
-}
-
-@each $name, $color in $colors {
-  :where(.link--#{$name}) {
-    --sio-btn-bg: transparent;
-    --sio-btn-border: transparent;
-    --sio-btn-text: var(--sio-color-#{$name});
-  }
-}
-
-:where(.link--block) {
-  display: block;
-  width: 100%;
-}
-
-:where(.link--lg) {
-  font-size: 1.1em;
-}
-
-:where(.link--sm) {
-  font-size: .7em;
-}
-
-:where(.link--loading) {
-  position: relative;
-  cursor: wait !important;
-}

package/src/components/Button/index.tsx

@@ -1,106 +0,0 @@
-import React from "react";
-import { ButtonProps } from "../../types";
-
-const ButtonComponent: React.FC<ButtonProps> = ({
-    type = 'button',
-    label,
-    onClick,
-    variant = 'primary',
-    color = 'default',
-    size = 'md',
-    block = false,
-    loading = false,
-    disabled = false,
-    className = '',
-    ariaLabel = '',
-    style = {},
-    children,
-}: ButtonProps) => {
-  const isDisabled: boolean = disabled || loading;
-
-  const handleClick = (e: React.MouseEvent) => {
-    if (isDisabled) {
-      e.preventDefault();
-      return;
-    }
-
-    onClick?.(e);
-  };
-
-  const buttonClasses = [
-    'btn',
-    `btn--${variant}`,
-    `btn--${size}`,
-    `btn--${color}`,
-    block && 'btn--block',
-    loading && 'btn--loading',
-    isDisabled && 'btn--disabled',
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <button
-      type={type}
-      onClick={handleClick}
-      className={buttonClasses}
-      style={style}
-      disabled={isDisabled}
-      aria-label={ariaLabel || (label as string)}
-      aria-busy={loading}
-      aria-disabled={isDisabled}>
-      {loading ? (
-        <>
-					<span className='btn__spinner' aria-hidden='true'>
-						<svg viewBox='0 0 20 20'>
-							<circle cx='10' cy='10' r='8' />
-						</svg>
-					</span>
-          <span className='btn__loading-text'>Processing...</span>
-        </>
-      ) : (
-        <>
-          {children}
-          {label}
-        </>
-      )}
-    </button>
-  );
-};
-
-/**
- * Button component for user interaction.
- *
- * @component
- * @example
- * // Primaire button
- * <Button label="Save" onClick={handleSave} />
- *
- * @example
- * // Submit button with loading state
- * <Button
- *   type="submit"
- *   label="Send"
- *   variant="primary"
- *   loading
- * />
- *
- * @example
- * // Button with icon and tekst
- * <Button type="button" onClick={handleClick}>
- *   <Icon name="plus" />
- *   <span>Add</span>
- * </Button>
- *
- * @example
- * // Error variant
- * <Button
- *   type="button"
- *   label="Delete"
- *   variant="secondary"
- *   color="error"
- *   onClick={handleDelete}
- * />
- */
-export const Button: React.FC<ButtonProps> = React.memo(ButtonComponent);

package/src/components/Link/index.tsx

@@ -1,106 +0,0 @@
-import { LinkProps } from "../../types";
-import React from "react";
-
-const LinkComponent: React.FC<LinkProps> = ({
-    label,
-    to = '#',
-    onClick,
-    color = 'default',
-    size = 'md',
-    block = false,
-    loading = false,
-    disabled = false,
-    className = '',
-    ariaLabel = '',
-    navigate,
-    external = false,
-    style = {},
-    children,
-}: LinkProps) => {
-  const isDisabled: boolean = disabled || loading;
-  const isExternal: boolean = external || /^(https?:|mailto:|tel:|ftp:)/.test(to);
-
-  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
-    if (isDisabled) {
-      e.preventDefault();
-      return;
-    }
-
-    onClick?.(e);
-
-    if (!isExternal && navigate) {
-      e.preventDefault();
-      navigate();
-    }
-  };
-
-  const linkClasses = [
-    'link',
-    `link--${color}`,
-    `btn--${size}`,
-    block && 'link--block',
-    loading && 'link--loading',
-    isDisabled && 'link--disabled',
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <a
-      href={isDisabled ? undefined : to}
-      onClick={handleClick}
-      className={linkClasses}
-      style={style}
-      aria-label={ariaLabel || (label as string)}
-      aria-busy={loading}
-      aria-disabled={isDisabled}
-      target={isExternal ? '_blank' : undefined}
-      rel={isExternal ? 'noopener noreferrer' : undefined}>
-      {loading ? (
-        <>
-						<span className='btn__spinner' aria-hidden='true'>
-							<svg viewBox='0 0 20 20'>
-								<circle cx='10' cy='10' r='8' />
-							</svg>
-						</span>
-          <span className='btn__loading-text'>Processing...</span>
-        </>
-      ) : (
-        <>
-          {children}
-          {label && <span className="btn__label">{label}</span>}
-        </>
-      )}
-    </a>
-  );
-}
-
-/**
- * Custom Link component for internal or external navigation
- *
- * @component
- * @example
- * // Internal link
- * <Link to="/dashboard" label="Dashboard" />
- *
- * @example
- * // External link
- * // external property is optional
- * // http(s), ftp, email and tel with automatically render as external
- * <Link to="https://example.com" label="Visit website" external />
- *
- * @example
- * // Link with loading state
- * <Link to="/profile" label="Profile" loading />
- *
- * @example
- * // Link with custom click handler en navigation
- * <Link
- *   to="/settings"
- *   label="Settings"
- *   onClick={() => console.log('clicked')}
- *   navigate={customNavigate}
- * />
- */
-export const Link: React.FC<LinkProps> = React.memo(LinkComponent);

package/src/types/ui-props.d.ts

@@ -1,33 +0,0 @@
-import React from 'react';
-
-export type ButtonType = 'button' | 'submit' | 'reset';
-export type Variant = 'primary' | 'secondary' | 'link';
-export type Color = 'default' | 'error' | 'success' | 'warning' | 'info';
-export type Size = 'sm' | 'md' | 'lg';
-
-type BaseUiProps = {
-  variant?: Variant;
-  label?: string | React.ReactNode;
-  color?: Color;
-  size?: Size;
-  block?: boolean;
-  loading?: boolean;
-  disabled?: boolean;
-  className?: string;
-  ariaLabel?: string;
-  style?: React.CSSProperties;
-  children?: React.ReactNode;
-};
-
-export type ButtonProps = BaseUiProps & {
-  type?: ButtonType;
-  onClick: (e: React.MouseEvent) => void;
-};
-
-export type LinkProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick' | 'color'> &
-  BaseUiProps & {
-  to: string;
-  navigate?: () => void;
-  external?: boolean;
-  onClick?: (e: React.MouseEvent) => void;
-};