@infonomic/uikit 5.4.0 → 5.5.0

package/dist/astro.d.ts

@@ -7,14 +7,17 @@ import type CardHeaderComponent from './components/card/card-header.astro'
 import type CardTitleComponent from './components/card/card-title.astro'
 import type CardComponent from './components/card/card.astro'
 import type ContainerComponent from './components/container/container.astro'
+import type CheckboxComponent from './components/forms/checkbox.astro'
 import type ErrorTextComponent from './components/forms/error-text.astro'
 import type HelpTextComponent from './components/forms/help-text.astro'
 import type InputAdornmentComponent from './components/forms/input-adornment.astro'
 import type InputComponent from './components/forms/input.astro'
 import type LabelComponent from './components/forms/label.astro'
+import type TextAreaComponent from './components/forms/text-area.astro'
 import type HamburgerComponent from './components/hamburger/hamburger.astro'
 import type ScrollToTopComponent from './components/scroll-to-top/scroll-to-top.astro'
 import type SectionComponent from './components/section/section.astro'
+import type CheckIconComponent from './icons/check-icon.astro'
 import type CloseIconComponent from './icons/close-icon.astro'
 import type IconElementComponent from './icons/icon-element.astro'
 import type LightIconComponent from './icons/light-icon.astro'
@@ -30,14 +33,17 @@ export declare const CardHeader: typeof CardHeaderComponent
 export declare const CardTitle: typeof CardTitleComponent
 export declare const Card: typeof CardComponent
 export declare const Container: typeof ContainerComponent
+export declare const Checkbox: typeof CheckboxComponent
 export declare const ErrorText: typeof ErrorTextComponent
 export declare const HelpText: typeof HelpTextComponent
 export declare const InputAdornment: typeof InputAdornmentComponent
 export declare const Input: typeof InputComponent
 export declare const Label: typeof LabelComponent
+export declare const TextArea: typeof TextAreaComponent
 export declare const Hamburger: typeof HamburgerComponent
 export declare const ScrollToTop: typeof ScrollToTopComponent
 export declare const Section: typeof SectionComponent
+export declare const CheckIcon: typeof CheckIconComponent
 export declare const CloseIcon: typeof CloseIconComponent
 export declare const IconElement: typeof IconElementComponent
 export declare const LightIcon: typeof LightIconComponent

package/dist/astro.js

@@ -7,14 +7,17 @@ import CardHeaderComponent from './components/card/card-header.astro'
 import CardTitleComponent from './components/card/card-title.astro'
 import CardComponent from './components/card/card.astro'
 import ContainerComponent from './components/container/container.astro'
+import CheckboxComponent from './components/forms/checkbox.astro'
 import ErrorTextComponent from './components/forms/error-text.astro'
 import HelpTextComponent from './components/forms/help-text.astro'
 import InputAdornmentComponent from './components/forms/input-adornment.astro'
 import InputComponent from './components/forms/input.astro'
 import LabelComponent from './components/forms/label.astro'
+import TextAreaComponent from './components/forms/text-area.astro'
 import HamburgerComponent from './components/hamburger/hamburger.astro'
 import ScrollToTopComponent from './components/scroll-to-top/scroll-to-top.astro'
 import SectionComponent from './components/section/section.astro'
+import CheckIconComponent from './icons/check-icon.astro'
 import CloseIconComponent from './icons/close-icon.astro'
 import IconElementComponent from './icons/icon-element.astro'
 import LightIconComponent from './icons/light-icon.astro'
@@ -30,14 +33,17 @@ export const CardHeader = CardHeaderComponent
 export const CardTitle = CardTitleComponent
 export const Card = CardComponent
 export const Container = ContainerComponent
+export const Checkbox = CheckboxComponent
 export const ErrorText = ErrorTextComponent
 export const HelpText = HelpTextComponent
 export const InputAdornment = InputAdornmentComponent
 export const Input = InputComponent
 export const Label = LabelComponent
+export const TextArea = TextAreaComponent
 export const Hamburger = HamburgerComponent
 export const ScrollToTop = ScrollToTopComponent
 export const Section = SectionComponent
+export const CheckIcon = CheckIconComponent
 export const CloseIcon = CloseIconComponent
 export const IconElement = IconElementComponent
 export const LightIcon = LightIconComponent

package/dist/components/forms/checkbox.astro

@@ -0,0 +1,129 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import type { Intent, Size, Variant } from './@types/checkbox.js'
+import CheckIcon from '../../icons/check-icon.astro'
+import ErrorText from './error-text.astro'
+import HelpText from './help-text.astro'
+import styles from './checkbox.module.css'
+
+interface Props extends HTMLAttributes<'input'> {
+  id: string
+  name: string
+  label: string
+  variant?: Variant
+  size?: Size
+  intent?: Intent
+  reverse?: boolean
+  checked?: boolean
+  class?: string
+  checkBoxClasses?: string
+  containerClasses?: string
+  componentClasses?: string
+  labelClasses?: string
+  error?: boolean
+  helpText?: string
+  errorText?: string
+}
+
+const {
+  id,
+  name,
+  label,
+  variant = 'outlined',
+  size = 'md',
+  intent = 'primary',
+  reverse = false,
+  checked = false,
+  class: className,
+  checkBoxClasses,
+  containerClasses,
+  componentClasses,
+  labelClasses,
+  error = false,
+  helpText = '',
+  errorText = '',
+  ...rest
+} = Astro.props
+---
+
+<div class:list={['checkbox-container', containerClasses]}>
+  <div
+    class:list={[
+      'checkbox-component',
+      styles.container,
+      componentClasses,
+      { [styles.reverse]: reverse }
+    ]}
+  >
+    <input type="checkbox" id={id} name={name} checked={checked} class="sr-only peer" {...rest} />
+
+    <label
+      for={id}
+      class:list={[
+        'checkbox',
+        variant,
+        size,
+        intent,
+        styles.checkbox,
+        styles[variant],
+        styles[size],
+        styles[intent],
+        checkBoxClasses,
+        className
+      ]}
+      data-state={checked ? 'checked' : 'unchecked'}
+    >
+      <span
+        class:list={['checkbox-indicator', styles.indicator]}
+        data-state={checked ? 'checked' : 'unchecked'}
+      >
+        <CheckIcon class={styles.icon} />
+      </span>
+    </label>
+
+    <label for={id} class:list={[styles.label, labelClasses]}>
+      {label}
+    </label>
+  </div>
+  {
+    error ? (
+      <ErrorText id={`error-for-${id}`} text={errorText ?? helpText} />
+    ) : (
+      helpText?.length > 0 && <HelpText text={helpText} />
+    )
+  }
+</div>
+
+<script>
+  function setupCheckboxes() {
+    const inputs = document.querySelectorAll('input[type="checkbox"].peer')
+
+    inputs.forEach((input) => {
+      const checkboxInput = input as HTMLInputElement
+      const id = checkboxInput.id
+      // Find the visual checkbox label associated with this input
+      const visualCheckbox = document.querySelector(`label.checkbox[for="${id}"]`)
+      const indicator = visualCheckbox?.querySelector('.checkbox-indicator')
+
+      if (visualCheckbox && indicator) {
+        // Update state on change
+        checkboxInput.addEventListener('change', () => {
+          const state = checkboxInput.checked ? 'checked' : 'unchecked'
+          visualCheckbox.setAttribute('data-state', state)
+          indicator.setAttribute('data-state', state)
+        })
+
+        // Ensure initial state is correct
+        const state = checkboxInput.checked ? 'checked' : 'unchecked'
+        visualCheckbox.setAttribute('data-state', state)
+        indicator.setAttribute('data-state', state)
+      }
+    })
+  }
+
+  // Run on initial load
+  setupCheckboxes()
+
+  // Support Astro View Transitions
+  document.addEventListener('astro:page-load', setupCheckboxes)
+</script>

package/dist/components/forms/checkbox.js

@@ -1,6 +1,6 @@
 'use client'
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CheckIcon } from "@radix-ui/react-icons";
+import { CheckIcon } from "../../icons/check-icon.js";
 import classnames from "classnames";
 import { Checkbox as external_radix_ui_Checkbox, Label } from "radix-ui";
 import checkbox_module from "./checkbox.module.js";

package/dist/components/forms/text-area.astro

@@ -0,0 +1,77 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import type { Intent, Variant } from './@types/input.js'
+import ErrorText from './error-text.astro'
+import HelpText from './help-text.astro'
+import inputStyles from './input.module.css'
+import Label from './label.astro'
+import styles from './text-area.module.css'
+
+interface Props extends HTMLAttributes<'textarea'> {
+  id: string
+  name: string
+  label: string
+  required?: boolean
+  variant?: Variant
+  intent?: Intent
+  rows?: number
+  placeHolder?: string
+  autoComplete?: string
+  error?: boolean
+  helpText?: string
+  errorText?: string
+  class?: string
+}
+
+const {
+  id,
+  name,
+  label,
+  rows = 4,
+  required = false,
+  variant = 'outlined',
+  intent = 'primary',
+  placeHolder = '',
+  autoComplete = 'off',
+  error = false,
+  helpText = '',
+  errorText = '',
+  class: className,
+  ...rest
+} = Astro.props as Props
+---
+
+<fieldset class:list={['text-area-wrapper', inputStyles['input-wrapper']]}>
+  <Label id={id} for={id} required={required} label={label} />
+  <textarea
+    id={id}
+    name={name}
+    required={required}
+    rows={rows}
+    auto-complete={autoComplete}
+    placeholder={placeHolder}
+    aria-labelledby={`label-for-${id}`}
+    aria-invalid={error}
+    aria-required={required}
+    aria-errormessage={errorText}
+    aria-describedby={error ? `error-for-${id}` : undefined}
+    class:list={[
+      'text-area',
+      variant,
+      intent,
+      inputStyles.input,
+      inputStyles[variant],
+      inputStyles[intent],
+      styles['text-area'],
+      error && inputStyles.error,
+      className
+    ]}
+    {...rest}></textarea>
+  {
+    error ? (
+      <ErrorText id={`error-for-${id}`} text={errorText ?? helpText} />
+    ) : (
+      helpText?.length > 0 && <HelpText text={helpText} />
+    )
+  }
+</fieldset>

package/dist/icons/check-icon.astro

@@ -0,0 +1,37 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  width?: string
+  height?: string
+  menuItem?: boolean
+  svgClass?: string
+}
+
+import IconElement from './icon-element.astro'
+import styles from './icons.module.css'
+
+const { class: className, width, height, svgClass: svgClassName, menuItem, ...rest } = Astro.props
+---
+
+<IconElement
+  class:list={['check-icon', className]}
+  width={width}
+  height={height}
+  menuItem={menuItem}
+  {...rest}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 15 15"
+    class:list={[styles['fill-current'], svgClassName]}
+    focusable="false"
+    aria-hidden="true"
+  >
+    <path
+      d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"></path>
+  </svg>
+</IconElement>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@infonomic/uikit",
   "private": false,
   "license": "MIT",
-  "version": "5.4.0",
+  "version": "5.5.0",
   "type": "module",
   "description": "Infonomic UI kit is a collection of reusable UI components and utilities for React and Astro.",
   "keywords": [

package/src/astro.js

@@ -8,13 +8,16 @@ import CardHeaderComponent from './components/card/card-header.astro'
 import CardTitleComponent from './components/card/card-title.astro'
 import ContainerComponent from './components/container/container.astro'
 import HamburgerComponent from './components/hamburger/hamburger.astro'
+import CheckboxComponent from './components/forms/checkbox.astro'
 import ErrorTextComponent from './components/forms/error-text.astro'
 import HelpTextComponent from './components/forms/help-text.astro'
 import InputComponent from './components/forms/input.astro'
 import InputAdornmentComponent from './components/forms/input-adornment.astro'
 import LabelComponent from './components/forms/label.astro'
+import TextAreaComponent from './components/forms/text-area.astro'
 import SectionComponent from './components/section/section.astro'
 import ScrollToTopComponent from './components/scroll-to-top/scroll-to-top.astro'
+import CheckIconComponent from './icons/check-icon.astro'
 import CloseIconComponent from './icons/close-icon.astro'
 import IconElementComponent from './icons/icon-element.astro'
 import LightIconComponent from './icons/light-icon.astro'
@@ -32,15 +35,18 @@ export const CardHeader = CardHeaderComponent
 export const CardTitle = CardTitleComponent
 export const Card = CardComponent
 export const Container = ContainerComponent
+export const Checkbox = CheckboxComponent
 export const ErrorText = ErrorTextComponent
 export const HelpText = HelpTextComponent
 export const InputAdornment = InputAdornmentComponent
 export const Input = InputComponent
 export const Label = LabelComponent
+export const TextArea = TextAreaComponent
 export const Section = SectionComponent
 export const ScrollToTop = ScrollToTopComponent
 export const IconElement = IconElementComponent
 export const LightIcon = LightIconComponent
 export const MoonIcon = MoonIconComponent
 export const SearchIcon = SearchIconComponent
+export const CheckIcon = CheckIconComponent
 export const CloseIcon = CloseIconComponent

package/src/components/forms/checkbox.astro

@@ -0,0 +1,129 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import type { Intent, Size, Variant } from './@types/checkbox.js'
+import CheckIcon from '../../icons/check-icon.astro'
+import ErrorText from './error-text.astro'
+import HelpText from './help-text.astro'
+import styles from './checkbox.module.css'
+
+interface Props extends HTMLAttributes<'input'> {
+  id: string
+  name: string
+  label: string
+  variant?: Variant
+  size?: Size
+  intent?: Intent
+  reverse?: boolean
+  checked?: boolean
+  class?: string
+  checkBoxClasses?: string
+  containerClasses?: string
+  componentClasses?: string
+  labelClasses?: string
+  error?: boolean
+  helpText?: string
+  errorText?: string
+}
+
+const {
+  id,
+  name,
+  label,
+  variant = 'outlined',
+  size = 'md',
+  intent = 'primary',
+  reverse = false,
+  checked = false,
+  class: className,
+  checkBoxClasses,
+  containerClasses,
+  componentClasses,
+  labelClasses,
+  error = false,
+  helpText = '',
+  errorText = '',
+  ...rest
+} = Astro.props
+---
+
+<div class:list={['checkbox-container', containerClasses]}>
+  <div
+    class:list={[
+      'checkbox-component',
+      styles.container,
+      componentClasses,
+      { [styles.reverse]: reverse }
+    ]}
+  >
+    <input type="checkbox" id={id} name={name} checked={checked} class="sr-only peer" {...rest} />
+
+    <label
+      for={id}
+      class:list={[
+        'checkbox',
+        variant,
+        size,
+        intent,
+        styles.checkbox,
+        styles[variant],
+        styles[size],
+        styles[intent],
+        checkBoxClasses,
+        className
+      ]}
+      data-state={checked ? 'checked' : 'unchecked'}
+    >
+      <span
+        class:list={['checkbox-indicator', styles.indicator]}
+        data-state={checked ? 'checked' : 'unchecked'}
+      >
+        <CheckIcon class={styles.icon} />
+      </span>
+    </label>
+
+    <label for={id} class:list={[styles.label, labelClasses]}>
+      {label}
+    </label>
+  </div>
+  {
+    error ? (
+      <ErrorText id={`error-for-${id}`} text={errorText ?? helpText} />
+    ) : (
+      helpText?.length > 0 && <HelpText text={helpText} />
+    )
+  }
+</div>
+
+<script>
+  function setupCheckboxes() {
+    const inputs = document.querySelectorAll('input[type="checkbox"].peer')
+
+    inputs.forEach((input) => {
+      const checkboxInput = input as HTMLInputElement
+      const id = checkboxInput.id
+      // Find the visual checkbox label associated with this input
+      const visualCheckbox = document.querySelector(`label.checkbox[for="${id}"]`)
+      const indicator = visualCheckbox?.querySelector('.checkbox-indicator')
+
+      if (visualCheckbox && indicator) {
+        // Update state on change
+        checkboxInput.addEventListener('change', () => {
+          const state = checkboxInput.checked ? 'checked' : 'unchecked'
+          visualCheckbox.setAttribute('data-state', state)
+          indicator.setAttribute('data-state', state)
+        })
+
+        // Ensure initial state is correct
+        const state = checkboxInput.checked ? 'checked' : 'unchecked'
+        visualCheckbox.setAttribute('data-state', state)
+        indicator.setAttribute('data-state', state)
+      }
+    })
+  }
+
+  // Run on initial load
+  setupCheckboxes()
+
+  // Support Astro View Transitions
+  document.addEventListener('astro:page-load', setupCheckboxes)
+</script>

package/src/components/forms/checkbox.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { CheckIcon } from '@radix-ui/react-icons'
+import { CheckIcon } from '../../icons/check-icon'
 import cx from 'classnames'
 import { Checkbox as CheckboxPrimitive, Label as LabelPrimitive } from 'radix-ui'
 import type * as React from 'react'

package/src/components/forms/text-area.astro

@@ -0,0 +1,77 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import type { Intent, Variant } from './@types/input.js'
+import ErrorText from './error-text.astro'
+import HelpText from './help-text.astro'
+import inputStyles from './input.module.css'
+import Label from './label.astro'
+import styles from './text-area.module.css'
+
+interface Props extends HTMLAttributes<'textarea'> {
+  id: string
+  name: string
+  label: string
+  required?: boolean
+  variant?: Variant
+  intent?: Intent
+  rows?: number
+  placeHolder?: string
+  autoComplete?: string
+  error?: boolean
+  helpText?: string
+  errorText?: string
+  class?: string
+}
+
+const {
+  id,
+  name,
+  label,
+  rows = 4,
+  required = false,
+  variant = 'outlined',
+  intent = 'primary',
+  placeHolder = '',
+  autoComplete = 'off',
+  error = false,
+  helpText = '',
+  errorText = '',
+  class: className,
+  ...rest
+} = Astro.props as Props
+---
+
+<fieldset class:list={['text-area-wrapper', inputStyles['input-wrapper']]}>
+  <Label id={id} for={id} required={required} label={label} />
+  <textarea
+    id={id}
+    name={name}
+    required={required}
+    rows={rows}
+    auto-complete={autoComplete}
+    placeholder={placeHolder}
+    aria-labelledby={`label-for-${id}`}
+    aria-invalid={error}
+    aria-required={required}
+    aria-errormessage={errorText}
+    aria-describedby={error ? `error-for-${id}` : undefined}
+    class:list={[
+      'text-area',
+      variant,
+      intent,
+      inputStyles.input,
+      inputStyles[variant],
+      inputStyles[intent],
+      styles['text-area'],
+      error && inputStyles.error,
+      className
+    ]}
+    {...rest}></textarea>
+  {
+    error ? (
+      <ErrorText id={`error-for-${id}`} text={errorText ?? helpText} />
+    ) : (
+      helpText?.length > 0 && <HelpText text={helpText} />
+    )
+  }
+</fieldset>

package/src/icons/check-icon.astro

@@ -0,0 +1,37 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  width?: string
+  height?: string
+  menuItem?: boolean
+  svgClass?: string
+}
+
+import IconElement from './icon-element.astro'
+import styles from './icons.module.css'
+
+const { class: className, width, height, svgClass: svgClassName, menuItem, ...rest } = Astro.props
+---
+
+<IconElement
+  class:list={['check-icon', className]}
+  width={width}
+  height={height}
+  menuItem={menuItem}
+  {...rest}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 15 15"
+    class:list={[styles['fill-current'], svgClassName]}
+    focusable="false"
+    aria-hidden="true"
+  >
+    <path
+      d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"></path>
+  </svg>
+</IconElement>