@demlanide/react-lucky-components 0.1.0

package/dist/ToggleSection/styles.js

@@ -0,0 +1,49 @@
+import { Animated, Pressable } from 'react-native';
+import styled from 'styled-components/native';
+const TEXT_PRIMARY = '#2C2C2C';
+const TEXT_SECONDARY = '#738295';
+/* ── Outer card ────────────────────────────────────────────────────── */
+export const Card = styled.View `
+  background-color: #ffffff;
+  border-radius: 24px;
+  overflow: hidden;
+`;
+/* ── Header row ────────────────────────────────────────────────────── */
+export const Header = styled(Pressable) `
+  flex-direction: row;
+  align-items: center;
+  padding: 16px;
+  gap: 8px;
+  opacity: ${({ $disabled }) => ($disabled ? 0.5 : 1)};
+`;
+export const HeaderLeading = styled.View `
+  flex: 1;
+  justify-content: center;
+  padding-bottom: 2px;
+`;
+export const TitleText = styled.Text `
+  font-size: 17px;
+  font-weight: 400;
+  line-height: 22px;
+  letter-spacing: -0.43px;
+  color: ${TEXT_PRIMARY};
+`;
+export const SubtitleText = styled.Text `
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: -0.08px;
+  color: ${TEXT_SECONDARY};
+`;
+/* ── Collapsible content ───────────────────────────────────────────── */
+export const ContentClip = styled(Animated.View) `
+  overflow: hidden;
+`;
+export const ContentPadding = styled.View `
+  padding: 0px 16px 16px;
+`;
+export const ContentBackground = styled.View `
+  background-color: #eff4f7;
+  border-radius: 12px;
+  overflow: hidden;
+`;

package/dist/ToggleSection/types.d.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface ToggleSectionProps {
+    /** Primary label displayed in the header row */
+    title: string;
+    /** Secondary label below the title */
+    subtitle?: string;
+    /** Whether the switch is on (controlled) */
+    value: boolean;
+    /** Called with the new boolean when the switch is toggled */
+    onValueChange: (value: boolean) => void;
+    /**
+     * Controls when the content area is revealed.
+     *
+     * - `'on'`  — content visible when switch is ON (default)
+     * - `'off'` — content visible when switch is OFF
+     *
+     * @default 'on'
+     */
+    visibleWhen?: 'on' | 'off';
+    /** Content rendered inside the collapsible area */
+    children?: ReactNode;
+    /** Disables the switch and dims the header */
+    disabled?: boolean;
+    /** Style applied to the outer card container */
+    style?: StyleProp<ViewStyle>;
+    /** Forwarded as testID to the root View */
+    testID?: string;
+    /** Track colour when on.  @default '#B2F549' */
+    activeTrackColor?: string;
+    /** Track colour when off. @default '#738295' */
+    inactiveTrackColor?: string;
+    /** Knob colour. @default '#FFFFFF' */
+    thumbColor?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/ToggleSection/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/ToggleSection/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,WAAW,kBAAkB;IACjC,gDAAgD;IAChD,KAAK,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4CAA4C;IAC5C,KAAK,EAAE,OAAO,CAAC;IACf,6DAA6D;IAC7D,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAC3B,mDAAmD;IACnD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,2CAA2C;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gDAAgD;IAChD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,sCAAsC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

package/dist/ToggleSection/types.js

@@ -0,0 +1 @@
+export {};

package/dist/assets/fonts/.map.json

@@ -0,0 +1,51 @@
+{
+  "name": "fonts",
+  "path": "react-lucky-components/src/assets/fonts",
+  "description": "Folder containing related project files for this area.",
+  "generatedAt": "2026-03-02T00:41:04.011Z",
+  "scope": {
+    "recursive": true,
+    "excludedDirectories": [
+      "node_modules",
+      "Pods",
+      "dist",
+      "storybook-static",
+      "build",
+      "coverage",
+      ".git",
+      ".next",
+      ".expo",
+      ".turbo",
+      ".gradle",
+      "DerivedData"
+    ]
+  },
+  "entries": [
+    {
+      "name": "sf-pro-display",
+      "path": "react-lucky-components/src/assets/fonts/sf-pro-display",
+      "type": "directory",
+      "lastModified": "2026-03-02T00:40:38.000Z",
+      "itemCount": 10,
+      "recursiveMapping": true,
+      "description": "Folder containing related project files for this area."
+    },
+    {
+      "name": "map.json",
+      "path": "react-lucky-components/src/assets/fonts/map.json",
+      "type": "file",
+      "extension": ".json",
+      "generated": true,
+      "description": "Directory map generated by Codex for this folder."
+    },
+    {
+      "name": "SB Sans Text.ttf",
+      "path": "react-lucky-components/src/assets/fonts/SB Sans Text.ttf",
+      "type": "file",
+      "lastModified": "2026-02-18T19:23:34.101Z",
+      "extension": ".ttf",
+      "sizeBytes": 95260,
+      "description": "Font asset used for app/web typography."
+    }
+  ]
+}

package/dist/assets/fonts/sf-pro-display/.map.json

@@ -0,0 +1,114 @@
+{
+  "name": "sf-pro-display",
+  "path": "react-lucky-components/src/assets/fonts/sf-pro-display",
+  "description": "Folder containing related project files for this area.",
+  "generatedAt": "2026-03-02T00:41:04.011Z",
+  "scope": {
+    "recursive": true,
+    "excludedDirectories": [
+      "node_modules",
+      "Pods",
+      "dist",
+      "storybook-static",
+      "build",
+      "coverage",
+      ".git",
+      ".next",
+      ".expo",
+      ".turbo",
+      ".gradle",
+      "DerivedData"
+    ]
+  },
+  "entries": [
+    {
+      "name": "map.json",
+      "path": "react-lucky-components/src/assets/fonts/sf-pro-display/map.json",
+      "type": "file",
+      "extension": ".json",
+      "generated": true,
+      "description": "Directory map generated by Codex for this folder."
+    },
+    {
+      "name": "SFPRODISPLAYBLACKITALIC.OTF",
+      "path": "react-lucky-components/src/assets/fonts/sf-pro-display/SFPRODISPLAYBLACKITALIC.OTF",
+      "type": "file",
+      "lastModified": "2026-02-19T19:54:42.362Z",
+      "extension": ".otf",
+      "sizeBytes": 146416,
+      "description": "Font asset used for app/web typography."
+    },
+    {
+      "name": "SFPRODISPLAYBOLD.OTF",
+      "path": "react-lucky-components/src/assets/fonts/sf-pro-display/SFPRODISPLAYBOLD.OTF",
+      "type": "file",
+      "lastModified": "2026-02-19T19:54:42.363Z",
+      "extension": ".otf",
+      "sizeBytes": 334728,
+      "description": "Font asset used for app/web typography."
+    },
+    {
+      "name": "SFPRODISPLAYHEAVYITALIC.OTF",
+      "path": "react-lucky-components/src/assets/fonts/sf-pro-display/SFPRODISPLAYHEAVYITALIC.OTF",
+      "type": "file",
+      "lastModified": "2026-02-19T19:54:42.364Z",
+      "extension": ".otf",
+      "sizeBytes": 159628,
+      "description": "Font asset used for app/web typography."
+    },
+    {
+      "name": "SFPRODISPLAYLIGHTITALIC.OTF",
+      "path": "react-lucky-components/src/assets/fonts/sf-pro-display/SFPRODISPLAYLIGHTITALIC.OTF",
+      "type": "file",
+      "lastModified": "2026-02-19T19:54:42.365Z",
+      "extension": ".otf",
+      "sizeBytes": 158892,
+      "description": "Font asset used for app/web typography."
+    },
+    {
+      "name": "SFPRODISPLAYMEDIUM.OTF",
+      "path": "react-lucky-components/src/assets/fonts/sf-pro-display/SFPRODISPLAYMEDIUM.OTF",
+      "type": "file",
+      "lastModified": "2026-02-19T19:54:42.366Z",
+      "extension": ".otf",
+      "sizeBytes": 335512,
+      "description": "Font asset used for app/web typography."
+    },
+    {
+      "name": "SFPRODISPLAYREGULAR.otf",
+      "path": "react-lucky-components/src/assets/fonts/sf-pro-display/SFPRODISPLAYREGULAR.otf",
+      "type": "file",
+      "lastModified": "2026-02-19T19:54:42.368Z",
+      "extension": ".otf",
+      "sizeBytes": 298944,
+      "description": "Font asset used for app/web typography."
+    },
+    {
+      "name": "SFPRODISPLAYSEMIBOLDITALIC.OTF",
+      "path": "react-lucky-components/src/assets/fonts/sf-pro-display/SFPRODISPLAYSEMIBOLDITALIC.OTF",
+      "type": "file",
+      "lastModified": "2026-02-19T19:54:42.369Z",
+      "extension": ".otf",
+      "sizeBytes": 159876,
+      "description": "Font asset used for app/web typography."
+    },
+    {
+      "name": "SFPRODISPLAYTHINITALIC.OTF",
+      "path": "react-lucky-components/src/assets/fonts/sf-pro-display/SFPRODISPLAYTHINITALIC.OTF",
+      "type": "file",
+      "lastModified": "2026-02-19T19:54:42.374Z",
+      "extension": ".otf",
+      "sizeBytes": 157916,
+      "description": "Font asset used for app/web typography."
+    },
+    {
+      "name": "SFPRODISPLAYULTRALIGHTITALIC.OTF",
+      "path": "react-lucky-components/src/assets/fonts/sf-pro-display/SFPRODISPLAYULTRALIGHTITALIC.OTF",
+      "type": "file",
+      "lastModified": "2026-02-19T19:54:42.376Z",
+      "extension": ".otf",
+      "sizeBytes": 156760,
+      "description": "Font asset used for app/web typography."
+    }
+  ]
+}

package/dist/fonts.d.ts

@@ -0,0 +1,6 @@
+export declare const fontMap: {
+    readonly 'SB Sans Text': number;
+    readonly 'SF Pro Display Medium': number;
+    readonly 'SF Pro Display Regular': number;
+};
+//# sourceMappingURL=fonts.d.ts.map

package/dist/fonts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../src/fonts.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,OAAO;;;;CAIV,CAAC"}

package/dist/fonts.js

@@ -0,0 +1,8 @@
+import sbSansText from './assets/fonts/SB Sans Text.ttf';
+import sfProDisplayMedium from './assets/fonts/sf-pro-display/SFPRODISPLAYMEDIUM.OTF';
+import sfProDisplayRegular from './assets/fonts/sf-pro-display/SFPRODISPLAYREGULAR.otf';
+export const fontMap = {
+    'SB Sans Text': sbSansText,
+    'SF Pro Display Medium': sfProDisplayMedium,
+    'SF Pro Display Regular': sfProDisplayRegular,
+};

package/dist/index.d.ts

@@ -0,0 +1,38 @@
+export { ListCell } from './ListCell/ListCell';
+export type { ListCellProps } from './ListCell';
+export { Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';
+export { Tabs, GroupTabIcon, ActivityTabIcon, AccountTabIcon } from './Tabs';
+export type { TabsProps, TabItem, TabIcon } from './Tabs';
+export { useFloatingTabBarScrollPadding } from './Tabs';
+export { Picker } from './Picker';
+export type { PickerProps, PickerItem } from './Picker';
+export { Input } from './Input';
+export type { InputProps } from './Input';
+export { BigInput } from './BigInput';
+export type { BigInputProps } from './BigInput';
+export { Select } from './Select';
+export type { SelectProps } from './Select';
+export { DatePicker } from './DatePicker';
+export type { DatePickerProps, DatePickerMode, DatePickerValue, DateRangeValue } from './DatePicker';
+export { DimmedScrollView } from './DimmedScrollView';
+export type { DimmedScrollViewProps } from './DimmedScrollView';
+export { FadingEdge } from './FadingEdge';
+export type { FadingEdgeProps } from './FadingEdge';
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant } from './Button';
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeVariant } from './Badge';
+export { ToggleSection } from './ToggleSection';
+export type { ToggleSectionProps } from './ToggleSection';
+export { CardStack, CardStackDots } from './CardStack';
+export type { CardStackProps, CardStackDotsProps, CardStackDotsPosition, } from './CardStack';
+export { Icon, iconNames } from './Icon';
+export type { IconName, IconProps } from './Icon';
+export { SegmentedTabs } from './SegmentedTabs';
+export type { SegmentedTabsProps, SegmentedTab } from './SegmentedTabs';
+export { Alert } from './Alert';
+export type { AlertProps } from './Alert';
+export { colors, typography } from './theme';
+export { fontMap } from './fonts';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7E,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAE1D,OAAO,EAAE,8BAA8B,EAAE,MAAM,QAAQ,CAAC;AAExD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAExD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAErG,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAE3D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAExD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACvD,YAAY,EACV,cAAc,EACd,kBAAkB,EAClB,qBAAqB,GACtB,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACzC,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAElD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAExE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,20 @@
+export { ListCell } from './ListCell/ListCell';
+export { Avatar } from './Avatar';
+export { Tabs, GroupTabIcon, ActivityTabIcon, AccountTabIcon } from './Tabs';
+export { useFloatingTabBarScrollPadding } from './Tabs';
+export { Picker } from './Picker';
+export { Input } from './Input';
+export { BigInput } from './BigInput';
+export { Select } from './Select';
+export { DatePicker } from './DatePicker';
+export { DimmedScrollView } from './DimmedScrollView';
+export { FadingEdge } from './FadingEdge';
+export { Button } from './Button';
+export { Badge } from './Badge';
+export { ToggleSection } from './ToggleSection';
+export { CardStack, CardStackDots } from './CardStack';
+export { Icon, iconNames } from './Icon';
+export { SegmentedTabs } from './SegmentedTabs';
+export { Alert } from './Alert';
+export { colors, typography } from './theme';
+export { fontMap } from './fonts';

package/dist/theme.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Default theme tokens used by components.
+ * Consumers can override colors via component props (e.g. activeTintColor, inactiveTrackColor).
+ */
+export declare const colors: {
+    readonly primary: "#007AFF";
+    readonly white: "#FFFFFF";
+    readonly error: "#FF3B30";
+    readonly gray300: "#D1D1D6";
+    readonly gray400: "#738295";
+};
+export declare const typography: {
+    readonly fontWeight: {
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+    };
+};
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,MAAM;;;;;;CAMT,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;;CAMb,CAAC"}

package/dist/theme.js

@@ -0,0 +1,18 @@
+/**
+ * Default theme tokens used by components.
+ * Consumers can override colors via component props (e.g. activeTintColor, inactiveTrackColor).
+ */
+export const colors = {
+    primary: '#007AFF',
+    white: '#FFFFFF',
+    error: '#FF3B30',
+    gray300: '#D1D1D6',
+    gray400: '#738295',
+};
+export const typography = {
+    fontWeight: {
+        medium: '500',
+        semibold: '600',
+        bold: '700',
+    },
+};

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@demlanide/react-lucky-components",
+  "url": "https://github.com/demlanide/react-lucky-components",
+  "version": "0.1.0",
+  "description": "Styled React Native components: Switch, Tabs (floating glass tab bar), and tab icons",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "react-native": "dist/index.js",
+  "exports": {
+    ".": {
+      "react-native": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "type-check": "tsc --noEmit",
+    "build": "tsc -p tsconfig.build.json && npm run copy-assets",
+    "copy-assets": "node scripts/copy-assets.mjs",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run clean && npm run build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "peerDependencies": {
+    "@react-navigation/bottom-tabs": ">=6.0.0",
+    "expo-blur": "*",
+    "react": ">=18.0.0",
+    "react-native": ">=0.70.0",
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-safe-area-context": ">=4.0.0",
+    "react-native-svg": ">=13.0.0"
+  },
+  "devDependencies": {
+    "@react-navigation/bottom-tabs": "^7.0.0",
+    "@react-navigation/native": "^7.0.0",
+    "@storybook/react-native-web-vite": "^10.2.8",
+    "@types/react": "^18.0.0",
+    "expo-blur": "~14.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-native": "^0.76.0",
+    "react-native-gesture-handler": "^2.30.0",
+    "react-native-reanimated": "~3.16.0",
+    "react-native-safe-area-context": "^5.0.0",
+    "react-native-screens": "^4.0.0",
+    "react-native-svg": "^15.0.0",
+    "react-native-web": "^0.19.13",
+    "storybook": "^10.2.8",
+    "typescript": "~5.3.0",
+    "vite": "^7.3.1"
+  },
+  "keywords": [
+    "react-native",
+    "components",
+    "tabs",
+    "switch",
+    "expo"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-org/react-native-components.git"
+  },
+  "dependencies": {
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "expo-image-picker": "^17.0.10",
+    "styled-components": "^6.3.9"
+  }
+}