@balikjs/mobile 0.0.2 → 0.1.0

package/src/Switch/Switch.jsx

@@ -1,51 +0,0 @@
-import { splitProps, mergeProps } from 'solid-js'
-import { Switch as ArkSwitch } from '@ark-ui/solid'
-import styles from './Switch.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').SwitchRootProps & {
- *   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
- *   class?: string
- * }} props
- */
-export function Switch(props) {
-  const [local, rest] = splitProps(
-    mergeProps({ size: 'md' }, props),
-    ['class', 'children', 'size'],
-  )
-
-  return (
-    <ArkSwitch.Root
-      {...rest}
-      class={[
-        'balik-switch',
-        styles.root,
-        sizes[local.size],
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      <ArkSwitch.Control class={styles.control}>
-        <ArkSwitch.Thumb class={styles.thumb} />
-      </ArkSwitch.Control>
-      {local.children && (
-        <ArkSwitch.Label class={styles.label}>
-          {local.children}
-        </ArkSwitch.Label>
-      )}
-      <ArkSwitch.HiddenInput />
-    </ArkSwitch.Root>
-  )
-}
-
-Switch.Original = ArkSwitch

package/src/Switch/Switch.module.css

@@ -1,156 +0,0 @@
-.root {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--_sw-gap, 10px);
-  min-height: var(--_sw-min-height, var(--b-comp-height-md));
-  cursor: pointer;
-  font-family: inherit;
-  user-select: none;
-  touch-action: manipulation;
-}
-
-.root[data-disabled] {
-  cursor: not-allowed;
-}
-
-.control {
-  position: relative;
-  width: var(--_sw-track-width, calc(2 * var(--b-comp-secondary-height-md)));
-  height: var(--_sw-track-height, var(--b-comp-secondary-height-md));
-  flex-shrink: 0;
-  border-radius: var(--_sw-track-radius, calc(var(--b-comp-secondary-height-md) / 2));
-  background-color: color-mix(in oklch, var(--base-fg) 14%, var(--base-bg));
-  transition: background-color var(--b-transition-fast);
-}
-
-.control[data-state="checked"] {
-  background-color: var(--base-edge);
-}
-
-.root[data-disabled] .control {
-  background-color: var(--color-disabled-bg);
-}
-
-.root[data-disabled] .control[data-state="checked"] {
-  background-color: var(--color-disabled-border);
-}
-
-.root[data-invalid] .control {
-  box-shadow: 0 0 0 1px var(--color-danger);
-}
-
-.thumb {
-  position: absolute;
-  top: var(--_sw-thumb-offset, 2px);
-  left: var(--_sw-thumb-offset, 2px);
-  width: var(--_sw-thumb-size, calc(var(--b-comp-secondary-height-md) - 4px));
-  height: var(--_sw-thumb-size, calc(var(--b-comp-secondary-height-md) - 4px));
-  border-radius: 50%;
-  background-color: var(--base-bg);
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-  transform: translateX(0);
-  transition: transform var(--b-transition-fast);
-}
-
-.thumb[data-state="checked"] {
-  transform: translateX(var(--_sw-thumb-travel, calc(var(--b-comp-secondary-height-md) - 4px)));
-}
-
-.root[data-disabled] .thumb {
-  background-color: var(--color-disabled-border);
-  box-shadow: none;
-}
-
-.root[data-disabled] .thumb[data-state="checked"] {
-  background-color: var(--base-bg);
-}
-
-.label {
-  font-size: var(--_sw-font-size, var(--b-comp-font-size-md));
-  line-height: var(--_sw-line-height, var(--b-comp-line-height-md));
-  color: var(--base-fg);
-}
-
-.root[data-disabled] .label {
-  color: var(--color-disabled-fg);
-}
-
-/* ─── Size Overrides ─── */
-
-.sizeXs {
-  --_sw-track-height: var(--b-comp-secondary-height-xs);
-  --_sw-track-width: calc(2 * var(--b-comp-secondary-height-xs));
-  --_sw-track-radius: calc(var(--b-comp-secondary-height-xs) / 2);
-  --_sw-thumb-size: calc(var(--b-comp-secondary-height-xs) - 4px);
-  --_sw-thumb-offset: 2px;
-  --_sw-thumb-travel: calc(var(--b-comp-secondary-height-xs) - 4px);
-  --_sw-gap: 8px;
-  --_sw-min-height: var(--b-comp-height-xs);
-  --_sw-font-size: var(--b-comp-font-size-xs);
-  --_sw-line-height: var(--b-comp-line-height-xs);
-}
-
-.sizeSm {
-  --_sw-track-height: var(--b-comp-secondary-height-sm);
-  --_sw-track-width: calc(2 * var(--b-comp-secondary-height-sm));
-  --_sw-track-radius: calc(var(--b-comp-secondary-height-sm) / 2);
-  --_sw-thumb-size: calc(var(--b-comp-secondary-height-sm) - 4px);
-  --_sw-thumb-offset: 2px;
-  --_sw-thumb-travel: calc(var(--b-comp-secondary-height-sm) - 4px);
-  --_sw-gap: 9px;
-  --_sw-min-height: var(--b-comp-height-sm);
-  --_sw-font-size: var(--b-comp-font-size-sm);
-  --_sw-line-height: var(--b-comp-line-height-sm);
-}
-
-.sizeMd {
-  --_sw-track-height: var(--b-comp-secondary-height-md);
-  --_sw-track-width: calc(2 * var(--b-comp-secondary-height-md));
-  --_sw-track-radius: calc(var(--b-comp-secondary-height-md) / 2);
-  --_sw-thumb-size: calc(var(--b-comp-secondary-height-md) - 4px);
-  --_sw-thumb-offset: 2px;
-  --_sw-thumb-travel: calc(var(--b-comp-secondary-height-md) - 4px);
-  --_sw-gap: 10px;
-  --_sw-min-height: var(--b-comp-height-md);
-  --_sw-font-size: var(--b-comp-font-size-md);
-  --_sw-line-height: var(--b-comp-line-height-md);
-}
-
-.sizeLg {
-  --_sw-track-height: var(--b-comp-secondary-height-lg);
-  --_sw-track-width: calc(2 * var(--b-comp-secondary-height-lg));
-  --_sw-track-radius: calc(var(--b-comp-secondary-height-lg) / 2);
-  --_sw-thumb-size: calc(var(--b-comp-secondary-height-lg) - 4px);
-  --_sw-thumb-offset: 2px;
-  --_sw-thumb-travel: calc(var(--b-comp-secondary-height-lg) - 4px);
-  --_sw-gap: 11px;
-  --_sw-min-height: var(--b-comp-height-lg);
-  --_sw-font-size: var(--b-comp-font-size-lg);
-  --_sw-line-height: var(--b-comp-line-height-lg);
-}
-
-.sizeXl {
-  --_sw-track-height: var(--b-comp-secondary-height-xl);
-  --_sw-track-width: calc(2 * var(--b-comp-secondary-height-xl));
-  --_sw-track-radius: calc(var(--b-comp-secondary-height-xl) / 2);
-  --_sw-thumb-size: calc(var(--b-comp-secondary-height-xl) - 4px);
-  --_sw-thumb-offset: 2px;
-  --_sw-thumb-travel: calc(var(--b-comp-secondary-height-xl) - 4px);
-  --_sw-gap: 12px;
-  --_sw-min-height: var(--b-comp-height-xl);
-  --_sw-font-size: var(--b-comp-font-size-xl);
-  --_sw-line-height: var(--b-comp-line-height-xl);
-}
-
-.size2xl {
-  --_sw-track-height: var(--b-comp-secondary-height-2xl);
-  --_sw-track-width: calc(2 * var(--b-comp-secondary-height-2xl));
-  --_sw-track-radius: calc(var(--b-comp-secondary-height-2xl) / 2);
-  --_sw-thumb-size: calc(var(--b-comp-secondary-height-2xl) - 4px);
-  --_sw-thumb-offset: 2px;
-  --_sw-thumb-travel: calc(var(--b-comp-secondary-height-2xl) - 4px);
-  --_sw-gap: 16px;
-  --_sw-min-height: var(--b-comp-height-2xl);
-  --_sw-font-size: var(--b-comp-font-size-2xl);
-  --_sw-line-height: var(--b-comp-line-height-2xl);
-}

package/src/Switch/index.js

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

package/src/Tabs/Tabs.jsx

@@ -1,75 +0,0 @@
-import { splitProps } from 'solid-js'
-import { Tabs as ArkTabs } from '@ark-ui/solid'
-import styles from './Tabs.module.css'
-
-/**
- * @param {import('@ark-ui/solid').TabsRootProps} props
- */
-function TabsRoot(props) {
-  return (
-    <ArkTabs.Root
-      class="balik-tabs"
-      {...props}
-    />
-  )
-}
-
-/**
- * @param {import('@ark-ui/solid').TabListProps & { class?: string }} props
- */
-function TabsList(props) {
-  const [local, rest] = splitProps(props, ['class'])
-  return (
-    <ArkTabs.List
-      class={['balik-tabs__list', styles.list, local.class].filter(Boolean).join(' ')}
-      {...rest}
-    />
-  )
-}
-
-/**
- * @param {import('@ark-ui/solid').TabTriggerProps & { class?: string }} props
- */
-function TabsTrigger(props) {
-  const [local, rest] = splitProps(props, ['class'])
-  return (
-    <ArkTabs.Trigger
-      class={['balik-tabs__trigger', styles.trigger, local.class].filter(Boolean).join(' ')}
-      {...rest}
-    />
-  )
-}
-
-/**
- * @param {import('@ark-ui/solid').TabContentProps & { class?: string }} props
- */
-function TabsContent(props) {
-  const [local, rest] = splitProps(props, ['class'])
-  return (
-    <ArkTabs.Content
-      class={['balik-tabs__content', styles.content, local.class].filter(Boolean).join(' ')}
-      {...rest}
-    />
-  )
-}
-
-/**
- * @param {import('@ark-ui/solid').TabIndicatorProps & { class?: string }} props
- */
-function TabsIndicator(props) {
-  const [local, rest] = splitProps(props, ['class'])
-  return (
-    <ArkTabs.Indicator
-      class={['balik-tabs__indicator', styles.indicator, local.class].filter(Boolean).join(' ')}
-      {...rest}
-    />
-  )
-}
-
-export const Tabs = Object.assign(TabsRoot, {
-  List: TabsList,
-  Trigger: TabsTrigger,
-  Content: TabsContent,
-  Indicator: TabsIndicator,
-  Original: ArkTabs,
-})

package/src/Tabs/Tabs.module.css

@@ -1,45 +0,0 @@
-.list {
-  position: relative;
-  display: flex;
-  border-bottom: 1px solid color-mix(in oklch, var(--base-fg) 12%, var(--base-bg));
-}
-
-.trigger {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 40px;
-  padding: 0 var(--b-container-padding-md);
-  border: none;
-  border-bottom: 1px solid transparent;
-  background: transparent;
-  color: color-mix(in oklch, var(--base-fg) 55%, transparent);
-  font-size: var(--b-comp-font-size-md);
-  font-family: inherit;
-  cursor: pointer;
-  white-space: nowrap;
-  transition: none;
-}
-
-.trigger[data-selected] {
-  color: var(--base-edge);
-  border-bottom-color: var(--base-edge);
-}
-
-.trigger[data-disabled] {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.indicator {
-  position: absolute;
-  bottom: 0;
-  height: 1px;
-  background-color: var(--base-edge);
-  transition: transform var(--b-transition-normal), width var(--b-transition-normal);
-}
-
-.content {
-  padding-top: var(--b-container-padding-sm);
-}

package/src/Tabs/index.js

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

package/src/Tag/Tag.jsx

@@ -1,74 +0,0 @@
-import { splitProps, mergeProps } from 'solid-js'
-import { CloseButton } from '../CloseButton/CloseButton.jsx'
-import styles from './Tag.module.css'
-
-const variants = {
-  solid: styles.solid,
-  outline: styles.outline,
-}
-
-const intents = {
-  default: styles.intentDefault,
-  success: styles.intentSuccess,
-  warning: styles.intentWarning,
-  danger: styles.intentDanger,
-  info: styles.intentInfo,
-}
-
-const sizes = {
-  xs: styles.sizeXs,
-  sm: styles.sizeSm,
-  md: styles.sizeMd,
-  lg: styles.sizeLg,
-  xl: styles.sizeXl,
-  '2xl': styles.size2xl,
-}
-
-const DEFAULT_PROPS = {
-  variant: 'solid',
-  intent: 'default',
-  size: 'sm',
-  closable: false,
-}
-
-/**
- * @param {import('solid-js').JSX.HTMLAttributes<HTMLSpanElement> & {
- *   variant?: 'solid' | 'outline'
- *   intent?: 'default' | 'success' | 'warning' | 'danger' | 'info'
- *   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
- *   closable?: boolean
- *   onClose?: () => void
- *   class?: string
- *   children?: import('solid-js').JSX.Element
- * }} props
- */
-export function Tag(props) {
-  const [local, rest] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['variant', 'intent', 'size', 'closable', 'onClose', 'class', 'children'],
-  )
-
-  return (
-    <span
-      {...rest}
-      class={[
-        'balik-tag',
-        `balik-tag--${local.variant}`,
-        `balik-tag--${local.intent}`,
-        `balik-tag--${local.size}`,
-        styles.base,
-        variants[local.variant],
-        intents[local.intent],
-        sizes[local.size],
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    >
-      {local.children}
-      {local.closable && (
-        <CloseButton size="xs" rounded class={styles.close} onClick={(e) => { e.stopPropagation(); local.onClose?.() }} />
-      )}
-    </span>
-  )
-}

package/src/Tag/Tag.module.css

@@ -1,128 +0,0 @@
-.base {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  white-space: nowrap;
-  user-select: none;
-  border-radius: var(--b-radius-round);
-  font-family: inherit;
-  line-height: 1;
-  transition: background-color var(--b-transition-fast),
-    color var(--b-transition-fast),
-    border-color var(--b-transition-fast);
-
-  --_current-bg: var(--base-edge);
-  --_current-fg: var(--base-edge);
-  --_current-border: var(--base-edge);
-}
-
-.solid {
-  background-color: var(--_current-bg);
-  color: var(--base-bg);
-  border: 1px solid transparent;
-}
-
-.outline {
-  background-color: transparent;
-  color: var(--_current-fg);
-  border: 1px solid var(--_current-border);
-}
-
-.intentDefault {
-  --_current-bg: color-mix(in oklch, var(--base-fg) 10%, var(--base-bg));
-  --_current-fg: var(--base-fg);
-  --_current-border: var(--base-edge);
-}
-
-.intentSuccess {
-  --_current-bg: var(--color-success);
-  --_current-fg: var(--color-success);
-  --_current-border: var(--color-success);
-}
-
-.intentWarning {
-  --_current-bg: var(--color-warning);
-  --_current-fg: var(--color-warning);
-  --_current-border: var(--color-warning);
-}
-
-.intentDanger {
-  --_current-bg: var(--color-danger);
-  --_current-fg: var(--color-danger);
-  --_current-border: var(--color-danger);
-}
-
-.intentInfo {
-  --_current-bg: var(--color-info);
-  --_current-fg: var(--color-info);
-  --_current-border: var(--color-info);
-}
-
-.close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  margin: 0;
-  margin-right: -2px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  border-radius: var(--b-radius-round);
-  opacity: 0.6;
-  transition: opacity var(--b-transition-fast);
-}
-
-.close:hover {
-  opacity: 1;
-}
-
-.solid .close {
-  color: inherit;
-}
-
-.outline .close {
-  color: currentColor;
-}
-
-.sizeXs {
-  height: var(--b-comp-secondary-height-xs);
-  min-width: calc(2 * var(--b-comp-secondary-height-xs));
-  padding: 0 6px;
-  font-size: 10px;
-}
-
-.sizeSm {
-  height: var(--b-comp-secondary-height-sm);
-  min-width: calc(2 * var(--b-comp-secondary-height-sm));
-  padding: 0 8px;
-  font-size: 11px;
-}
-
-.sizeMd {
-  height: var(--b-comp-secondary-height-md);
-  min-width: calc(2 * var(--b-comp-secondary-height-md));
-  padding: 0 10px;
-  font-size: 12px;
-}
-
-.sizeLg {
-  height: var(--b-comp-secondary-height-lg);
-  min-width: calc(2 * var(--b-comp-secondary-height-lg));
-  padding: 0 12px;
-  font-size: 13px;
-}
-
-.sizeXl {
-  height: var(--b-comp-secondary-height-xl);
-  min-width: calc(2 * var(--b-comp-secondary-height-xl));
-  padding: 0 14px;
-  font-size: 14px;
-}
-
-.size2xl {
-  height: var(--b-comp-secondary-height-2xl);
-  min-width: calc(2 * var(--b-comp-secondary-height-2xl));
-  padding: 0 18px;
-  font-size: 16px;
-}

package/src/Tag/index.js

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

package/src/Textarea/Textarea.jsx

@@ -1,52 +0,0 @@
-import { splitProps, mergeProps } from 'solid-js'
-import { ark } from '@ark-ui/solid/factory'
-import styles from './Textarea.module.css'
-
-const variants = {
-  solid: styles.solid,
-  outline: styles.outline,
-}
-
-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,
-}
-
-/**
- * @param {import('solid-js').JSX.TextareaHTMLAttributes<HTMLTextAreaElement> & {
- *   variant?: 'solid' | 'outline'
- *   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
- * }} props
- */
-export function Textarea(props) {
-  const [local, rest] = splitProps(
-    mergeProps(DEFAULT_PROPS, props),
-    ['variant', 'size', 'class'],
-  )
-
-  return (
-    <ark.textarea
-      {...rest}
-      class={[
-        'balik-textarea',
-        `balik-textarea--${local.variant}`,
-        `balik-textarea--${local.size}`,
-        styles.base,
-        variants[local.variant],
-        sizes[local.size],
-        local.class,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-    />
-  )
-}

package/src/Textarea/Textarea.module.css

@@ -1,89 +0,0 @@
-.base {
-  display: block;
-  width: 100%;
-  min-height: var(--_min-height);
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--_border-color, 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);
-  resize: vertical;
-
-  --_current-intent: var(--base-edge);
-}
-
-.base::placeholder {
-  color: var(--color-disabled-fg);
-}
-
-.base:disabled {
-  background-color: var(--color-disabled-bg);
-  border-color: var(--color-disabled-border);
-  color: var(--color-disabled-fg);
-}
-
-.solid {
-  --_border-color: transparent;
-  background-color: color-mix(in oklch, var(--base-fg) 2%, var(--base-bg));
-}
-
-.solid:focus {
-  background-color: var(--color-focus-bg);
-}
-
-.outline {
-  --_border-color: var(--_current-intent);
-  background-color: var(--base-bg);
-}
-
-.outline:focus {
-  background-color: var(--color-focus-bg);
-  border-color: var(--color-focus-border);
-}
-
-.sizeXs {
-  --_min-height: 72px;
-  padding: var(--b-comp-padding-y-xs) var(--b-comp-padding-x-xs);
-  font-size: var(--b-comp-font-size-xs);
-  line-height: var(--b-comp-line-height-xs);
-  --_border-radius: var(--b-radius-l1-xs);
-}
-
-.sizeSm {
-  --_min-height: 80px;
-  padding: var(--b-comp-padding-y-sm) var(--b-comp-padding-x-sm);
-  font-size: var(--b-comp-font-size-sm);
-  line-height: var(--b-comp-line-height-sm);
-  --_border-radius: var(--b-radius-l1-sm);
-}
-
-.sizeMd {
-  --_min-height: 88px;
-  padding: var(--b-comp-padding-y-md) var(--b-comp-padding-x-md);
-  font-size: var(--b-comp-font-size-md);
-  line-height: var(--b-comp-line-height-md);
-  --_border-radius: var(--b-radius-l1-md);
-}
-
-.sizeLg {
-  --_min-height: 96px;
-  padding: var(--b-comp-padding-y-lg) var(--b-comp-padding-x-lg);
-  font-size: var(--b-comp-font-size-lg);
-  line-height: var(--b-comp-line-height-lg);
-  --_border-radius: var(--b-radius-l1-lg);
-}
-
-.sizeXl {
-  --_min-height: 112px;
-  padding: var(--b-comp-padding-y-xl) var(--b-comp-padding-x-xl);
-  font-size: var(--b-comp-font-size-xl);
-  line-height: var(--b-comp-line-height-xl);
-  --_border-radius: var(--b-radius-l1-xl);
-}

package/src/Textarea/index.js

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