@startupjs-ui/card 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/card
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Features
+
+* add mdx and docs packages. Refactor docs to get rid of any @startupjs/ui usage and use startupjs-ui instead ([703c926](https://github.com/startupjs/startupjs-ui/commit/703c92636efb0421ffd11783f692fc892b74018f))
+* **card:** refactor Card component ([91b6de8](https://github.com/startupjs/startupjs-ui/commit/91b6de8d04ea072a306d3d4ef482aad0a3969a14))

package/README.mdx

@@ -0,0 +1,143 @@
+import { useState } from 'react'
+import { Image } from 'react-native'
+import { u } from 'startupjs'
+import { Sandbox } from '@startupjs-ui/docs'
+import Span from '@startupjs-ui/span'
+import Collapse from '@startupjs-ui/collapse'
+import Button from '@startupjs-ui/button'
+import Card, { _PropsJsonSchema as CardPropsJsonSchema } from './index'
+import Br from '@startupjs-ui/br'
+import Div from '@startupjs-ui/div'
+import { faShareAlt } from '@fortawesome/free-solid-svg-icons'
+
+# Card
+Inherits [Div props](/docs/components/Div).
+
+Cards contain content and actions about a single subject.
+
+```jsx
+import { Card } from 'startupjs-ui'
+```
+
+## Simple example
+
+Although cards can support multiple actions, UI controls, and an overflow menu, use restraint and remember that cards are entry points to more complex and detailed information.
+
+```jsx example
+return (
+  <Card>
+    <Span h4>Card header</Span>
+    <Br />
+    <Span>Card body</Span>
+  </Card>
+)
+```
+
+## Outlined cards
+
+Outlined cards offer an alternative style by passing `outlined` string on `variant` property to component.
+
+```jsx example
+return (
+  <Card variant='outlined'>
+    <Span h4>Card header</Span>
+    <Br />
+    <Span>Card body</Span>
+  </Card>
+)
+```
+
+## Levels of emphasis
+
+Card `level` prop determines different levels of emphasis, depending on its level of hierarchy. It only make sense when the `variant` is `elevated` (default).
+
+```jsx example
+return (
+  <Div>
+    <Card>
+      <Span h4>Card Level - 1</Span>
+      <Br />
+      <Span>Card body</Span>
+    </Card>
+    <Br />
+    <Card level={2}>
+      <Span h4>Card Level - 2</Span>
+      <Br />
+      <Span>Card body</Span>
+    </Card>
+    <Br />
+    <Card level={3}>
+      <Span h4>Card Level - 3</Span>
+      <Br />
+      <Span>Card body</Span>
+    </Card>
+    <Br />
+    <Card level={4}>
+      <Span h4>Card Level - 4</Span>
+      <Br />
+      <Span>Card body</Span>
+    </Card>
+  </Div>
+)
+```
+
+## Complex interaction (intergration with other components)
+
+```jsx example
+const style = { maxWidth: u(50) }
+const imageStyle = { height: u(40), resizeMode: 'cover' }
+const [collapsed, setCollapsed] = useState(false)
+return (
+  <Card
+    style={style}
+  >
+    <Image
+      source={{ uri: '/img/cat.webp' }}
+      style={imageStyle}
+    />
+    <Br />
+    <Span h4>Cat</Span>
+    <Br />
+    <Span>
+      The cat (Felis catus) is a domestic species of small carnivorous mammal.
+    </Span>
+    <Br />
+    <Div row align='between'>
+      <Button
+        onPress={() => setCollapsed(!collapsed)}
+        variant='flat'
+      >
+        Learn more
+      </Button>
+      <Button
+        pushed
+        icon={faShareAlt}
+        onPress={() => null}
+      >
+        Share
+      </Button>
+    </Div>
+    <Br />
+    <Collapse open={collapsed} variant='pure' icon={false}>
+      <Collapse.Content>
+        It is the only domesticated species in the family Felidae and is often referred to as the domestic cat to distinguish it from the wild members of the family. A cat can either be a house cat, a farm cat or a feral cat; the latter ranges freely and avoids human contact. Domestic cats are valued by humans for companionship and their ability to hunt pests such as rodents. About 60 cat breeds are recognized by various cat registries. (source: wiki)
+      </Collapse.Content>
+    </Collapse>
+  </Card>
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={Card}
+  propsJsonSchema={CardPropsJsonSchema}
+  props={{
+    children: [
+      <Span h4 key='header'>Card header</Span>,
+      <Br key='br'/>,
+      <Span key='body'>Card body</Span>
+    ],
+    onPress: () => alert('"onPress" event on "Card" component'),
+  }}
+/>

package/index.cssx.styl

@@ -0,0 +1,10 @@
+.root
+  padding 2u
+  radius()
+
+  &.elevated
+    background-color: var(--color-bg-main-strong)
+
+  &.outlined
+    border-width 1px
+    border-color var(--color-border-main)

package/index.d.ts

@@ -0,0 +1,19 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type ReactNode } from 'react';
+import { type DivProps } from '@startupjs-ui/div';
+import './index.cssx.styl';
+declare const _default: import("react").ComponentType<CardProps>;
+export default _default;
+export declare const _PropsJsonSchema: {};
+export interface CardProps extends Omit<DivProps, 'variant' | 'level' | 'children' | 'style'> {
+    /** Custom styles applied to the root view */
+    style?: DivProps['style'];
+    /** Content rendered inside Card */
+    children?: ReactNode;
+    /** Shadow intensity level @default 1 */
+    level?: 0 | 1 | 2 | 3 | 4 | 5;
+    /** Visual appearance variant @default 'elevated' */
+    variant?: 'elevated' | 'outlined';
+}

package/index.tsx

@@ -0,0 +1,40 @@
+import { type ReactNode } from 'react'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div, { type DivProps } from '@startupjs-ui/div'
+import './index.cssx.styl'
+
+export default observer(themed('Card', Card))
+
+export const _PropsJsonSchema = {/* CardProps */}
+
+export interface CardProps extends Omit<DivProps, 'variant' | 'level' | 'children' | 'style'> {
+  /** Custom styles applied to the root view */
+  style?: DivProps['style']
+  /** Content rendered inside Card */
+  children?: ReactNode
+  /** Shadow intensity level @default 1 */
+  level?: 0 | 1 | 2 | 3 | 4 | 5
+  /** Visual appearance variant @default 'elevated' */
+  variant?: 'elevated' | 'outlined'
+}
+
+function Card ({
+  style,
+  level = 1,
+  children,
+  variant = 'elevated',
+  onPress,
+  ...props
+}: CardProps): ReactNode {
+  return pug`
+    Div.root(
+      style=style
+      styleName=[variant]
+      onPress=onPress
+      level=variant === 'elevated' ? level : undefined
+      ...props
+    )
+      = children
+  `
+}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@startupjs-ui/card",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@startupjs-ui/core": "^0.1.3",
+    "@startupjs-ui/div": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}