@balikjs/mobile 0.0.1 → 0.1.0

package/src/RadioGroup/Radio.jsx

@@ -1,52 +0,0 @@
-import { splitProps, mergeProps } from 'solid-js'
-import { RadioGroup as ArkRadioGroup } from '@ark-ui/solid'
-import styles from './Radio.module.css'
-
-const sizes = {
-  xs: styles.sizeXs,
-  sm: styles.sizeSm,
-  md: styles.sizeMd,
-  lg: styles.sizeLg,
-  xl: styles.sizeXl,
-  '2xl': styles.size2xl,
-}
-
-/**
- * @param {import('@ark-ui/solid').RadioGroupItemProps & {
- *   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
- *   class?: string
- * }} props
- */
-export function Radio(props) {
-  const [local, rest] = splitProps(
-    mergeProps({ size: 'md' }, props),
-    ['class', 'children', 'size'],
-  )
-
-  return (
-    <ArkRadioGroup.Item
-      {...rest}
-      class={[
-        'balik-radio',
-        styles.item,
-        sizes[local.size],
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      <ArkRadioGroup.ItemControl class={styles.control} />
-      <ArkRadioGroup.ItemText class={styles.text}>
-        {local.children}
-      </ArkRadioGroup.ItemText>
-      <ArkRadioGroup.ItemHiddenInput />
-    </ArkRadioGroup.Item>
-  )
-}
-
-Radio.Original = {
-  Item: ArkRadioGroup.Item,
-  ItemControl: ArkRadioGroup.ItemControl,
-  ItemText: ArkRadioGroup.ItemText,
-  ItemHiddenInput: ArkRadioGroup.ItemHiddenInput,
-}

package/src/RadioGroup/Radio.module.css

@@ -1,133 +0,0 @@
-.item {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--_ctrl-gap, 10px);
-  min-height: var(--_ctrl-min-height, var(--b-comp-height-md));
-  cursor: pointer;
-  font-family: inherit;
-  user-select: none;
-  touch-action: manipulation;
-}
-
-.item[data-disabled] {
-  cursor: not-allowed;
-}
-
-.control {
-  width: var(--_ctrl-size, var(--b-comp-secondary-height-md));
-  height: var(--_ctrl-size, var(--b-comp-secondary-height-md));
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  border-radius: 50%;
-  border: 1px solid var(--base-edge);
-  background-color: var(--base-bg);
-  transition: border-color var(--b-transition-fast);
-}
-
-.control::after {
-  content: '';
-  display: block;
-  width: var(--_ctrl-dot-size, calc(var(--b-comp-secondary-height-md) / 2));
-  height: var(--_ctrl-dot-size, calc(var(--b-comp-secondary-height-md) / 2));
-  border-radius: 50%;
-  background-color: var(--base-edge);
-  transform: scale(0);
-  transition: transform var(--b-transition-fast);
-}
-
-.control[data-state="checked"] {
-  border-color: var(--base-edge);
-}
-
-.control[data-state="checked"]::after {
-  transform: scale(1);
-}
-
-.item[data-disabled] .control {
-  border-color: var(--color-disabled-border);
-  background-color: var(--color-disabled-bg);
-}
-
-.item[data-disabled] .control[data-state="checked"]::after {
-  background-color: var(--color-disabled-fg);
-}
-
-.item[data-invalid] .control {
-  border-color: var(--color-danger);
-}
-
-.item[data-invalid] .control[data-state="checked"]::after {
-  background-color: var(--color-danger);
-}
-
-.control:active:not([data-disabled]) {
-  transform: scale(0.88);
-}
-
-.text {
-  font-size: var(--_ctrl-font-size, var(--b-comp-font-size-md));
-  line-height: var(--_ctrl-line-height, var(--b-comp-line-height-md));
-  color: var(--base-fg);
-}
-
-.item[data-disabled] .text {
-  color: var(--color-disabled-fg);
-}
-
-/* ─── Size Overrides ─── */
-
-.sizeXs {
-  --_ctrl-size: var(--b-comp-secondary-height-xs);
-  --_ctrl-dot-size: calc(var(--b-comp-secondary-height-xs) / 2);
-  --_ctrl-gap: 8px;
-  --_ctrl-min-height: var(--b-comp-height-xs);
-  --_ctrl-font-size: var(--b-comp-font-size-xs);
-  --_ctrl-line-height: var(--b-comp-line-height-xs);
-}
-
-.sizeSm {
-  --_ctrl-size: var(--b-comp-secondary-height-sm);
-  --_ctrl-dot-size: calc(var(--b-comp-secondary-height-sm) / 2);
-  --_ctrl-gap: 9px;
-  --_ctrl-min-height: var(--b-comp-height-sm);
-  --_ctrl-font-size: var(--b-comp-font-size-sm);
-  --_ctrl-line-height: var(--b-comp-line-height-sm);
-}
-
-.sizeMd {
-  --_ctrl-size: var(--b-comp-secondary-height-md);
-  --_ctrl-dot-size: calc(var(--b-comp-secondary-height-md) / 2);
-  --_ctrl-gap: 10px;
-  --_ctrl-min-height: var(--b-comp-height-md);
-  --_ctrl-font-size: var(--b-comp-font-size-md);
-  --_ctrl-line-height: var(--b-comp-line-height-md);
-}
-
-.sizeLg {
-  --_ctrl-size: var(--b-comp-secondary-height-lg);
-  --_ctrl-dot-size: calc(var(--b-comp-secondary-height-lg) / 2);
-  --_ctrl-gap: 11px;
-  --_ctrl-min-height: var(--b-comp-height-lg);
-  --_ctrl-font-size: var(--b-comp-font-size-lg);
-  --_ctrl-line-height: var(--b-comp-line-height-lg);
-}
-
-.sizeXl {
-  --_ctrl-size: var(--b-comp-secondary-height-xl);
-  --_ctrl-dot-size: calc(var(--b-comp-secondary-height-xl) / 2);
-  --_ctrl-gap: 12px;
-  --_ctrl-min-height: var(--b-comp-height-xl);
-  --_ctrl-font-size: var(--b-comp-font-size-xl);
-  --_ctrl-line-height: var(--b-comp-line-height-xl);
-}
-
-.size2xl {
-  --_ctrl-size: var(--b-comp-secondary-height-2xl);
-  --_ctrl-dot-size: calc(var(--b-comp-secondary-height-2xl) / 2);
-  --_ctrl-gap: 16px;
-  --_ctrl-min-height: var(--b-comp-height-2xl);
-  --_ctrl-font-size: var(--b-comp-font-size-2xl);
-  --_ctrl-line-height: var(--b-comp-line-height-2xl);
-}

package/src/RadioGroup/RadioGroup.jsx

@@ -1,36 +0,0 @@
-import { splitProps, mergeProps } from 'solid-js'
-import { RadioGroup as ArkRadioGroup } from '@ark-ui/solid'
-import styles from './RadioGroup.module.css'
-
-/**
- * @param {import('@ark-ui/solid').RadioGroupRootProps & {
- *   label?: string
- *   class?: string
- * }} props
- */
-export function RadioGroup(props) {
-  const [local, rest] = splitProps(
-    mergeProps({}, props),
-    ['label', 'class', 'children'],
-  )
-
-  return (
-    <ArkRadioGroup.Root
-      {...rest}
-      class={[
-        'balik-radio-group',
-        styles.root,
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      {local.label && (
-        <ArkRadioGroup.Label class={styles.label}>
-          {local.label}
-        </ArkRadioGroup.Label>
-      )}
-      {local.children}
-    </ArkRadioGroup.Root>
-  )
-}

package/src/RadioGroup/RadioGroup.module.css

@@ -1,23 +0,0 @@
-.root {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-
-.root[data-orientation="horizontal"] {
-  flex-direction: row;
-  gap: 20px;
-}
-
-.label {
-  font-size: var(--b-comp-font-size-sm);
-  font-weight: 600;
-  color: var(--base-fg);
-  margin-bottom: 8px;
-}
-
-.root[data-orientation="horizontal"] .label {
-  margin-bottom: 0;
-  align-self: center;
-  margin-inline-end: 4px;
-}

package/src/RadioGroup/index.js

@@ -1,2 +0,0 @@
-export { RadioGroup } from './RadioGroup.jsx'
-export { Radio } from './Radio.jsx'

package/src/SearchInput/SearchInput.jsx

@@ -1,89 +0,0 @@
-import { splitProps, mergeProps, createSignal, onCleanup, on } from 'solid-js'
-import { ark } from '@ark-ui/solid/factory'
-import { Search } from 'lucide-solid'
-import styles from './SearchInput.module.css'
-
-const variants = {
-  solid: styles.solid,
-  outline: styles.outline,
-  singleline: styles.singleline,
-}
-
-const sizes = {
-  xs: styles.sizeXs,
-  sm: styles.sizeSm,
-  md: styles.sizeMd,
-  lg: styles.sizeLg,
-  xl: styles.sizeXl,
-}
-
-const DEFAULT_PROPS = {
-  variant: 'outline',
-  size: 'md',
-  disabled: false,
-  debounce: 300,
-}
-
-/**
- * @param {import('solid-js').JSX.InputHTMLAttributes<HTMLInputElement> & {
- *   variant?: 'solid' | 'outline' | 'singleline'
- *   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
- *   onKeywordChange?: (keyword: string) => void
- *   debounce?: number
- *   class?: string
- * }} props
- */
-export function SearchInput(props) {
-  const [local, rest] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['variant', 'size', 'class', 'onKeywordChange', 'debounce', 'placeholder'],
-  )
-
-  const [keyword, setKeyword] = createSignal('')
-
-  on(keyword, (val) => {
-    const timer = setTimeout(() => {
-      local.onKeywordChange?.(val)
-    }, local.debounce)
-    onCleanup(() => clearTimeout(timer))
-  })
-
-  const handleInput = (e) => {
-    setKeyword(e.target.value)
-  }
-
-  return (
-    <div
-      class={[
-        'balik-search-input',
-        `balik-search-input--${local.variant}`,
-        `balik-search-input--${local.size}`,
-        styles.base,
-        variants[local.variant],
-        sizes[local.size],
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      <Search
-        aria-hidden="true"
-        class={[
-          'balik-search-input__icon',
-          styles.icon,
-        ].join(' ')}
-      />
-      <ark.input
-        {...rest}
-        type="search"
-        autocomplete="off"
-        placeholder={local.placeholder}
-        onInput={handleInput}
-        class={[
-          'balik-search-input__input',
-          styles.input,
-        ].join(' ')}
-      />
-    </div>
-  )
-}

package/src/SearchInput/SearchInput.module.css

@@ -1,169 +0,0 @@
-.base {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
-
-.icon {
-  position: absolute;
-  left: var(--_icon-offset);
-  height: var(--_icon-size);
-  width: var(--_icon-size);
-  color: var(--color-disabled-fg);
-  pointer-events: none;
-  flex-shrink: 0;
-}
-
-.input {
-  display: block;
-  width: 100%;
-  padding-left: var(--_input-padding-left);
-  border: 1px solid transparent;
-  border-radius: var(--_border-radius);
-  font-family: inherit;
-  outline: none;
-  box-shadow: none;
-  appearance: none;
-  touch-action: manipulation;
-  transition: background-color var(--b-transition-fast),
-    border-color var(--b-transition-fast),
-    color var(--b-transition-fast);
-
-  --_current-intent: var(--base-edge);
-}
-
-.input::placeholder {
-  color: var(--color-disabled-fg);
-}
-
-.input:disabled {
-  background-color: var(--color-disabled-bg);
-  border-color: var(--color-disabled-border);
-  color: var(--color-disabled-fg);
-}
-
-.input::-webkit-search-decoration,
-.input::-webkit-search-cancel-button,
-.input::-webkit-search-results-button,
-.input::-webkit-search-results-decoration {
-  display: none;
-}
-
-.solid {
-  --_contain-bg: color-mix(in oklch, var(--base-fg) 2%, var(--base-bg));
-}
-
-.solid .input {
-  background-color: var(--_contain-bg);
-  border-color: transparent;
-}
-
-.solid .input:focus {
-  background-color: var(--color-focus-bg);
-}
-
-.outline {
-  --_contain-bg: var(--base-bg);
-}
-
-.outline .input {
-  background-color: var(--_contain-bg);
-  border-color: var(--_current-intent);
-}
-
-.outline .input:focus {
-  background-color: var(--color-focus-bg);
-  border-color: var(--color-focus-border);
-}
-
-.singleline {
-  --_contain-bg: transparent;
-}
-
-.singleline .input {
-  background-color: transparent;
-  border-color: transparent;
-  border-bottom-color: var(--_current-intent);
-  border-radius: 0;
-}
-
-.singleline .input:focus {
-  background-color: var(--color-focus-bg);
-  border-bottom-color: var(--color-focus-border);
-}
-
-.sizeXs {
-  --_border-radius: var(--b-radius-l1-xs);
-  --_icon-size: 14px;
-  --_icon-offset: 8px;
-  --_input-padding-left: 26px;
-}
-
-.sizeXs .input {
-  height: var(--b-comp-height-xs);
-  line-height: var(--b-comp-line-height-xs);
-  padding: var(--b-comp-padding-y-xs) var(--b-comp-padding-x-xs);
-  padding-left: 26px;
-  font-size: var(--b-comp-font-size-xs);
-}
-
-.sizeSm {
-  --_border-radius: var(--b-radius-l1-sm);
-  --_icon-size: 16px;
-  --_icon-offset: 12px;
-  --_input-padding-left: 32px;
-}
-
-.sizeSm .input {
-  height: var(--b-comp-height-sm);
-  line-height: var(--b-comp-line-height-sm);
-  padding: var(--b-comp-padding-y-sm) var(--b-comp-padding-x-sm);
-  padding-left: 32px;
-  font-size: var(--b-comp-font-size-sm);
-}
-
-.sizeMd {
-  --_border-radius: var(--b-radius-l1-md);
-  --_icon-size: 18px;
-  --_icon-offset: 14px;
-  --_input-padding-left: 38px;
-}
-
-.sizeMd .input {
-  height: var(--b-comp-height-md);
-  line-height: var(--b-comp-line-height-md);
-  padding: var(--b-comp-padding-y-md) var(--b-comp-padding-x-md);
-  padding-left: 38px;
-  font-size: var(--b-comp-font-size-md);
-}
-
-.sizeLg {
-  --_border-radius: var(--b-radius-l1-lg);
-  --_icon-size: 20px;
-  --_icon-offset: 16px;
-  --_input-padding-left: 42px;
-}
-
-.sizeLg .input {
-  height: var(--b-comp-height-lg);
-  line-height: var(--b-comp-line-height-lg);
-  padding: var(--b-comp-padding-y-lg) var(--b-comp-padding-x-lg);
-  padding-left: 42px;
-  font-size: var(--b-comp-font-size-lg);
-}
-
-.sizeXl {
-  --_border-radius: var(--b-radius-l1-xl);
-  --_icon-size: 22px;
-  --_icon-offset: 16px;
-  --_input-padding-left: 46px;
-}
-
-.sizeXl .input {
-  height: var(--b-comp-height-xl);
-  line-height: var(--b-comp-line-height-xl);
-  padding: var(--b-comp-padding-y-xl) var(--b-comp-padding-x-xl);
-  padding-left: 46px;
-  font-size: var(--b-comp-font-size-xl);
-}

package/src/SearchInput/index.js

@@ -1 +0,0 @@
-export { SearchInput } from './SearchInput.jsx'

package/src/Select/Select.jsx

@@ -1,101 +0,0 @@
-import { splitProps, mergeProps, For } from 'solid-js'
-import { Select as ArkSelect, useSelectContext } from '@ark-ui/solid'
-import { ChevronDown } from 'lucide-solid'
-import styles from './Select.module.css'
-
-const triggerSizes = {
-  xs: styles.triggerSizeXs,
-  sm: styles.triggerSizeSm,
-  md: styles.triggerSizeMd,
-  lg: styles.triggerSizeLg,
-  xl: styles.triggerSizeXl,
-}
-
-function SelectSheet(props) {
-  const api = useSelectContext()
-  const isOpen = () => api().open
-
-  return (
-    <>
-      <div
-        class={styles.backdrop}
-        data-open={isOpen() ? '' : undefined}
-        onClick={() => api().setOpen(false)}
-      />
-      <div class={styles.sheet} data-open={isOpen() ? '' : undefined}>
-        <div class={styles.header}>
-          <span class={styles.title}>{props.title}</span>
-          <button
-            type="button"
-            class={styles.cancelBtn}
-            onClick={() => api().setOpen(false)}
-          >
-            Cancel
-          </button>
-        </div>
-        <div class={styles.list}>
-          <For each={api().collection.items}>
-            {(item) => (
-              <ArkSelect.Item item={item} class={styles.item}>
-                <ArkSelect.ItemText>{item.label}</ArkSelect.ItemText>
-              </ArkSelect.Item>
-            )}
-          </For>
-        </div>
-      </div>
-    </>
-  )
-}
-
-const DEFAULT_PROPS = {
-  size: 'md',
-  disabled: false,
-}
-
-/**
- * @param {import('solid-js').JSX.HTMLAttributes<HTMLDivElement> & {
- *   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
- *   collection?: import('@ark-ui/solid').ListCollection<{ label: string, value: string, disabled?: boolean }>
- *   placeholder?: string
- *   title?: string
- * }} props
- */
-export function Select(props) {
-  const [local, rest] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['size', 'class', 'collection', 'placeholder', 'title', 'disabled'],
-  )
-
-  return (
-    <div class={styles.root}>
-    <ArkSelect.Root
-      collection={local.collection}
-      disabled={local.disabled}
-      {...rest}
-    >
-      <ArkSelect.Trigger
-        class={[
-          'balik-select',
-          `balik-select--${local.size}`,
-          styles.triggerBase,
-          triggerSizes[local.size],
-          local.class,
-        ]
-          .filter(Boolean)
-          .join(' ')}
-      >
-        <ArkSelect.ValueText
-          placeholder={local.placeholder}
-        />
-        <span class={styles.indicator}>
-          <ChevronDown size="1em" aria-hidden="true" />
-        </span>
-      </ArkSelect.Trigger>
-      <SelectSheet title={local.title} />
-      <ArkSelect.HiddenSelect />
-    </ArkSelect.Root>
-    </div>
-  )
-}
-
-Select.Original = ArkSelect